diff --git a/frontend-web/docs/ai-writing-backend-orchestrator-blueprint.md b/frontend-web/docs/ai-writing-backend-orchestrator-blueprint.md
new file mode 100644
index 00000000..d44e3f78
--- /dev/null
+++ b/frontend-web/docs/ai-writing-backend-orchestrator-blueprint.md
@@ -0,0 +1,645 @@
+# AI 写作后端新路线设计草案
+
+## 1. 目标
+
+为“弱模型多 Agent 写作工作流”建设一条独立后端路线，满足以下要求：
+
+- 不影响现有同事正在开发的功能
+- 不强耦合现有 DeerFlow 通用对话主链路
+- 可独立部署、独立调试、独立回滚
+- 支持多阶段写作编排、人工介入、失败重试、流式事件输出
+
+---
+
+## 2. 推荐建设方式
+
+优先建议：
+
+- 在 `offline-backend-20260512` 下新建独立应用或独立模块
+
+建议目录：
+
+```text
+offline-backend-20260512/
+  apps/
+    ai_writing_orchestrator/
+      api/
+      application/
+      domain/
+      infrastructure/
+      prompts/
+      tests/
+```
+
+如果当前后端没有 `apps/` 结构，也可以采用：
+
+```text
+offline-backend-20260512/
+  ai-writing-orchestrator/
+    api/
+    application/
+    domain/
+    infrastructure/
+    prompts/
+    tests/
+```
+
+重点不是目录名字，而是一定要把“多 Agent 写作编排”与现有通用聊天能力隔离开。
+
+---
+
+## 3. 技术路线建议
+
+推荐组合：
+
+- 编排框架：`LangGraph`
+- 模型调用：接你们内网模型网关
+- 检索层：接内网知识库 / 文档库 / 搜索服务
+- 状态存储：先用数据库或 Redis + DB，后续再演进
+- 事件输出：SSE 或流式 HTTP
+
+推荐原因：
+
+- `LangGraph` 适合状态机和多节点回退
+- 对弱模型最关键的是“强流程控制”，不是“自由 Agent 对话”
+- 后续加人工确认节点和 checkpoint 会更自然
+
+---
+
+## 4. 分层设计
+
+建议按四层拆分。
+
+## 4.1 API 层
+
+职责：
+
+- 接收前端请求
+- 鉴权
+- 参数校验
+- 返回 workflow 信息
+- 提供事件流出口
+
+建议文件：
+
+```text
+api/
+  routes/
+    workflows.py
+    workflow_events.py
+  schemas/
+    workflow_request.py
+    workflow_response.py
+```
+
+## 4.2 Application 层
+
+职责：
+
+- 组织用例
+- 调度 workflow service
+- 管理人工确认动作
+- 处理重试和终止逻辑
+
+建议文件：
+
+```text
+application/
+  services/
+    workflow_service.py
+    workflow_event_service.py
+    human_action_service.py
+  use_cases/
+    create_workflow.py
+    start_workflow.py
+    confirm_outline.py
+    rewrite_section.py
+    approve_final.py
+```
+
+## 4.3 Domain 层
+
+职责：
+
+- 定义工作流状态机
+- 定义 Agent 输入输出协议
+- 定义 artifact 与评分模型
+
+建议文件：
+
+```text
+domain/
+  models/
+    workflow.py
+    workflow_stage.py
+    workflow_event.py
+    artifact.py
+    review_result.py
+  agents/
+    researcher.py
+    outliner.py
+    writer.py
+    editor.py
+    supervisor.py
+  graphs/
+    writing_graph.py
+  policies/
+    retry_policy.py
+    quality_policy.py
+```
+
+## 4.4 Infrastructure 层
+
+职责：
+
+- 访问模型网关
+- 访问检索服务
+- 访问数据库
+- 发送事件
+- 缓存与日志
+
+建议文件：
+
+```text
+infrastructure/
+  llm/
+    model_client.py
+  retrieval/
+    intranet_search_client.py
+    knowledge_base_client.py
+  persistence/
+    workflow_repository.py
+    artifact_repository.py
+  streaming/
+    sse_publisher.py
+  logging/
+    workflow_logger.py
+```
+
+---
+
+## 5. 工作流最小闭环
+
+第一版建议只做如下状态机：
+
+1. `collect_materials`
+2. `generate_outline`
+3. `await_outline_confirmation`
+4. `write_draft`
+5. `review_draft`
+6. `rewrite_if_needed`
+7. `complete`
+
+终止规则：
+
+- 编辑评分达标则完成
+- 否则进入重写
+- 最多重写 2 次
+- 超过次数则标记 `human_intervention_required`
+
+---
+
+## 6. Agent 模块设计
+
+## 6.1 Researcher
+
+输入：
+
+- 主题
+- 用户要求
+- 检索范围
+- 可用资料源
+
+输出：
+
+- `material_cards`
+- `facts`
+- `quotes`
+- `examples`
+- `risks`
+- `source_refs`
+
+程序职责：
+
+- 先做检索
+- 再把检索结果裁剪后送给模型
+- 输出必须结构化
+
+## 6.2 Outliner
+
+输入：
+
+- 用户要求
+- 研究结果
+
+输出：
+
+- `title_candidates`
+- `outline_sections`
+- `key_points_per_section`
+
+约束：
+
+- 提纲优先，不写正文
+
+## 6.3 Writer
+
+输入：
+
+- 已确认提纲
+- 素材卡片
+- 风格要求
+
+输出：
+
+- `draft_sections`
+- `section_source_refs`
+- `full_draft_markdown`
+
+建议：
+
+- 按章节分段生成，不要一次长文直出
+
+## 6.4 Editor
+
+输入：
+
+- 初稿
+- 提纲
+- 素材
+- 用户要求
+
+输出：
+
+- `issues`
+- `severity`
+- `score`
+- `rewrite_instructions`
+- `decision`
+
+规则：
+
+- 先查事实，再查结构，再查文风
+
+## 6.5 Supervisor
+
+输入：
+
+- 各阶段结果
+- 重试计数
+- 评分结果
+
+输出：
+
+- 下一跳节点
+- 是否需要人工确认
+- 是否结束
+
+---
+
+## 7. Prompt 组织建议
+
+建议为每个 Agent 分开管理 prompt，不要写成一个超级 prompt。
+
+建议目录：
+
+```text
+prompts/
+  researcher/
+    system.txt
+    output_schema.json
+  outliner/
+    system.txt
+    output_schema.json
+  writer/
+    system.txt
+    output_schema.json
+  editor/
+    system.txt
+    output_schema.json
+  supervisor/
+    system.txt
+```
+
+原则：
+
+- 每个 Agent 一套职责
+- 每个 Agent 一套输出 schema
+- Prompt 版本可管理
+- 后续支持 A/B 调参
+
+---
+
+## 8. 弱模型适配策略
+
+## 8.1 先检索后生成
+
+不要让模型自己“想资料”，程序先检索、裁剪、去重后再喂给模型。
+
+## 8.2 短上下文任务化
+
+每个节点只给弱模型一小段明确任务：
+
+- 研究归纳
+- 提纲整理
+- 单章节写作
+- 单章节审稿
+
+## 8.3 结构化输出
+
+优先 JSON 或 Pydantic schema，不要放任自然语言自由返回。
+
+## 8.4 章节级重写
+
+不要整篇回炉。编辑指出第 2 节有问题，就只重写第 2 节。
+
+## 8.5 程序接管质量门槛
+
+例如：
+
+- 资料引用数不足，不进入下一步
+- 提纲章节数过少，直接重生
+- 编辑评分低于阈值，自动重写
+
+---
+
+## 9. 数据模型建议
+
+## 9.1 Workflow
+
+建议字段：
+
+- `id`
+- `status`
+- `current_stage`
+- `user_id`
+- `thread_id`
+- `input_payload`
+- `current_artifact_id`
+- `retry_count`
+- `created_at`
+- `updated_at`
+
+## 9.2 Workflow Artifact
+
+建议字段：
+
+- `id`
+- `workflow_id`
+- `artifact_type`
+- `stage`
+- `version`
+- `title`
+- `content`
+- `metadata`
+
+## 9.3 Workflow Event
+
+建议字段：
+
+- `id`
+- `workflow_id`
+- `event_type`
+- `stage`
+- `agent_name`
+- `payload`
+- `created_at`
+
+## 9.4 Human Action
+
+建议字段：
+
+- `workflow_id`
+- `action_type`
+- `payload`
+- `operator`
+- `created_at`
+
+---
+
+## 10. API 草案
+
+## 10.1 创建任务
+
+`POST /api/ai-writing/workflows`
+
+请求：
+
+```json
+{
+  "topic": "主题",
+  "articleType": "行业分析",
+  "audience": "管理层",
+  "tone": "专业克制",
+  "targetLength": 3000,
+  "constraints": ["避免口语化"],
+  "referenceScope": ["内网知识库", "项目复盘文档"]
+}
+```
+
+返回：
+
+```json
+{
+  "workflowId": "wf_xxx",
+  "status": "idle"
+}
+```
+
+## 10.2 启动任务
+
+`POST /api/ai-writing/workflows/{id}/start`
+
+## 10.3 查询任务
+
+`GET /api/ai-writing/workflows/{id}`
+
+## 10.4 订阅事件
+
+`GET /api/ai-writing/workflows/{id}/events`
+
+返回事件流示例：
+
+```json
+{
+  "type": "stage_changed",
+  "stage": "generating_outline",
+  "message": "正在生成提纲"
+}
+```
+
+## 10.5 确认提纲
+
+`POST /api/ai-writing/workflows/{id}/confirm-outline`
+
+## 10.6 指定章节重写
+
+`POST /api/ai-writing/workflows/{id}/rewrite-section`
+
+## 10.7 确认终稿
+
+`POST /api/ai-writing/workflows/{id}/approve-final`
+
+---
+
+## 11. LangGraph 实现建议
+
+## 11.1 推荐 graph 节点
+
+- `load_input`
+- `retrieve_materials`
+- `normalize_materials`
+- `generate_outline`
+- `wait_for_outline_confirmation`
+- `write_sections`
+- `merge_sections`
+- `review_draft`
+- `rewrite_sections`
+- `publish_final_artifact`
+
+## 11.2 推荐 state
+
+建议 state 字段：
+
+- `workflow_id`
+- `input_payload`
+- `materials`
+- `outline`
+- `outline_confirmed`
+- `draft_sections`
+- `merged_draft`
+- `review_result`
+- `rewrite_targets`
+- `final_article`
+- `retry_count`
+- `events`
+
+## 11.3 条件边
+
+建议条件边逻辑：
+
+- 提纲未确认 -> 等待用户
+- 编辑通过 -> 完成
+- 编辑不通过且可重试 -> 重写
+- 编辑不通过且超限 -> 人工介入
+
+---
+
+## 12. 可观测性要求
+
+第一版就建议带上以下能力：
+
+- 每个 workflow 的事件日志
+- 每个 Agent 的输入输出摘要
+- 每次重试原因
+- 每个阶段耗时
+- 每次模型调用 token 与错误日志
+
+后续排问题会非常依赖这些数据。
+
+---
+
+## 13. 测试建议
+
+## 13.1 单元测试
+
+覆盖：
+
+- stage 流转
+- retry policy
+- quality policy
+- 事件构造
+
+## 13.2 集成测试
+
+覆盖：
+
+- 创建任务到完成的主链路
+- 提纲确认链路
+- 审稿失败后重写链路
+- 人工介入链路
+
+## 13.3 Prompt 回归集
+
+建议建立 10-20 个固定写作样例，做回归：
+
+- 短文
+- 长文
+- 事实密集型文章
+- 宣传型文章
+- 分析型文章
+
+---
+
+## 14. 开发顺序建议
+
+## Step 1：先做 domain 与 API 契约
+
+先定：
+
+- stage 枚举
+- event 枚举
+- artifact 结构
+- human action payload
+
+## Step 2：先做 fake orchestrator
+
+先不接真实模型，只模拟事件流，把前后端联调跑通。
+
+## Step 3：接 Researcher + Outliner
+
+优先把“研究 + 提纲”做出来，因为这是弱模型提升最大的环节。
+
+## Step 4：接 Writer + Editor
+
+再接初稿和审稿重写。
+
+## Step 5：接可观测性和缓存
+
+最后再补生产化能力。
+
+---
+
+## 15. 风险控制建议
+
+### 风险 1：直接复用现有线程流，导致协议污染
+
+建议：
+
+- workflow 用独立 route 和独立 event schema
+
+### 风险 2：写作结果与右侧 artifact 模型不兼容
+
+建议：
+
+- 后端统一输出标准 markdown artifact
+
+### 风险 3：弱模型频繁输出不合法 JSON
+
+建议：
+
+- 每个节点加 schema repair
+- 加轻量重试
+- 尽量减少复杂嵌套输出
+
+### 风险 4：研究资料太多导致上下文爆炸
+
+建议：
+
+- 检索后先裁剪、摘要、分桶
+
+---
+
+## 16. 最终建议
+
+后端第一版最重要的是把“状态机、事件流、人工确认、章节重写”这四件事做对，而不是一开始就追求很多花哨 Agent。
+
+建议 MVP 只保留：
+
+1. Researcher
+2. Outliner
+3. Writer
+4. Editor
+5. Supervisor
+
+当这条链路稳定后，再继续扩展 fact-checker、style editor、compliance reviewer。
diff --git a/frontend-web/docs/ai-writing-final-execution-plan.md b/frontend-web/docs/ai-writing-final-execution-plan.md
new file mode 100644
index 00000000..cd8805cd
--- /dev/null
+++ b/frontend-web/docs/ai-writing-final-execution-plan.md
@@ -0,0 +1,806 @@
+# AI 写作执行方案
+
+## 1. 总体原则
+
+本项目的最终落地原则：
+
+1. 前端继续基于当前 `open-canvas` 页面开发，不复制第二套页面
+2. 后端单独开 `ai-writing-orchestrator` 新路线，不侵入现有主链路
+3. 编排框架采用 `LangGraph`
+4. 写作工作流采用 `Researcher -> Outliner -> Writer -> Editor -> Supervisor`
+5. Agent 间输出统一采用 `JSON Schema / Pydantic`
+6. 前后端通过 `SSE` 传递工作流事件
+7. 第一版只做最小闭环，不做过多花哨扩展
+
+一句话说明：
+
+用独立的新后端路线承载多 Agent 写作工作流，前端继续复用 `open-canvas`，实现上采用 `LangGraph + A/B/C Agent + SSE` 的最小闭环。
+
+---
+
+## 2. 项目边界
+
+## 2.1 前端边界
+
+继续使用当前页面：
+
+- [CanvasResizableLayout.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/components/layout/CanvasResizableLayout.tsx)
+- [CanvasChatPanel.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/components/chat/CanvasChatPanel.tsx)
+- [CanvasArtifactPanel.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/components/artifact/CanvasArtifactPanel.tsx)
+
+前端做的事情：
+
+- 左侧增加“写作工作流模式”
+- 展示多 Agent 执行进度与中间产物
+- 提供提纲确认和指定章节重写
+- 将初稿、终稿同步到右侧 artifact
+
+前端不做的事情：
+
+- 不重写右侧编辑器
+- 不重写现有普通 chat 流程
+- 不把 workflow 状态散落在多个旧 context 里
+
+## 2.2 后端边界
+
+后端采用独立新路线：
+
+推荐目录：
+
+```text
+offline-backend-20260512/
+  apps/
+    ai_writing_orchestrator/
+      api/
+      application/
+      domain/
+      infrastructure/
+      prompts/
+      tests/
+```
+
+后端做的事情：
+
+- 实现写作 workflow 状态机
+- 实现 A/B/C Agent 与 Supervisor
+- 接内网模型与内网检索
+- 输出标准事件流和文章 artifact
+
+后端不做的事情：
+
+- 不直接改现有 DeerFlow 主流程
+- 不把工作流逻辑塞到现有通用 thread 协议里
+
+## 2.3 资料搜集边界
+
+第一版处于互联网开发阶段，因此研究员的资料搜集先走互联网检索，不接内网检索服务。
+
+第一版要求：
+
+- 研究员可以调用互联网搜索能力收集公开资料
+- 研究结果必须保留来源 URL、标题、摘要、抓取时间
+- 检索层必须抽象成统一接口，不能把互联网搜索逻辑写死在 Agent prompt 或 graph 节点里
+
+第二版预留：
+
+- 后续替换或并行接入内网搜索接口
+- 后续接入内部知识库、文档库、FAQ、项目复盘库
+- 前端和工作流层不因检索源变化而改协议
+
+统一设计要求：
+
+- `Researcher` 只依赖“检索接口”，不依赖具体是互联网还是内网
+- `writing_graph` 只读取标准化后的素材结果
+- API、事件流、artifact 结构不区分互联网资料和内网资料
+
+推荐检索抽象：
+
+```text
+infrastructure/
+  retrieval/
+    base.py
+    internet_search_client.py
+    intranet_search_client.py
+    retriever_router.py
+```
+
+建议接口：
+
+```python
+class RetrievalProvider(Protocol):
+    def search(self, query: str, top_k: int) -> list[RetrievedDocument]: ...
+
+class RetrievedDocument(BaseModel):
+    title: str
+    url: str | None
+    source_type: str
+    snippet: str
+    published_at: str | None = None
+    fetched_at: str
+    reliability: str | None = None
+```
+
+第一版路由策略：
+
+- 默认 `internet`
+- 配置项预留 `intranet`、`hybrid`
+
+例如：
+
+```yaml
+retrieval:
+  provider: internet
+  top_k: 8
+  timeout_seconds: 15
+```
+
+这样第一版先跑公网资料，后续切换内网时，只替换 `retriever_router` 和对应 provider，不改 workflow 主逻辑。
+
+---
+
+## 3. 第一版产品目标
+
+用户在 `open-canvas` 中选择“写作工作流模式”后，可以完成以下流程：
+
+1. 输入主题、体裁、读者、风格、篇幅
+2. 研究员搜集资料并输出素材卡片
+3. 提纲 Agent 生成提纲
+4. 用户确认提纲
+5. Writer 生成初稿
+6. Editor 给出问题清单与评分
+7. 不达标则重写一次或两次
+8. 终稿写入右侧 artifact
+
+第一版成功标准：
+
+- 不是“生成得像最强模型一样好”
+- 而是“明显优于单轮直出，并且流程可控、可回退、可人工介入”
+
+## 3.1 第一版研究员目标
+
+第一版 `Researcher` 的核心职责，不是“写文章”，而是“给 Writer 准备可信、可引用、可筛选的素材”。
+
+第一版输入：
+
+- 用户主题
+- 用户写作要求
+- 检索源配置，第一版默认 `internet`
+
+第一版输出至少包含：
+
+- `material_cards`
+- `facts`
+- `quotes`
+- `examples`
+- `risks`
+- `source_refs`
+
+每条素材最少要带：
+
+- 来源标题
+- 来源 URL
+- 摘要
+- 可信度标签
+- 被引用的原始片段或整理后的事实点
+
+第一版 Researcher 的程序流程建议：
+
+1. 根据主题自动生成 3-5 个检索 query
+2. 调用互联网检索接口拿回候选文档
+3. 做去重、裁剪、初筛
+4. 让模型将结果整理成结构化素材卡片
+5. 将结构化结果返回给 Outliner 和 Writer
+
+第一版先不做：
+
+- 深度网页 crawling
+- 多轮自动追问式深研究
+- 内网知识库接入
+- 复杂引用格式生成
+
+---
+
+## 4. 最终工作流
+
+## 4.1 Agent 角色
+
+### `Researcher`
+
+职责：
+
+- 从配置的检索源检索信息
+- 产出结构化素材卡片
+- 标注来源、可信度、风险点
+
+第一版说明：
+
+- 默认走互联网公开资料检索
+- 必须预留后续切换到内网检索源的接口
+- 检索实现放在 `infrastructure/retrieval/`，不要写死在 prompt 中
+
+第一版检索源字段建议：
+
+- `source_type = "internet"`
+- 后续预留 `source_type = "intranet" | "hybrid"`
+
+输出：
+
+- `material_cards`
+- `facts`
+- `quotes`
+- `examples`
+- `risks`
+- `source_refs`
+
+### `Outliner`
+
+职责：
+
+- 根据用户要求和研究结果生成提纲
+
+输出：
+
+- `title_candidates`
+- `outline_sections`
+- `key_points_per_section`
+
+### `Writer`
+
+职责：
+
+- 基于提纲和素材写初稿
+- 按章节写，不一次生成整篇长文
+
+输出：
+
+- `draft_sections`
+- `section_source_refs`
+- `full_draft_markdown`
+
+### `Editor`
+
+职责：
+
+- 检查事实、结构、文风
+- 给出评分与重写建议
+
+输出：
+
+- `issues`
+- `severity`
+- `score`
+- `rewrite_instructions`
+- `decision`
+
+### `Supervisor`
+
+职责：
+
+- 负责流程调度
+- 负责通过 / 重写 / 人工介入判断
+
+## 4.2 状态机
+
+第一版统一采用：
+
+- `idle`
+- `collecting_materials`
+- `generating_outline`
+- `await_outline_confirmation`
+- `writing_draft`
+- `reviewing_draft`
+- `rewriting_draft`
+- `completed`
+- `failed`
+- `human_intervention_required`
+
+## 4.3 流程闭环
+
+最小闭环固定为：
+
+1. `Research`
+2. `Outline`
+3. `HumanConfirmOutline`
+4. `Draft`
+5. `Review`
+6. `RewriteIfNeeded`
+7. `Complete`
+
+重试规则：
+
+- 最多重写 2 次
+- 达标则完成
+- 超限则进入人工介入
+
+## 4.4 LangGraph 推荐节点
+
+第一版推荐节点：
+
+- `load_input`
+- `build_search_queries`
+- `retrieve_materials`
+- `normalize_materials`
+- `generate_outline`
+- `wait_for_outline_confirmation`
+- `write_sections`
+- `merge_sections`
+- `review_draft`
+- `rewrite_sections`
+- `publish_final_artifact`
+
+其中和资料搜集直接相关的节点说明：
+
+### `build_search_queries`
+
+职责：
+
+- 根据用户主题和目标文章类型，生成 3-5 个检索 query
+
+### `retrieve_materials`
+
+职责：
+
+- 调用检索 provider 获取候选文档
+- 第一版默认走 `internet_search_client`
+- 后续可切到 `intranet_search_client`
+
+### `normalize_materials`
+
+职责：
+
+- 做去重
+- 做摘要裁剪
+- 做来源字段统一
+- 输出标准 `RetrievedDocument[]`
+
+---
+
+## 5. 前端最终做法
+
+## 5.1 目录建议
+
+在现有 `open-canvas` 下新增：
+
+```text
+frontend-web/src/open-canvas/
+  workflow/
+    api/
+      writing-workflow.ts
+    components/
+      WritingWorkflowEntryForm.tsx
+      WritingWorkflowTimeline.tsx
+      WritingWorkflowEventList.tsx
+      WritingWorkflowArtifactDrawer.tsx
+      WritingWorkflowConfirmCard.tsx
+      WritingWorkflowHeader.tsx
+      CanvasWorkflowPanel.tsx
+    contexts/
+      WritingWorkflowContext.tsx
+    hooks/
+      useWritingWorkflow.ts
+      useWritingWorkflowEvents.ts
+    types/
+      workflow.ts
+```
+
+## 5.2 左侧改造策略
+
+`CanvasChatPanel` 只承担模式切换与容器职责：
+
+- `chat` 模式：沿用现有普通聊天
+- `writing_pipeline` 模式：渲染 `CanvasWorkflowPanel`
+
+新面板负责：
+
+- 写作任务表单
+- 进度时间线
+- 事件列表
+- 中间产物抽屉
+- 提纲确认卡片
+
+## 5.3 右侧衔接策略
+
+继续复用现有 `CanvasArtifactPanel`。
+
+同步规则：
+
+- 提纲：可选同步到右侧预览
+- 初稿：同步到右侧
+- 重写稿：覆盖当前草稿
+- 终稿：作为最终 artifact
+
+## 5.4 前端状态设计
+
+新增：
+
+- `workflowMode`
+- `workflowRunId`
+- `workflowStage`
+- `workflowStatus`
+- `workflowEvents`
+- `workflowArtifacts`
+- `workflowPendingAction`
+
+注意：
+
+- workflow 状态放进新的 `WritingWorkflowContext`
+- 不塞进现有 `CanvasGraphContext`
+
+## 5.5 前端显示的资料信息
+
+第一版左侧至少要能展示研究员产出的资料摘要：
+
+- 来源标题
+- 来源域名或 URL
+- 资料摘要
+- 可信度标签
+- 是否被提纲或正文引用
+
+建议在 `WritingWorkflowArtifactDrawer.tsx` 中增加“素材卡片”视图。
+
+注意：
+
+- 第一版显示公开互联网来源即可
+- 后续接内网时，这个展示层不变，只是来源字段从 URL 变成内网文档标识或内部链接
+
+---
+
+## 6. 后端最终做法
+
+## 6.1 分层
+
+推荐分层：
+
+```text
+api/
+application/
+domain/
+infrastructure/
+prompts/
+tests/
+```
+
+## 6.2 核心模块
+
+建议核心文件：
+
+```text
+domain/
+  models/
+    workflow.py
+    workflow_stage.py
+    workflow_event.py
+    artifact.py
+    review_result.py
+  agents/
+    researcher.py
+    outliner.py
+    writer.py
+    editor.py
+    supervisor.py
+  graphs/
+    writing_graph.py
+  policies/
+    retry_policy.py
+    quality_policy.py
+```
+
+## 6.3 检索层实现要求
+
+第一版检索层必须独立成基础设施模块，不允许：
+
+- 在 Agent prompt 中直接拼接“去网上找资料”
+- 在 graph 节点中散落请求第三方搜索的代码
+- 把互联网检索和内网检索混在一个无抽象的函数里
+
+建议结构：
+
+```text
+infrastructure/
+  retrieval/
+    base.py
+    internet_search_client.py
+    intranet_search_client.py
+    retriever_router.py
+    material_normalizer.py
+```
+
+建议职责：
+
+- `internet_search_client.py`
+  - 第一版实际使用
+  - 对接互联网搜索 API 或爬取网关
+
+- `intranet_search_client.py`
+  - 第一版只保留接口和空实现或 mock
+  - 后续接企业内部接口
+
+- `retriever_router.py`
+  - 根据配置选择 provider
+
+- `material_normalizer.py`
+  - 统一清洗和标准化结果
+
+## 6.4 Prompt 管理
+
+统一独立存放：
+
+```text
+prompts/
+  researcher/
+    system.txt
+    output_schema.json
+  outliner/
+    system.txt
+    output_schema.json
+  writer/
+    system.txt
+    output_schema.json
+  editor/
+    system.txt
+    output_schema.json
+  supervisor/
+    system.txt
+```
+
+## 6.5 输出约束
+
+每个 Agent 都必须：
+
+- 优先输出 JSON / Pydantic schema
+- 失败时允许轻量 repair 和一次重试
+- 避免自由散文式输出
+
+## 6.6 Researcher 的实现细则
+
+Researcher 推荐由两部分组成：
+
+1. 程序化检索
+2. 模型化整理
+
+推荐伪流程：
+
+```python
+def run_research(topic: str, article_type: str, provider: RetrievalProvider):
+    queries = build_queries(topic, article_type)
+    raw_docs = []
+    for query in queries:
+        raw_docs.extend(provider.search(query=query, top_k=5))
+    docs = normalize_materials(raw_docs)
+    docs = dedupe_materials(docs)
+    docs = rank_materials(docs)
+    return llm_extract_material_cards(docs)
+```
+
+第一版建议：
+
+- 先把 query 生成逻辑做简单
+- `top_k` 先控制在 5-10
+- 先做轻量去重和摘要裁剪
+- 不做很重的网页全文抓取
+
+---
+
+## 7. 前后端协议
+
+## 7.1 API
+
+第一版统一提供：
+
+- `POST /api/ai-writing/workflows`
+- `POST /api/ai-writing/workflows/{id}/start`
+- `GET /api/ai-writing/workflows/{id}`
+- `GET /api/ai-writing/workflows/{id}/events`
+- `POST /api/ai-writing/workflows/{id}/confirm-outline`
+- `POST /api/ai-writing/workflows/{id}/rewrite-section`
+- `POST /api/ai-writing/workflows/{id}/approve-final`
+
+## 7.2 SSE 事件
+
+统一事件类型：
+
+- `workflow_started`
+- `stage_changed`
+- `agent_started`
+- `agent_output_chunk`
+- `artifact_generated`
+- `human_confirmation_required`
+- `retry_scheduled`
+- `workflow_completed`
+- `workflow_failed`
+
+第一版前端不需要消费复杂嵌套事件，只要先把这 9 类打通。
+
+## 7.3 配置项补充
+
+建议增加以下配置项：
+
+```yaml
+retrieval:
+  provider: internet
+  top_k: 8
+  timeout_seconds: 15
+  enable_content_fetch: false
+
+workflow:
+  max_revisions: 2
+
+models:
+  researcher: your-default-model
+  outliner: your-default-model
+  writer: your-default-model
+  editor: your-default-model
+```
+
+说明：
+
+- 第一版 `provider=internet`
+- 第二版可切成 `intranet` 或 `hybrid`
+
+---
+
+## 8. 必须做 / 延后做 / 不建议现在做
+
+## 8.1 必须做
+
+### 架构
+
+- 独立后端路线 `ai-writing-orchestrator`
+- 前端独立 `workflow/` 目录
+- LangGraph 状态机
+- `Researcher / Outliner / Writer / Editor / Supervisor`
+- 独立检索抽象层，第一版先落互联网 provider
+
+### 协议
+
+- 标准 workflow 状态枚举
+- 标准 SSE 事件枚举
+- 标准 artifact 结构
+- JSON / Pydantic 输出约束
+
+### 功能
+
+- 启动写作任务
+- 研究阶段
+- 提纲阶段
+- 提纲确认
+- 初稿生成
+- 审稿与最多 2 次重写
+- 终稿同步到右侧
+- 素材卡片展示
+- 来源 URL、标题、摘要、可信度落库或挂在 artifact metadata
+
+### UI
+
+- 模式切换
+- 时间线
+- 事件列表
+- 提纲确认卡片
+- 右侧终稿显示
+- 左侧素材卡片视图
+
+## 8.2 延后做
+
+- 章节级精准重写
+- 初稿多版本树
+- FactChecker
+- StyleEditor
+- ComplianceReviewer
+- 自动评分看板
+- 素材引用可视化高亮
+- 更复杂的人机协作节点
+- 内网知识库正式接入
+- 混合检索 `hybrid`
+- 网页全文抓取与深摘要
+
+## 8.3 不建议现在做
+
+- 直接接入现有 DeerFlow 主 agent 包
+- 同时试 MetaGPT、CrewAI、AutoGen 多套底座
+- 一开始就做 5 个以上 Agent
+- 一开始就做很复杂的文章版本管理
+- 一开始就把评分阈值和 prompt 写死得非常细
+
+## 9. 最终开发顺序
+
+## Step 1：先定契约
+
+先一起拍板：
+
+- stage 枚举
+- event 枚举
+- artifact 结构
+- confirm / rewrite 的 payload
+- retrieval provider 接口
+- RetrievedDocument 结构
+
+## Step 2：先做 fake workflow
+
+后端先不接真实模型，只吐 mock SSE 事件，前端把左侧工作台跑通。
+
+## Step 3：先接互联网版 Researcher + Outliner
+
+优先打磨“研究 + 提纲”，这是弱模型提升最大的部分。
+
+这一阶段要求：
+
+- `Researcher` 先走互联网检索
+- `retriever_router` 可配置
+- `intranet_search_client` 先留接口空壳
+
+## Step 4：接 Writer + Editor
+
+再补初稿与审稿重写闭环。
+
+## Step 5：接右侧 artifact
+
+把初稿和终稿稳定写入右侧。
+
+## Step 6：补生产化
+
+- 缓存
+- 日志
+- 错误回放
+- 配置化 prompt
+
+## 10. 推荐任务拆分
+
+## 前端
+
+- `CanvasChatPanel` 模式切换
+- `workflow/` 目录与类型
+- 时间线 / 事件列表 / 确认卡片
+- SSE 订阅 hook
+- 右侧 artifact 映射
+- 素材卡片列表展示
+- 来源字段展示规范
+
+## 后端
+
+- workflow API
+- LangGraph graph
+- 5 个 Agent 模块
+- Prompt 目录
+- SSE 输出
+- 仓储与日志
+- `RetrievalProvider` 抽象
+- `internet_search_client`
+- `intranet_search_client` 预留接口
+- `material_normalizer`
+
+## Prompt / 算法
+
+- Researcher prompt
+- Outliner prompt
+- Writer prompt
+- Editor prompt
+- JSON schema
+- 失败样本回归
+
+## 联调
+
+- mock SSE
+- 真模型接入
+- artifact 同步校验
+- 提纲确认链路验证
+- 互联网资料来源字段联调
+- 素材卡片到提纲引用链路联调
+
+---
+
+## 11. 开发过程中的约束
+
+开发过程中统一采用下面这套口径：
+
+- 产品形态：当前 `open-canvas` 页面上的“写作工作流模式”
+- 技术底座：`LangGraph`
+- 核心模式：`Researcher -> Outliner -> Writer -> Editor -> Supervisor`
+- 后端方式：独立 `ai-writing-orchestrator`
+- 检索方式：第一版 `internet`，接口预留 `intranet`
+- 通信方式：`SSE`
+- 输出方式：`JSON Schema / Pydantic`
+- 第一版目标：先做最小闭环，不追求角色数量和复杂度
+
+给开发团队的统一口径：
+
+“我们在 `open-canvas` 上开发写作工作流模式，后端单开 `ai-writing-orchestrator`，第一版先用互联网资料检索，保留内网检索接入口，用 LangGraph 编排 Researcher、Outliner、Writer、Editor、Supervisor，把研究、提纲、初稿、审稿重写这条最小闭环做稳。”
diff --git a/frontend-web/docs/ai-writing-frontend-refactor-checklist.md b/frontend-web/docs/ai-writing-frontend-refactor-checklist.md
new file mode 100644
index 00000000..b7119431
--- /dev/null
+++ b/frontend-web/docs/ai-writing-frontend-refactor-checklist.md
@@ -0,0 +1,472 @@
+# AI 写作前端改造清单
+
+## 1. 目标
+
+在不新增第二套页面的前提下，基于现有 `open-canvas` 页面，把左侧从“单轮聊天输入框”升级为“多 Agent 写作工作台”，右侧继续沿用当前 `artifact` 编辑与流式预览能力。
+
+当前核心文件：
+
+- [CanvasResizableLayout.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/components/layout/CanvasResizableLayout.tsx)
+- [CanvasChatPanel.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/components/chat/CanvasChatPanel.tsx)
+- [CanvasArtifactPanel.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/components/artifact/CanvasArtifactPanel.tsx)
+- [CanvasGraphContext.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/contexts/CanvasGraphContext.tsx)
+- [CanvasStreamContext.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/contexts/CanvasStreamContext.tsx)
+- [useCanvasThreadStream.ts](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/hooks/useCanvasThreadStream.ts)
+- [runs.ts](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/api/runs.ts)
+
+---
+
+## 2. 改造原则
+
+- 不改右侧主编辑器交互心智
+- 不复制新页面
+- 不破坏现有普通 chat 模式
+- 新增“写作工作流模式”时尽量以增量状态字段和新组件完成
+- 所有 workflow 能力都应允许逐步灰度
+
+---
+
+## 3. 推荐前端结构
+
+建议在 `frontend-web/src/open-canvas` 下新增以下目录：
+
+```text
+frontend-web/src/open-canvas/
+  workflow/
+    api/
+      writing-workflow.ts
+    components/
+      WritingWorkflowEntryForm.tsx
+      WritingWorkflowTimeline.tsx
+      WritingWorkflowEventList.tsx
+      WritingWorkflowArtifactDrawer.tsx
+      WritingWorkflowConfirmCard.tsx
+      WritingWorkflowHeader.tsx
+    contexts/
+      WritingWorkflowContext.tsx
+    hooks/
+      useWritingWorkflow.ts
+      useWritingWorkflowEvents.ts
+    types/
+      workflow.ts
+    utils/
+      workflow-event.ts
+```
+
+说明：
+
+- `open-canvas` 原有聊天、artifact、editor 目录不重构
+- 以 `workflow/` 作为新能力边界，减少对既有文件的侵入
+
+---
+
+## 4. 状态设计
+
+## 4.1 新增的核心状态
+
+建议新增：
+
+- `workflowMode: "chat" | "writing_pipeline"`
+- `workflowRunId: string | null`
+- `workflowStage`
+- `workflowStatus: "idle" | "running" | "waiting_user" | "completed" | "failed"`
+- `workflowEvents: WritingWorkflowEvent[]`
+- `workflowArtifacts: WritingWorkflowArtifact[]`
+- `workflowPendingAction: WritingPendingAction | null`
+
+## 4.2 推荐类型定义
+
+建议在 `workflow/types/workflow.ts` 中先定义：
+
+```ts
+export type WritingWorkflowStage =
+  | "idle"
+  | "collecting_materials"
+  | "generating_outline"
+  | "await_outline_confirmation"
+  | "writing_draft"
+  | "reviewing_draft"
+  | "rewriting_draft"
+  | "completed"
+  | "failed";
+
+export type WritingWorkflowEventType =
+  | "workflow_started"
+  | "stage_changed"
+  | "agent_started"
+  | "agent_output_chunk"
+  | "artifact_generated"
+  | "human_confirmation_required"
+  | "retry_scheduled"
+  | "workflow_completed"
+  | "workflow_failed";
+```
+
+第一版把类型先收紧，后续再扩展。
+
+---
+
+## 5. 组件拆分建议
+
+## 5.1 左侧主面板改造
+
+当前 `CanvasChatPanel` 建议只承担“模式路由”和布局容器职责，不继续无限堆逻辑。
+
+建议改造为：
+
+- `chat` 模式继续渲染现有消息列表 + 输入框
+- `writing_pipeline` 模式渲染新的工作流视图
+
+建议拆分出：
+
+- `CanvasChatConversation.tsx`
+- `CanvasChatInputBox.tsx`
+- `CanvasWorkflowPanel.tsx`
+
+这样后续不会把 `CanvasChatPanel.tsx` 变成一个过大的组件。
+
+## 5.2 新增组件职责
+
+### `WritingWorkflowEntryForm.tsx`
+
+负责采集：
+
+- 主题
+- 文章类型
+- 目标读者
+- 语气风格
+- 目标篇幅
+- 是否需要引用资料
+- 禁写项
+- 补充说明
+
+### `WritingWorkflowTimeline.tsx`
+
+负责显示阶段：
+
+- 研究中
+- 提纲生成中
+- 等待确认提纲
+- 正在写初稿
+- 正在审稿
+- 正在重写
+- 已完成
+
+### `WritingWorkflowEventList.tsx`
+
+负责显示细粒度事件：
+
+- 哪个 Agent 开始执行
+- 当前在处理哪一步
+- 当前产生了什么中间结果
+- 是否重试
+
+### `WritingWorkflowArtifactDrawer.tsx`
+
+负责展示中间产物：
+
+- 素材卡片
+- 提纲
+- 初稿
+- 编辑意见
+- 重写稿
+
+### `WritingWorkflowConfirmCard.tsx`
+
+负责展示用户确认点：
+
+- 确认提纲
+- 驳回提纲并附带修改意见
+- 继续写稿
+- 指定重写章节
+
+---
+
+## 6. Context 与 Hook 改造建议
+
+## 6.1 `CanvasGraphContext`
+
+当前它只维护：
+
+- `messages`
+- `artifact`
+- `streamingArtifact`
+- `isStreaming`
+
+建议不要把 workflow 状态直接塞进现有 `CanvasGraphContext`，否则会让语义过重。
+
+推荐做法：
+
+- 保留 `CanvasGraphContext` 继续服务右侧 artifact 和通用流式状态
+- 新增 `WritingWorkflowContext`
+
+## 6.2 `WritingWorkflowContext`
+
+建议承载：
+
+- 当前 workflow 运行状态
+- 中间产物列表
+- 待确认操作
+- workflow 事件缓存
+- 启动 / 取消 / 确认 / 重写等 action
+
+## 6.3 `useCanvasThreadStream`
+
+当前这个 hook 已经负责：
+
+- 创建 thread
+- 提交消息
+- 接收 thread stream
+- 将 `update_artifact` 同步到右侧
+
+建议不要把“多 Agent workflow 状态机”也硬塞进去。
+
+推荐方案：
+
+- 保留 `useCanvasThreadStream` 给普通 chat 或兼容旧能力使用
+- 新增 `useWritingWorkflow`
+- 新增 `useWritingWorkflowEvents`
+
+分工如下：
+
+- `useCanvasThreadStream`：普通对话流
+- `useWritingWorkflow`：创建 workflow、提交表单、触发确认动作
+- `useWritingWorkflowEvents`：订阅 workflow 事件流
+
+---
+
+## 7. API 接入建议
+
+## 7.1 前端 API 文件
+
+新增：
+
+- `workflow/api/writing-workflow.ts`
+
+建议暴露方法：
+
+- `createWorkflow(payload)`
+- `startWorkflow(id)`
+- `getWorkflow(id)`
+- `subscribeWorkflowEvents(id, handlers)`
+- `confirmOutline(id, payload)`
+- `rewriteSection(id, payload)`
+- `approveFinal(id)`
+
+## 7.2 事件流形式
+
+优先级建议：
+
+1. `SSE`
+2. 流式 HTTP chunk
+3. 轮询兜底
+
+理由：
+
+- 事件驱动比整段消息流更适合 workflow UI
+- 可以更方便映射到时间线和事件列表
+
+---
+
+## 8. 与右侧 Artifact 的衔接
+
+## 8.1 现有优势
+
+当前 `CanvasArtifactPanel` 已具备：
+
+- 流式展示内容
+- 最终 artifact 渲染
+- 右侧编辑体验成熟
+
+这意味着多 Agent 工作流不需要再做第二套文章渲染，只要把最终阶段结果推成 artifact 即可。
+
+## 8.2 建议接法
+
+工作流各阶段结果按两类处理：
+
+- 中间产物：进入左侧 `workflowArtifacts`
+- 可阅读正文：同步一份到右侧 `artifact`
+
+推荐映射：
+
+- 提纲：可选同步到右侧，供用户预览
+- 初稿：同步到右侧
+- 重写稿：覆盖或新增版本到右侧
+- 终稿：作为最终右侧主版本
+
+## 8.3 版本策略
+
+建议右侧版本保留：
+
+- `outline`
+- `draft_v1`
+- `draft_v2`
+- `final`
+
+如果现有 artifact 数据结构不方便承载完整版本树，第一版可先保留在 workflowArtifacts 中，右侧只展示当前激活版本。
+
+---
+
+## 9. 页面交互流程
+
+## 9.1 用户首次进入
+
+- 默认仍是现有 chat 模式
+- 在左侧增加一个显眼切换入口：`普通对话` / `写作工作流`
+
+## 9.2 启动写作工作流
+
+- 用户填写写作任务表单
+- 点击“开始生成”
+- 左侧切换到时间线 + 事件流视图
+- 右侧进入 loading 或素材 / 提纲预览态
+
+## 9.3 等待提纲确认
+
+- 时间线停在 `await_outline_confirmation`
+- 左侧出现确认卡片
+- 用户可执行：
+  - 通过提纲
+  - 要求调整提纲
+  - 追加要求
+
+## 9.4 生成初稿与审稿
+
+- 左侧显示 Agent 事件
+- 右侧展示初稿内容
+- 审稿意见在左侧展示，同时高亮需要重写的章节
+
+## 9.5 完成
+
+- 左侧显示“终稿已完成”
+- 右侧进入可继续局部 AI 编辑状态
+
+---
+
+## 10. 分步开发清单
+
+## Step 1：类型与假数据
+
+目标：
+
+- 先把 workflow 的类型、mock 数据、组件骨架搭好
+
+任务：
+
+- 新建 `workflow/types/workflow.ts`
+- 新建 `workflow/components/*`
+- 用本地 mock 事件驱动时间线和事件流
+
+验收：
+
+- 不接后端也能在页面中演示完整流程
+
+## Step 2：模式切换
+
+目标：
+
+- 在 `CanvasChatPanel` 中接入 `chat / writing_pipeline` 双模式
+
+任务：
+
+- 拆出 `CanvasWorkflowPanel`
+- 增加模式切换 UI
+- 保证旧 chat 不回归
+
+验收：
+
+- 现有功能不受影响
+- 新模式可进入表单页
+
+## Step 3：接入 workflow API
+
+目标：
+
+- 从 mock 切到真实 API
+
+任务：
+
+- 接 `create/start/get/events`
+- 实现基础错误态和重试态
+
+验收：
+
+- 前后端可联调跑一条主链路
+
+## Step 4：接入确认节点
+
+目标：
+
+- 支持提纲确认和指定章节重写
+
+任务：
+
+- 做确认卡片
+- 做动作回传
+
+验收：
+
+- 用户能在流程中介入
+
+## Step 5：打通右侧版本
+
+目标：
+
+- 让 workflow 产物稳定进入右侧编辑器
+
+任务：
+
+- 约定 artifact 映射
+- 接入版本切换或当前版本覆盖
+
+验收：
+
+- 终稿稳定显示在右侧
+
+---
+
+## 11. 建议修改点位
+
+优先涉及文件：
+
+- [CanvasChatPanel.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/components/chat/CanvasChatPanel.tsx)
+- [CanvasGraphContext.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/contexts/CanvasGraphContext.tsx)
+- [useCanvasThreadStream.ts](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/hooks/useCanvasThreadStream.ts)
+- [CanvasArtifactPanel.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/components/artifact/CanvasArtifactPanel.tsx)
+
+建议新增，不建议重写原有：
+
+- `open-canvas/workflow/api/writing-workflow.ts`
+- `open-canvas/workflow/contexts/WritingWorkflowContext.tsx`
+- `open-canvas/workflow/hooks/useWritingWorkflow.ts`
+- `open-canvas/workflow/hooks/useWritingWorkflowEvents.ts`
+- `open-canvas/workflow/components/*`
+
+---
+
+## 12. 联调约定
+
+前后端需要尽早统一：
+
+- workflow id 命名
+- stage 枚举
+- event type 枚举
+- artifact type 枚举
+- user action payload
+- 错误码与可恢复动作
+
+建议先由前端与后端共同确认一份 `workflow.ts` 契约文档，再开工。
+
+---
+
+## 13. 最终建议
+
+前端最重要的不是“把 Agent 结果展示出来”，而是把“工作流过程可视化并允许人工介入”做清楚。
+
+第一版建议先保证三件事：
+
+1. 左侧能看见阶段进展
+2. 用户能确认提纲
+3. 右侧能稳定收到初稿和终稿
+
+只要这三件事稳定，后续再继续加章节重写、评分展示、素材卡片增强，风险会小很多。
diff --git a/frontend-web/docs/ai-writing-weak-model-multi-agent-prd.md b/frontend-web/docs/ai-writing-weak-model-multi-agent-prd.md
new file mode 100644
index 00000000..e2293119
--- /dev/null
+++ b/frontend-web/docs/ai-writing-weak-model-multi-agent-prd.md
@@ -0,0 +1,718 @@
+# AI 写作弱模型多 Agent 编排需求文档
+
+## 1. 背景与目标
+
+当前 `open-canvas` 页面右侧的成品展示与编辑体验已经比较成熟，但左侧模型直接生成文章的质量还不稳定。对于内网部署的弱性能大模型，单轮直出通常会出现以下问题：
+
+- 结构松散，长文容易跑题
+- 素材不足，内容空泛
+- 事实依据弱，容易幻觉
+- 润色能力有限，语言风格不统一
+- 一次生成失败后缺少可控的纠偏机制
+
+因此本次需求的核心目标不是继续优化“单个模型一次写完”，而是在内网用代码编排一个“小型杂志社工作流”，让弱模型通过多角色分工协作，产出明显优于单模型直出的文章质量。
+
+建议的角色分工：
+
+- `Agent A 研究员`：负责搜集内网素材、归纳事实、提取观点
+- `Agent B 作家`：基于选题、素材和结构写初稿
+- `Agent C 严苛编辑`：负责挑错、质检、润色、打回重写
+- `Supervisor / Orchestrator`：负责流程调度、状态记录、重试与终止判断
+
+---
+
+## 2. 本次建设边界
+
+### 2.1 前端边界
+
+前端继续使用现有 `open-canvas` 页面，不新开第二套编辑器页面。
+
+当前相关入口：
+
+- [CanvasResizableLayout.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/components/layout/CanvasResizableLayout.tsx)
+- [CanvasChatPanel.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/components/chat/CanvasChatPanel.tsx)
+- [CanvasArtifactPanel.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/components/artifact/CanvasArtifactPanel.tsx)
+- [CanvasStreamContext.tsx](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/contexts/CanvasStreamContext.tsx)
+- [runs.ts](/F:/react/deeflow-code/deerflow-server-master/frontend-web/src/open-canvas/api/runs.ts)
+
+前端本期只做以下增强：
+
+- 在左侧聊天区增加“写作工作流模式”
+- 让用户能看到多 Agent 阶段进度，而不是只看到最终回答
+- 支持结构化输入：主题、体裁、目标读者、篇幅、语气、参考资料、禁写项
+- 支持查看中间产物：提纲、素材卡片、初稿、编辑意见、终稿
+- 支持人工介入：确认提纲、确认初稿、接受编辑建议、手动重跑某一步
+
+### 2.2 后端边界
+
+后端必须单开新路线，不影响其他同事当前功能开发。
+
+建议原则：
+
+- 不直接改现有 DeerFlow 主流程
+- 不把多 Agent 逻辑硬塞进当前通用对话链路
+- 以独立服务或独立模块形式建设
+- 通过清晰 API 与当前前端页面对接
+
+推荐落地位置：
+
+- 基于仓库中的 `offline-backend-20260512` 单独开一条 `ai-writing-orchestrator` 路线
+- 或在后端新建独立目录，例如 `offline-backend-20260512/apps/ai_writing_orchestrator`
+
+---
+
+## 3. 为什么多 Agent 对弱模型更合适
+
+弱模型最怕“一个 prompt 做完所有事”，因为这要求模型同时完成：
+
+- 选题理解
+- 信息检索
+- 信息筛选
+- 结构规划
+- 长文写作
+- 自我校验
+- 风格润色
+
+把这些任务拆开后，每个 Agent 只处理一个更短、更清晰、更容易被弱模型完成的子任务，通常会带来以下收益：
+
+- 降低单次上下文复杂度
+- 降低一次性长输出失败率
+- 把“写得不好”变成“某一步做得不好”，便于重试
+- 可以在关键节点插入规则校验与人工确认
+- 可以用程序补足模型短板，而不是完全依赖模型智力
+
+这套方案的本质不是“让模型变聪明”，而是“让系统更会组织模型工作”。
+
+---
+
+## 4. 可借鉴的开源项目
+
+以下项目适合借鉴，但不建议整套照搬。建议以“借鉴状态机、角色协作、阶段拆分、重试与审稿机制”为主。
+
+### 4.1 第一优先级：LangGraph
+
+推荐原因：
+
+- 天然适合把写作流程建模成状态图
+- 支持多步骤、条件分支、重试、人工介入
+- 便于把“研究 -> 提纲 -> 初稿 -> 评审 -> 重写”固化成可控流程
+- 对“弱模型 + 强流程控制”很友好
+
+可借鉴点：
+
+- `StateGraph` 的状态驱动编排
+- 每一步单独定义输入、输出、失败处理
+- 可视化地表达“通过 / 打回 / 重试 / 终止”
+
+参考：
+
+- [langchain-ai/langgraph](https://github.com/langchain-ai/langgraph)
+- [langgraph supervisor pattern](https://github.com/langchain-ai/langgraph-supervisor-py)
+
+### 4.2 第二优先级：STORM
+
+推荐原因：
+
+- 它本身就是“研究 + 提纲 + 成文 + 打磨”的长文系统
+- 对“先研究后写作”的思路非常契合
+- 很适合借鉴其“问题驱动研究”和“分阶段生成”的思想
+
+根据其 GitHub README，STORM 将长文生成拆成两个大阶段：先研究并产出提纲，再基于提纲与资料写长文；其引擎进一步拆成知识整理、提纲生成、正文生成、文章润色四个模块。
+
+这和我们的目标高度一致，尤其适合借鉴：
+
+- 提纲先行
+- 素材引用先行
+- 分模块写作
+- 后置润色
+
+参考：
+
+- [stanford-oval/storm](https://github.com/stanford-oval/storm)
+
+### 4.3 第三优先级：Deep Research Agent
+
+推荐原因：
+
+- 明确支持本地模型与云模型混用
+- 已经包含研究、写作、质量校验、缓存、重试等能力
+- 很适合借鉴“研究阶段如何约束弱模型”
+
+根据其 README，这个项目采用四个专职 Agent，并且带有可信度评分、质量验证、重试逻辑、缓存和 checkpoint。
+
+特别适合借鉴：
+
+- 素材缓存
+- 分阶段质量评分
+- 节点失败重试
+- 研究结果结构化存储
+
+参考：
+
+- [tarun7r/deep-research-agent](https://github.com/tarun7r/deep-research-agent)
+
+### 4.4 可选借鉴：CrewAI
+
+推荐原因：
+
+- 角色扮演表达自然
+- 写“研究员 / 作家 / 编辑”这种协作关系很直观
+- Flow + Crew 的组织方式适合做 demo 和快速验证
+
+不建议作为首选底座的原因：
+
+- 更偏“Agent 角色编排体验”
+- 若要做企业内网稳定落地，状态管理和流程可控性通常不如 LangGraph 路线清晰
+
+适合借鉴：
+
+- 角色定义写法
+- Task 模板
+- 多角色协作 prompt 结构
+
+参考：
+
+- [crewAIInc/crewAI](https://github.com/crewAIInc/crewAI)
+
+### 4.5 不建议新项目优先采用：AutoGen
+
+原因：
+
+- 截至最近公开信息，`microsoft/autogen` 已进入 maintenance mode
+- 官方建议新项目优先采用 `Microsoft Agent Framework`
+
+如果要借鉴，只建议借鉴早期多 Agent 对话模式，不建议作为本项目主框架。
+
+参考：
+
+- [microsoft/autogen](https://github.com/microsoft/autogen)
+- [microsoft/agent-framework](https://github.com/microsoft/agent-framework)
+
+### 4.6 结论
+
+综合本项目需求，建议技术选型优先级如下：
+
+1. `LangGraph` 作为主编排框架
+2. `STORM` 借鉴研究-提纲-成文-润色的模块划分
+3. `Deep Research Agent` 借鉴缓存、评分、重试、可观测性
+4. `CrewAI` 借鉴角色 prompt 设计与任务模板
+
+---
+
+## 5. 目标产品形态
+
+用户在当前 `open-canvas` 页面中，不再只是“向模型提问写文章”，而是启动一个可视化的写作流水线。
+
+理想交互流程：
+
+1. 用户输入主题、用途、风格、读者、篇幅要求
+2. 系统先进入“研究阶段”
+3. 系统给出资料卡片与候选提纲
+4. 用户确认提纲或调整
+5. 系统生成初稿
+6. 严苛编辑给出问题清单
+7. 系统自动重写问题段落
+8. 系统输出终稿到右侧编辑区
+9. 用户可继续局部改写、扩写、精简
+
+核心体验目标：
+
+- 左侧像“编辑部工作台”
+- 右侧像“成文编辑器”
+- 用户知道系统现在进行到哪一步
+- 用户可以在关键节点接管，而不是只能等待最终结果
+
+---
+
+## 6. 多 Agent 流程设计
+
+## 6.1 建议的最小可用流程 MVP
+
+第一版不要一上来做很复杂，建议先做 4 步闭环：
+
+1. `Research`
+   - 输入：主题、用户要求、内网资料源
+   - 输出：素材卡片列表、可引用事实列表、风险点列表
+
+2. `Outline`
+   - 输入：用户要求 + 素材卡片
+   - 输出：结构化提纲
+
+3. `Draft`
+   - 输入：提纲 + 素材卡片
+   - 输出：初稿
+
+4. `ReviewAndRewrite`
+   - 输入：初稿 + 用户要求 + 素材卡片
+   - 输出：问题清单、改写稿、终稿
+
+MVP 终止条件：
+
+- 编辑评分达标则结束
+- 不达标最多重写 2 次
+- 超过次数则返回“需要人工介入”
+
+## 6.2 第二阶段增强流程
+
+在 MVP 跑通后，再增加：
+
+- `Planner`：根据文章类型动态规划流程
+- `SectionWriter`：按章节分别写作，避免长文崩坏
+- `FactChecker`：逐段核对素材来源
+- `StyleEditor`：统一语气、标题风格、句式节奏
+- `ComplianceReviewer`：内网场景下做敏感词、保密、术语规范检查
+
+## 6.3 建议的状态机
+
+建议将流程状态固定为：
+
+- `idle`
+- `collecting_materials`
+- `generating_outline`
+- `await_outline_confirmation`
+- `writing_draft`
+- `reviewing_draft`
+- `rewriting_draft`
+- `completed`
+- `failed`
+- `human_intervention_required`
+
+这样前端和后端都可以围绕统一状态通信。
+
+---
+
+## 7. Agent 角色定义建议
+
+## 7.1 Agent A 研究员
+
+职责：
+
+- 搜集内网知识库、文档库、FAQ、历史稿件中的相关信息
+- 输出结构化素材，而不是长篇自然语言
+- 对每条素材标注来源、可信度、适用角度
+
+输出格式建议：
+
+- `facts[]`
+- `quotes[]`
+- `examples[]`
+- `risks[]`
+- `source_refs[]`
+
+约束建议：
+
+- 禁止直接生成整篇文章
+- 不做风格化表达
+- 每条结论必须可回溯到来源
+
+## 7.2 Agent B 作家
+
+职责：
+
+- 严格基于提纲和素材写稿
+- 按章节写，而不是一次写完整篇
+- 对每段附带素材引用 ID，便于后续审核
+
+约束建议：
+
+- 无素材不发挥
+- 每段只服务一个小节目标
+- 段落长度控制
+- 输出结构化草稿数据，而不仅是纯文本
+
+## 7.3 Agent C 严苛编辑
+
+职责：
+
+- 检查逻辑跳跃、素材不足、事实不稳、表述空泛、风格不统一
+- 输出明确的“问题清单”和“改写指令”
+- 必要时打回指定章节，而不是整篇推翻
+
+输出格式建议：
+
+- `issues[]`
+- `severity`
+- `rewrite_instructions[]`
+- `accept/reject`
+
+编辑原则建议：
+
+- 优先挑事实问题，再挑结构问题，最后才是文风问题
+- 问题描述必须可执行，不能只说“写得不够好”
+
+## 7.4 Supervisor
+
+职责：
+
+- 负责流程启动、状态流转、失败重试、记录日志
+- 判断是否需要回到上一步
+- 控制最大重试次数
+- 对外提供统一 API 与流式事件
+
+---
+
+## 8. 前端需求
+
+## 8.1 保持当前页面结构不变
+
+继续沿用当前左右布局：
+
+- 左侧：聊天 + 流程进度 + 中间产物
+- 右侧：最终文章编辑与局部 AI 改写
+
+不建议再复制一套新页面，以免造成维护分叉。
+
+## 8.2 左侧新增 UI 模块
+
+建议在 `CanvasChatPanel` 基础上新增：
+
+- 写作任务表单
+- 工作流阶段时间线
+- Agent 执行日志面板
+- 中间产物抽屉
+- 人工确认卡片
+
+建议新增的前端概念：
+
+- `workflowMode`: `chat | writing_pipeline`
+- `workflowStage`
+- `workflowRunId`
+- `workflowEvents[]`
+- `workflowArtifacts[]`
+
+## 8.3 需要展示的中间产物
+
+至少支持展示：
+
+- 素材卡片
+- 提纲
+- 初稿
+- 编辑问题单
+- 重写结果
+- 最终定稿
+
+这些内容建议不仅显示在消息区，也保存到右侧可选版本中，便于回看。
+
+## 8.4 人工介入节点
+
+至少提供两个确认点：
+
+- 提纲确认
+- 初稿确认或编辑后重跑
+
+后续可扩展：
+
+- 指定重写某个章节
+- 锁定某段不允许再改
+- 替换某条素材后重新生成
+
+---
+
+## 9. 后端需求
+
+## 9.1 架构原则
+
+后端新路线必须满足：
+
+- 与现有通用对话链路解耦
+- 与现有 Agent 运行时解耦
+- 独立维护 Prompt、状态机、数据结构
+- 可以单独部署、单独回滚、单独压测
+
+## 9.2 推荐模块划分
+
+建议后端拆分为以下模块：
+
+- `workflow_orchestrator`
+- `agent_registry`
+- `material_retriever`
+- `outline_generator`
+- `draft_writer`
+- `editor_reviewer`
+- `rewrite_engine`
+- `workflow_store`
+- `stream_event_adapter`
+
+## 9.3 API 建议
+
+建议最小 API：
+
+- `POST /api/ai-writing/workflows`
+  - 创建写作任务
+
+- `POST /api/ai-writing/workflows/{id}/start`
+  - 启动流程
+
+- `GET /api/ai-writing/workflows/{id}`
+  - 查询当前状态
+
+- `GET /api/ai-writing/workflows/{id}/events`
+  - 获取事件流或轮询事件
+
+- `POST /api/ai-writing/workflows/{id}/confirm-outline`
+  - 用户确认提纲
+
+- `POST /api/ai-writing/workflows/{id}/rewrite-section`
+  - 指定章节重写
+
+- `POST /api/ai-writing/workflows/{id}/approve-final`
+  - 确认终稿
+
+## 9.4 流式事件建议
+
+为了与当前 `CanvasStreamContext` 风格兼容，建议后端输出结构化事件流，例如：
+
+- `workflow_started`
+- `stage_changed`
+- `agent_started`
+- `agent_output_chunk`
+- `artifact_generated`
+- `human_confirmation_required`
+- `retry_scheduled`
+- `workflow_completed`
+- `workflow_failed`
+
+前端只要订阅事件，就能把左侧工作台做出来。
+
+---
+
+## 10. 弱模型优化策略
+
+这是本项目成功的关键，不能只靠“多 Agent”这四个字。
+
+## 10.1 强约束输出格式
+
+每个 Agent 尽量输出 JSON 或结构化对象，不要自由发挥。
+
+原因：
+
+- 便于程序消费
+- 便于后续 Agent 接续
+- 便于失败重试
+- 便于质量评估
+
+## 10.2 长文拆成章节生成
+
+不要让弱模型一次生成整篇长文，建议：
+
+- 先出提纲
+- 再按章节逐段写
+- 最后统一润色
+
+## 10.3 把检索和写作分离
+
+研究员只负责找资料，作家只负责组织表达。不要让写作 Agent 同时去“边搜边编”。
+
+## 10.4 程序兜底而不是模型兜底
+
+程序需要承担：
+
+- 去重
+- 引用格式化
+- 章节拼接
+- 长度控制
+- 评分阈值判断
+- 重试路由
+
+## 10.5 小步快跑、失败可回退
+
+每步都要能独立失败、独立重试、独立回放。
+
+## 10.6 引入可量化评分
+
+编辑 Agent 输出不能只是一段文字，建议给出评分维度：
+
+- 相关性
+- 事实性
+- 结构完整度
+- 语言流畅度
+- 风格一致性
+
+系统据此决定是否进入下一步。
+
+---
+
+## 11. 分阶段实施计划
+
+## Phase 1：需求冻结与技术验证
+
+目标：
+
+- 确认文章类型范围
+- 确认内网资料来源
+- 选定主框架
+- 跑通最小多 Agent demo
+
+交付物：
+
+- 技术选型说明
+- 角色与状态机设计
+- 1 个主题的端到端 demo
+
+验收标准：
+
+- 弱模型可完成“研究 -> 提纲 -> 初稿 -> 编辑 -> 重写”闭环
+
+## Phase 2：后端新路线搭建
+
+目标：
+
+- 建立独立 orchestrator
+- 建立 workflow state store
+- 建立事件流输出
+- 建立可配置 prompt 模板
+
+交付物：
+
+- 独立服务目录
+- 基础 API
+- 状态机运行骨架
+
+验收标准：
+
+- 不依赖现有主流程改造即可独立跑通
+
+## Phase 3：前端接入当前页面
+
+目标：
+
+- 在 `CanvasChatPanel` 接入工作流模式
+- 增加阶段展示与人工确认
+- 中间产物可视化
+
+交付物：
+
+- 左侧工作流时间线
+- 中间产物展示面板
+- 流程控制按钮
+
+验收标准：
+
+- 用户可以在当前页面完成一次全流程写作
+
+## Phase 4：质量优化
+
+目标：
+
+- 强化素材检索质量
+- 提高提纲质量
+- 引入章节级重写
+- 引入评分与回退机制
+
+交付物：
+
+- 质量评估规则
+- 重试策略
+- Prompt 调优包
+
+验收标准：
+
+- 弱模型效果明显优于单轮直出
+
+## Phase 5：生产化
+
+目标：
+
+- 加缓存
+- 加日志
+- 加监控
+- 加失败告警
+- 加审计记录
+
+交付物：
+
+- 可观测性方案
+- 运行日志与回放
+- 配置中心或 prompt 管理机制
+
+验收标准：
+
+- 可长期维护并可定位问题
+
+---
+
+## 12. 团队协作与隔离方案
+
+为了不影响其他同事，建议采用以下协作原则：
+
+- 新后端目录独立开发
+- 新接口使用独立路由前缀
+- 前端只在 `open-canvas` 内增量开发
+- 不修改现有公共线程协议，必要时增加新事件类型
+- Prompt、Agent 配置、评分规则独立存放
+
+推荐分工：
+
+- 前端 1 人：负责左侧工作流 UI 与右侧版本接入
+- 后端 1-2 人：负责 orchestrator、Agent 执行、事件流
+- 算法/Prompt 1 人：负责角色 prompt、评分规则、失败样本调优
+
+---
+
+## 13. 风险与规避
+
+### 风险 1：Agent 太多，成本和耗时暴涨
+
+规避：
+
+- MVP 只保留 3 个业务 Agent + 1 个 Supervisor
+- 长文按章节写，失败只重写局部
+
+### 风险 2：弱模型在自由对话场景中失控
+
+规避：
+
+- 全流程结构化
+- 每步只做一件事
+- 强约束输入输出格式
+
+### 风险 3：内网检索质量不足，导致垃圾进垃圾出
+
+规避：
+
+- 先把资料源治理好
+- 对素材做来源、可信度、去重处理
+
+### 风险 4：前后端协议频繁变化影响联调
+
+规避：
+
+- 先定义事件模型和 artifact 模型
+- 先 mock 数据，再并行开发
+
+### 风险 5：影响现有功能稳定性
+
+规避：
+
+- 新路线、新接口、新状态机
+- 不侵入现有主链路
+
+---
+
+## 14. 推荐结论
+
+本项目推荐的总体策略：
+
+1. 前端继续基于当前 `open-canvas` 页面开发，不复制新页面
+2. 后端单独开 `ai-writing-orchestrator` 新路线，避免影响现有同事
+3. 主框架优先采用 `LangGraph`
+4. 流程设计借鉴 `STORM`
+5. 质量控制借鉴 `Deep Research Agent`
+6. 角色设计与任务模板可参考 `CrewAI`
+7. 第一版只做 4 步 MVP：研究、提纲、初稿、编辑重写
+
+一句话总结：
+
+不是继续“调一个更强的 prompt”，而是把弱模型放进一个可控的编辑部流水线，让系统帮它把复杂写作拆开完成。
+
+---
+
+## 15. 参考链接
+
+- [LangGraph](https://github.com/langchain-ai/langgraph)
+- [LangGraph Supervisor](https://github.com/langchain-ai/langgraph-supervisor-py)
+- [STORM](https://github.com/stanford-oval/storm)
+- [Deep Research Agent](https://github.com/tarun7r/deep-research-agent)
+- [CrewAI](https://github.com/crewAIInc/crewAI)
+- [Microsoft Agent Framework](https://github.com/microsoft/agent-framework)
+- [AutoGen](https://github.com/microsoft/autogen)
diff --git a/frontend-web/docs/aixiezuo.md b/frontend-web/docs/aixiezuo.md
new file mode 100644
index 00000000..52048f12
--- /dev/null
+++ b/frontend-web/docs/aixiezuo.md
@@ -0,0 +1,1896 @@
+# AI 智能写作 —— 杂志社多 Agent 协作系统（含用户干预 & 详细进度）
+
+> **目标**：通过角色扮演 + 流程编排，让性能较弱的本地大模型产出高质量文章；
+> 同时在每个关键节点暂停等待用户确认，确保最终结果符合预期。
+
+---
+
+## 目录
+
+1. [整体架构](#1-整体架构)
+2. [用户干预节点设计（核心）](#2-用户干预节点设计核心)
+3. [开源参考项目](#3-开源参考项目)
+4. [弱模型增强策略](#4-弱模型增强策略)
+5. [三个 Agent 的角色设计](#5-三个-agent-的角色设计)
+6. [数据结构定义](#6-数据结构定义)
+7. [后端实现（分步）](#7-后端实现分步)
+8. [前端实现（分步）](#8-前端实现分步)
+9. [内网接口预留设计](#9-内网接口预留设计)
+10. [LangGraph 状态机流转图](#10-langgraph-状态机流转图)
+11. [提示词模板（弱模型专用）](#11-提示词模板弱模型专用)
+12. [SSE 协议 & 干预协议设计](#12-sse-协议--干预协议设计)
+13. [前端 UI 组件详细设计](#13-前端-ui-组件详细设计)
+14. [文件目录结构](#14-文件目录结构)
+15. [分步开发检查清单](#15-分步开发检查清单)
+
+---
+
+## 1. 整体架构
+
+```
+┌──────────────────────────────────────────────────────────────────────┐
+│                         前端（现有页面）                               │
+│  frontend-web/src/open-canvas/                                        │
+│                                                                        │
+│  ┌───────────────────────────┐  ┌──────────────────────────────────┐  │
+│  │      AI写作左侧面板         │  │      CanvasArtifactPanel（右侧）  │  │
+│  │  AIWritingPanel.tsx        │  │  （右侧保持不变，实时展示文章草稿）  │  │
+│  │  ┌─────────────────────┐  │  │                                  │  │
+│  │  │  1. 写作意图输入区    │  │  │  ┌────────────────────────────┐ │  │
+│  │  ├─────────────────────┤  │  │  │  实时文章草稿（Markdown）     │ │  │
+│  │  │  2. 进度时间线        │  │  │  │  每次修改都保留版本历史       │ │  │
+│  │  │  ┌───────────────┐  │  │  │  └────────────────────────────┘ │  │
+│  │  │  │ ✅ 研究院完成  │  │  │  │                                  │  │
+│  │  │  │ 素材卡片列表▼ │  │  │  │                                  │  │
+│  │  │  │ [可收起展开]  │  │  │  │                                  │  │
+│  │  │  ├───────────────┤  │  │  │                                  │  │
+│  │  │  │ ⏸ 等待确认    │  │  │  │                                  │  │
+│  │  │  │ [用户干预卡片]│  │  │  │                                  │  │
+│  │  │  ├───────────────┤  │  │  │                                  │  │
+│  │  │  │ ✅ 大纲已生成 │  │  │  │                                  │  │
+│  │  │  │ 大纲预览▼    │  │  │  │                                  │  │
+│  │  │  │ [可收起展开]  │  │  │  │                                  │  │
+│  │  │  ├───────────────┤  │  │  │                                  │  │
+│  │  │  │ ⏸ 等待确认    │  │  │  │                                  │  │
+│  │  │  └───────────────┘  │  │  │                                  │  │
+│  └───────────────────────────┘  └──────────────────────────────────┘  │
+└───────────────────────────────┬──────────────────────────────────────┘
+                                │ SSE 流式推送（进度/干预/草稿）
+                                │ REST 干预响应（用户决策提交）
+                                ▼
+┌──────────────────────────────────────────────────────────────────────┐
+│              后端新路由（独立，URL 前缀 /api/ai-writing/）              │
+│  app/gateway/routers/ai_writing.py                                    │
+│  POST /api/ai-writing/start          ← 启动写作流程，返回 session_id   │
+│  GET  /api/ai-writing/{id}/stream    ← SSE 流（进度/干预/草稿事件）    │
+│  POST /api/ai-writing/{id}/resume    ← 用户干预响应，恢复流程          │
+│  GET  /api/ai-writing/{id}/state     ← 查询当前流程状态                │
+└───────────────────────────────┬──────────────────────────────────────┘
+                                │
+                                ▼
+┌──────────────────────────────────────────────────────────────────────┐
+│         AI Writing LangGraph Graph（独立于原有 Graph）                 │
+│  packages/harness/deerflow/agents/ai_writing/graph.py                 │
+│                                                                        │
+│  intent_parser → researcher → [PAUSE:材料确认] → writer(outline)      │
+│      → [PAUSE:大纲确认] → writer(draft) → editor                      │
+│      → [PAUSE:终稿确认] → END                                          │
+│                  ↑__________________________|（打回重写，最多3次）      │
+└──────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 2. 用户干预节点设计（核心）
+
+整个流程共有 **4 个用户干预点**，每个干预点都会暂停流程，向前端推送 `await_user` 事件，等待用户操作后再恢复。
+
+### 干预点总览
+
+```
+流程步骤                    干预点    用户可执行的操作
+─────────────────────────   ──────    ───────────────────────────────────────
+① 研究院搜集素材完成         PAUSE-1   确认素材 / 补充关键词重搜 / 手动删除素材
+② 作家生成大纲完成           PAUSE-2   确认大纲 / 编辑大纲内容 / 要求重新规划
+③ 作家完成初稿（每次修改）    PAUSE-3   确认定稿 / 给出修改意见 / 直接编辑文本
+④ 编辑审核完成（打回时）      PAUSE-4   采纳编辑意见 / 忽略编辑意见强制定稿
+```
+
+### PAUSE-1：素材确认
+
+**触发**：研究院搜集完素材后暂停
+
+前端展示：
+- 素材卡片列表（默认收起，点击展开）
+- 每张卡片：标题、来源、时间、相关度色条、正文摘要（可展开）
+- 每张卡片有勾选框，支持删除不相关素材
+- "补充关键词"输入框，可追加搜索
+
+用户操作选项：
+```
+[确认素材，开始写大纲]   ← 主操作，使用当前勾选素材继续
+[重新搜索]              ← 清空素材重新来
+[补充搜索: ___________] ← 追加关键词，合并到现有素材
+```
+
+### PAUSE-2：大纲确认
+
+**触发**：作家生成大纲后暂停
+
+前端展示：
+- 大纲树形视图（默认展开）
+- 每个章节可直接点击编辑标题和要点
+- 可拖拽调整章节顺序（可选）
+
+用户操作选项：
+```
+[确认大纲，开始写作]     ← 使用当前大纲（含用户修改）继续
+[重新规划大纲]           ← 清空大纲重新生成，可附加意见: ___
+```
+
+### PAUSE-3：草稿确认
+
+**触发**：每次作家完成草稿后暂停（包括修改稿）
+
+前端展示：
+- 右侧实时显示完整草稿
+- 左侧显示"编辑打分 + 问题清单"（如已经过编辑）
+- 版本切换导航（第1稿 / 第2稿 …）
+
+用户操作选项：
+```
+[确认定稿]                      ← 以此为最终文章
+[给出修改意见: ____________]    ← 用户自己写修改意见，绕过编辑流程直接指导重写
+[让编辑继续审核]                ← 走编辑流程（默认）
+```
+
+### PAUSE-4：编辑审核结果确认（仅在打回时）
+
+**触发**：编辑判断"打回"且未达到最大循环次数
+
+前端展示：
+- 编辑评分 + 分项得分（事实/逻辑/语言）
+- 问题清单（按严重程度排序）
+- 每个问题条目：位置 + 问题描述 + 修改建议
+
+用户操作选项：
+```
+[采纳编辑意见，让作家重写]      ← 走编辑反馈重写
+[强制定稿（忽略编辑意见）]      ← 用当前草稿结束
+[补充修改指令: ____________]    ← 用户自己的意见覆盖编辑意见
+```
+
+---
+
+## 3. 开源参考项目
+
+### Stanford STORM（最核心参考）
+- **项目**：https://github.com/stanford-oval/storm
+- **借鉴**：Researcher + Writer + Editor 完整协作流程；素材 → 大纲 → 分段写作的两步写法；短 prompt + JSON 输出模式（弱模型友好）
+
+### GPT-Researcher
+- **项目**：https://github.com/assafelovic/gpt-researcher
+- **借鉴**：统一搜索接口抽象（`context/retriever.py`）；素材字段定义（标题/来源/时间/相关度）
+
+### CrewAI
+- **项目**：https://github.com/crewAIInc/crewAI
+- **借鉴**：`role + goal + backstory` 三段式角色锁定 Prompt；`expected_output` 强制 JSON 输出；任务链传参方式
+
+### LangGraph Human-in-the-loop（项目已有，重点参考）
+- **文档**：https://langchain-ai.github.io/langgraph/concepts/human_in_the_loop/
+- **借鉴**：`interrupt()` 实现流程暂停等待用户输入；`Command(resume=...)` 恢复流程；`MemorySaver` checkpointing 持久化状态
+
+---
+
+## 4. 弱模型增强策略
+
+| 策略 | 实现方式 | 效果 |
+|------|----------|------|
+| **任务最小化** | 每次 LLM 调用只做一件事，禁止混合任务 | 减少跑偏概率 |
+| **角色锁定** | System Prompt 开头：「你是X，你只做Y，不做其他」 | 防止角色混淆 |
+| **强制 JSON** | `response_format=json_object` + Prompt 末尾提供 JSON 模板 | 输出可解析，有 fallback |
+| **上下文压缩** | 传给下游的素材截断到 200 字摘要，不传原文 | 防止 context 溢出 |
+| **两步写作** | 先写大纲（JSON），确认后再逐段写正文 | 防止弱模型一次生成长文失控 |
+| **分项审查** | 编辑三项独立打分（事实/逻辑/语言），不混在一起 | 每次调用任务极简 |
+| **Few-Shot 示例** | 每个 Agent 的 Prompt 内置 1 个期望输出的完整 JSON 示例 | 模型直接模仿，输出更稳定 |
+| **迭代上限保护** | 编辑打回最多 3 次，超出强制定稿 | 防死循环 |
+| **用户干预兜底** | 每个关键节点人工确认 | 彻底避免方向跑偏 |
+
+---
+
+## 5. 三个 Agent 的角色设计
+
+### Agent A —— 研究院（Researcher）
+
+```
+角色：专业情报研究员
+单次调用任务：① 只拆关键词  ② 只排序素材（两次独立调用）
+输入：用户写作意图
+输出：MaterialPackage（结构化素材包）
+工具：web_search（当前） / intranet_search（预留）
+```
+
+**两步拆分（弱模型关键）**：
+- Step 1：`extract_keywords(intent)` → `{"keywords": [...]}`（仅此一件事）
+- Step 2：对每个关键词独立搜索（并发），合并去重，截断到 500 字
+
+**输出字段**：
+```json
+{
+  "keywords": ["关键词1", "关键词2"],
+  "materials": [
+    {
+      "id": "m001",
+      "title": "文章标题",
+      "content": "正文摘要（最多500字）",
+      "source": "来源域名或系统名称",
+      "published_at": "2024-01-15",
+      "relevance_score": 0.92,
+      "source_type": "internet",
+      "url": "https://...",
+      "recUuid": "",
+    }
+  ],
+  "summary": "共搜索到X条素材，精选Y条"
+}
+```
+
+### Agent B —— 作家（Writer）
+
+```
+角色：专业内容创作者
+Phase 1：write_outline → 输出大纲 JSON（暂停等用户确认）
+Phase 2：write_draft  → 按段落逐段写正文（逐段 SSE 推送）
+输入：MaterialPackage + 用户意图 + 确认后的大纲
+      （修改稿时额外附加：编辑意见 or 用户修改意见）
+输出：DraftArticle（含 Markdown 全文）
+```
+
+### Agent C —— 编辑（Editor）
+
+```
+角色：资深主编，标准极高
+任务：三项独立审查 → 综合评分 → 通过/打回决定
+      每项审查是独立的 LLM 调用（弱模型关键）
+输入：DraftArticle + MaterialPackage（用于核实事实）
+输出：ReviewResult（评分 + 分项问题清单）
+```
+
+**三次独立 LLM 调用**：
+1. `review_facts(draft, materials)` → `{"score": 85, "issues": [...]}`
+2. `review_logic(draft)` → `{"score": 80, "issues": [...]}`
+3. `review_language(draft)` → `{"score": 90, "issues": [...]}`
+
+---
+
+## 6. 数据结构定义
+
+### 6.1 后端 LangGraph State（Python）
+
+**文件**：`packages/harness/deerflow/agents/ai_writing/state.py`
+
+```python
+from typing import TypedDict, List, Optional, Annotated, Literal
+import operator
+
+# ── 素材 ──────────────────────────────────────────────────────────────
+class Material(TypedDict):
+    id: str
+    title: str
+    content: str          # 截断到 500 字
+    source: str
+    published_at: str
+    relevance_score: float
+    source_type: str      # "internet" | "intranet"
+    url: str
+    recUuid: str           # 知识库ID
+
+class MaterialPackage(TypedDict):
+    keywords: List[str]
+    materials: List[Material]
+    summary: str
+
+# ── 大纲 ──────────────────────────────────────────────────────────────
+class OutlineSection(TypedDict):
+    section_title: str
+    key_points: List[str]
+    material_ids: List[str]
+
+class Outline(TypedDict):
+    title: str
+    sections: List[OutlineSection]
+
+# ── 草稿 ──────────────────────────────────────────────────────────────
+class DraftArticle(TypedDict):
+    title: str
+    outline: Outline
+    full_markdown: str
+    word_count: int
+    revision_count: int
+
+# ── 编辑审核 ──────────────────────────────────────────────────────────
+class ReviewIssue(TypedDict):
+    category: str      # "fact" | "logic" | "language"
+    severity: str      # "major" | "minor"
+    location: str
+    issue: str
+    suggestion: str
+
+class ReviewResult(TypedDict):
+    verdict: str       # "pass" | "reject"
+    fact_score: int
+    logic_score: int
+    language_score: int
+    overall_score: int
+    pass_threshold: int
+    revision_notes: List[ReviewIssue]
+
+# ── 用户干预 ──────────────────────────────────────────────────────────
+class UserInterventionPayload(TypedDict):
+    """用户在干预点提交的数据"""
+    action: str          # 见各干预点定义
+    # PAUSE-1 素材确认
+    approved_material_ids: List[str]   # 用户勾选保留的素材 ID
+    extra_keywords: List[str]          # 补充搜索关键词
+    # PAUSE-2 大纲确认
+    edited_outline: Optional[Outline]  # 用户编辑后的大纲（None 表示未修改）
+    outline_feedback: str              # 要求重新规划的意见
+    # PAUSE-3 草稿确认
+    user_revision_notes: str           # 用户自己的修改意见
+    # PAUSE-4 编辑审核确认
+    override_verdict: bool             # True = 强制定稿，False = 采纳编辑意见
+
+# ── 主状态 ────────────────────────────────────────────────────────────
+WritingStatus = Literal[
+    "researching", "awaiting_material_confirm",
+    "writing_outline", "awaiting_outline_confirm",
+    "writing_draft", "awaiting_draft_confirm",
+    "reviewing", "awaiting_review_confirm",
+    "revising", "done", "error"
+]
+
+class AIWritingState(TypedDict):
+    # 写作配置
+    user_intent: str
+    article_type: str
+    target_audience: str
+    word_count_target: int
+
+    # Agent A 输出
+    material_package: Optional[MaterialPackage]
+
+    # Agent B 输出
+    current_outline: Optional[Outline]
+    drafts: Annotated[List[DraftArticle], operator.add]
+    current_draft: Optional[DraftArticle]
+
+    # Agent C 输出
+    review_result: Optional[ReviewResult]
+
+    # 用户干预数据（每个干预点会覆盖）
+    last_user_intervention: Optional[UserInterventionPayload]
+
+    # 流程控制
+    revision_count: int
+    max_revisions: int       # 默认 3
+    status: WritingStatus
+
+    # SSE 进度推送队列（每个节点追加）
+    progress_events: Annotated[List[dict], operator.add]
+```
+
+### 6.2 前端类型（TypeScript）
+
+**文件**：`frontend-web/src/open-canvas/types/ai-writing.ts`
+
+```typescript
+// ── 素材 ─────────────────────────────────────────────────────────────
+export interface AIMaterial {
+  id: string;
+  title: string;
+  content: string;
+  source: string;
+  publishedAt: string;
+  relevanceScore: number;
+  sourceType: 'internet' | 'intranet';
+  url?: string;
+  docId?: string;
+  department?: string;
+  classification?: string;
+}
+
+// ── 大纲 ─────────────────────────────────────────────────────────────
+export interface OutlineSection {
+  sectionTitle: string;
+  keyPoints: string[];
+  materialIds: string[];
+}
+
+export interface AIOutline {
+  title: string;
+  sections: OutlineSection[];
+}
+
+// ── 编辑审核 ──────────────────────────────────────────────────────────
+export interface ReviewIssue {
+  category: 'fact' | 'logic' | 'language';
+  severity: 'major' | 'minor';
+  location: string;
+  issue: string;
+  suggestion: string;
+}
+
+export interface ReviewResult {
+  verdict: 'pass' | 'reject';
+  factScore: number;
+  logicScore: number;
+  languageScore: number;
+  overallScore: number;
+  passThreshold: number;
+  revisionNotes: ReviewIssue[];
+}
+
+// ── 写作状态 ──────────────────────────────────────────────────────────
+export type WritingStatus =
+  | 'idle'
+  | 'researching'
+  | 'awaiting_material_confirm'
+  | 'writing_outline'
+  | 'awaiting_outline_confirm'
+  | 'writing_draft'
+  | 'awaiting_draft_confirm'
+  | 'reviewing'
+  | 'awaiting_review_confirm'
+  | 'revising'
+  | 'done'
+  | 'error';
+
+// ── SSE 进度事件 ──────────────────────────────────────────────────────
+export type ProgressEventType =
+  | 'step_start'          // Agent 开始执行某步骤
+  | 'step_done'           // Agent 完成某步骤
+  | 'materials_ready'     // 素材搜集完毕
+  | 'outline_ready'       // 大纲生成完毕
+  | 'draft_chunk'         // 草稿文字流式片段（逐段）
+  | 'draft_ready'         // 草稿完整版本
+  | 'review_ready'        // 编辑审核完毕
+  | 'await_user'          // 暂停，等待用户干预
+  | 'resumed'             // 用户干预已提交，流程恢复
+  | 'done'                // 全部完成
+  | 'error';              // 出错
+
+export interface ProgressEvent {
+  type: ProgressEventType;
+  sessionId: string;
+  agentName?: string;    // '研究院' | '作家' | '编辑' | '系统'
+  message: string;
+  detail?: string;
+  // type===materials_ready 时
+  materials?: AIMaterial[];
+  keywords?: string[];
+  materialSummary?: string;
+  // type===outline_ready 时
+  outline?: AIOutline;
+  // type===draft_chunk / draft_ready 时
+  draftMarkdown?: string;
+  draftTitle?: string;
+  revisionCount?: number;
+  // type===review_ready 时
+  reviewResult?: ReviewResult;
+  // type===await_user 时
+  pausePoint?: 'material_confirm' | 'outline_confirm' | 'draft_confirm' | 'review_confirm';
+  pauseContext?: Record<string, unknown>;  // 干预点所需的上下文数据
+}
+
+// ── 用户干预提交体 ────────────────────────────────────────────────────
+export interface UserInterventionPayload {
+  action: string;
+  // PAUSE-1
+  approvedMaterialIds?: string[];
+  extraKeywords?: string[];
+  // PAUSE-2
+  editedOutline?: AIOutline;
+  outlineFeedback?: string;
+  // PAUSE-3
+  userRevisionNotes?: string;
+  // PAUSE-4
+  overrideVerdict?: boolean;
+}
+
+// ── 写作请求 ──────────────────────────────────────────────────────────
+export interface AIWritingRequest {
+  userIntent: string;
+  articleType: 'news' | 'analysis' | 'feature' | 'report';
+  targetAudience: string;
+  wordCountTarget: number;
+  extraContext?: string;
+}
+
+// ── Hook 返回值 ───────────────────────────────────────────────────────
+export interface AIWritingState {
+  sessionId: string | null;
+  status: WritingStatus;
+  progressEvents: ProgressEvent[];
+  materials: AIMaterial[];
+  outline: AIOutline | null;
+  currentDraftMarkdown: string;
+  currentDraftTitle: string;
+  reviewResult: ReviewResult | null;
+  revisionCount: number;
+  currentPause: ProgressEvent | null;  // 当前干预点事件（null 表示不在暂停状态）
+  error: string | null;
+}
+```
+
+---
+
+## 7. 后端实现（分步）
+
+### 步骤 7.1：目录结构
+
+```
+packages/harness/deerflow/agents/ai_writing/
+├── __init__.py
+├── state.py
+├── graph.py
+├── nodes/
+│   ├── __init__.py
+│   ├── intent_parser.py
+│   ├── researcher.py
+│   ├── writer_outline.py     # 只写大纲（独立节点）
+│   ├── writer_draft.py       # 只写正文（独立节点）
+│   └── editor.py
+├── search/
+│   ├── __init__.py
+│   ├── base.py               # 抽象接口（内网预留）
+│   ├── internet_search.py
+│   └── intranet_stub.py
+└── prompts/
+    ├── researcher_prompts.py
+    ├── writer_prompts.py
+    └── editor_prompts.py
+
+app/gateway/routers/
+└── ai_writing.py             # 新建，不修改其他路由文件
+```
+
+### 步骤 7.2：搜索接口抽象（内网预留）
+
+**文件**：`packages/harness/deerflow/agents/ai_writing/search/base.py`
+
+```python
+from abc import ABC, abstractmethod
+from typing import List
+from dataclasses import dataclass, field
+
+@dataclass
+class SearchResult:
+    """统一搜索结果格式 —— 内外网共用，对接内网只需映射到此结构"""
+    title: str
+    content: str
+    source: str
+    published_at: str
+    url: str = ""
+    relevance_score: float = 0.0
+    source_type: str = "internet"   # "internet" | "intranet"
+    # ── 内网扩展字段（按需填充）──────────────────────────────────────
+    recUuid: str = ""                # 知识库 ID
+    extra_metadata: dict = field(default_factory=dict)
+
+class BaseSearchProvider(ABC):
+    """
+    搜索提供者抽象基类
+
+    对接内网步骤：
+    1. 继承此类，创建 IntranetSearchProvider
+    2. 实现 search() —— 调用内网 API，将响应映射到 SearchResult
+    3. 在 config.yaml 中设置 ai_writing.search_provider: intranet
+    4. 无需修改任何 Agent 代码
+    """
+
+    @abstractmethod
+    async def search(
+        self,
+        query: str,
+        max_results: int = 5,
+        date_from: str = "",
+        date_to: str = "",
+    ) -> List[SearchResult]: ...
+
+    @abstractmethod
+    async def health_check(self) -> bool: ...
+```
+
+**内网接口桩**：`packages/harness/deerflow/agents/ai_writing/search/intranet_stub.py`
+
+```python
+from typing import List
+from .base import BaseSearchProvider, SearchResult
+
+class IntranetSearchProvider(BaseSearchProvider):
+    """
+    内网搜索接口适配器
+    ═══════════════════════════════════════════════════════════
+    内网系统需提供 HTTP 接口，推荐格式：
+
+    POST /api/search
+    Content-Type: application/json
+    Authorization: Bearer {api_key}   （若需认证）
+
+    请求体：
+    {
+        "query": "搜索关键词",
+        "page_size": 5,
+        "date_from": "2024-01-01",    （可选）
+        "date_to": "2024-12-31"       （可选）
+    }
+
+    响应体：
+    {
+        "total": 100,
+        "results": [
+            {
+                "title":           "文档标题",
+                "content":         "摘要（建议500字以内）",
+                "source":          "来源系统名称",
+                "published_at":    "2024-01-15",
+                "recUuid":          "DOC-2024-001",
+                "url":             "intranet://...",   （可选）
+                "relevance_score": 0.92                （可选，无则传0）
+            }
+        ]
+    }
+
+    字段名称不同时，在 config.yaml 的 intranet_field_map 中配置映射。
+    ═══════════════════════════════════════════════════════════
+    """
+
+    def __init__(self, base_url: str, api_key: str = "", timeout: int = 10,
+                 field_map: dict = None):
+        self.base_url = base_url
+        self.api_key = api_key
+        self.timeout = timeout
+        # 字段映射：内网字段名 → 标准字段名
+        self.field_map = field_map or {}
+
+    def _map_field(self, item: dict, standard_field: str) -> str:
+        """将内网字段名映射到标准字段名"""
+        intranet_field = self.field_map.get(standard_field, standard_field)
+        return item.get(intranet_field, item.get(standard_field, ""))
+
+    async def search(self, query: str, max_results: int = 5, **kwargs) -> List[SearchResult]:
+        # ── TODO：对接内网时，取消以下注释并调整 ──────────────────────
+        # import httpx
+        # headers = {"Authorization": f"Bearer {self.api_key}"} if self.api_key else {}
+        # async with httpx.AsyncClient(timeout=self.timeout) as client:
+        #     resp = await client.post(
+        #         f"{self.base_url}/api/search",
+        #         json={"query": query, "page_size": max_results},
+        #         headers=headers,
+        #     )
+        #     resp.raise_for_status()
+        #     items = resp.json().get("results", [])
+        # return [
+        #     SearchResult(
+        #         title=self._map_field(it, "title"),
+        #         content=self._map_field(it, "content")[:500],
+        #         source=self._map_field(it, "source"),
+        #         published_at=self._map_field(it, "published_at"),
+        #         relevance_score=float(it.get(
+        #             self.field_map.get("relevance_score", "relevance_score"), 0)),
+        #         recUuid=self._map_field(it, "recUuid"),
+        #         source_type="intranet",
+        #     )
+        #     for it in items
+        # ]
+        # ─────────────────────────────────────────────────────────────
+        return []  # 未配置时返回空，不影响互联网模式
+
+    async def health_check(self) -> bool:
+        return False
+```
+
+**搜索工厂**：`packages/harness/deerflow/agents/ai_writing/search/__init__.py`
+
+```python
+from .base import BaseSearchProvider, SearchResult
+from .internet_search import InternetSearchProvider
+from .intranet_stub import IntranetSearchProvider
+
+def get_search_provider(ai_writing_config: dict) -> BaseSearchProvider:
+    """
+    config.yaml 中配置：
+    ai_writing:
+      search_provider: internet   # 或 intranet
+      intranet_search_url: http://...
+      intranet_search_api_key: ""
+      intranet_field_map:
+        content: "abstract"
+        source: "system_name"
+    """
+    provider = ai_writing_config.get("search_provider", "internet")
+    if provider == "intranet":
+        return IntranetSearchProvider(
+            base_url=ai_writing_config.get("intranet_search_url", ""),
+            api_key=ai_writing_config.get("intranet_search_api_key", ""),
+            field_map=ai_writing_config.get("intranet_field_map", {}),
+        )
+    return InternetSearchProvider()
+```
+
+### 步骤 7.3：LangGraph Graph 与 Interrupt 机制
+
+**文件**：`packages/harness/deerflow/agents/ai_writing/graph.py`
+
+```python
+import asyncio
+from langgraph.graph import StateGraph, END
+from langgraph.checkpoint.memory import MemorySaver
+from langgraph.types import interrupt, Command
+from .state import AIWritingState
+from .nodes.intent_parser import intent_parser_node
+from .nodes.researcher import researcher_node
+from .nodes.writer_outline import writer_outline_node
+from .nodes.writer_draft import writer_draft_node
+from .nodes.editor import editor_node
+
+# ── 干预节点：暂停并等待用户输入 ─────────────────────────────────────────
+
+async def pause_material_confirm(state: AIWritingState) -> dict:
+    """PAUSE-1：素材确认干预点"""
+    user_input = interrupt({
+        "pause_point": "material_confirm",
+        "message": "研究院已完成素材搜集，请确认素材后继续。",
+        "materials": state["material_package"]["materials"],
+        "keywords": state["material_package"]["keywords"],
+        "summary": state["material_package"]["summary"],
+    })
+    # 用户提交后，user_input 是 UserInterventionPayload
+    # 根据用户操作过滤素材
+    action = user_input.get("action", "confirm")
+    if action == "confirm":
+        approved_ids = set(user_input.get("approvedMaterialIds", [
+            m["id"] for m in state["material_package"]["materials"]
+        ]))
+        filtered_materials = [
+            m for m in state["material_package"]["materials"]
+            if m["id"] in approved_ids
+        ]
+        updated_pkg = {**state["material_package"], "materials": filtered_materials}
+        return {
+            "material_package": updated_pkg,
+            "last_user_intervention": user_input,
+            "status": "writing_outline",
+            "progress_events": [{"type": "resumed", "message": "用户已确认素材，开始规划大纲"}]
+        }
+    # action == "re_search"：重新搜索（返回 researcher 节点，通过路由控制）
+    extra_keywords = user_input.get("extraKeywords", [])
+    return {
+        "last_user_intervention": {**user_input, "_extra_keywords": extra_keywords},
+        "status": "researching",
+        "progress_events": [{"type": "resumed", "message": "重新搜索中..."}]
+    }
+
+async def pause_outline_confirm(state: AIWritingState) -> dict:
+    """PAUSE-2：大纲确认干预点"""
+    user_input = interrupt({
+        "pause_point": "outline_confirm",
+        "message": "作家已完成大纲规划，请确认或编辑大纲后继续。",
+        "outline": state["current_outline"],
+    })
+    action = user_input.get("action", "confirm")
+    if action == "confirm":
+        edited_outline = user_input.get("editedOutline") or state["current_outline"]
+        return {
+            "current_outline": edited_outline,
+            "last_user_intervention": user_input,
+            "status": "writing_draft",
+            "progress_events": [{"type": "resumed", "message": "用户已确认大纲，开始写作"}]
+        }
+    # action == "re_outline"
+    feedback = user_input.get("outlineFeedback", "")
+    return {
+        "last_user_intervention": {**user_input, "_feedback": feedback},
+        "status": "writing_outline",
+        "progress_events": [{"type": "resumed", "message": f"重新规划大纲（意见：{feedback[:50]}）"}]
+    }
+
+async def pause_draft_confirm(state: AIWritingState) -> dict:
+    """PAUSE-3：草稿确认干预点"""
+    user_input = interrupt({
+        "pause_point": "draft_confirm",
+        "message": "草稿已完成，请确认或给出修改意见。",
+        "draft_title": state["current_draft"]["title"],
+        "revision_count": state["current_draft"]["revision_count"],
+        "review_result": state.get("review_result"),
+    })
+    action = user_input.get("action", "to_editor")
+    if action == "finalize":
+        return {
+            "last_user_intervention": user_input,
+            "status": "done",
+            "progress_events": [{"type": "resumed", "message": "用户确认定稿"}]
+        }
+    if action == "user_revise":
+        notes = user_input.get("userRevisionNotes", "")
+        return {
+            "last_user_intervention": {**user_input, "_user_notes": notes},
+            "revision_count": state.get("revision_count", 0) + 1,
+            "status": "revising",
+            "progress_events": [{"type": "resumed", "message": f"按用户意见重写（{notes[:50]}）"}]
+        }
+    # action == "to_editor"：走编辑流程
+    return {
+        "last_user_intervention": user_input,
+        "status": "reviewing",
+        "progress_events": [{"type": "resumed", "message": "提交编辑审核"}]
+    }
+
+async def pause_review_confirm(state: AIWritingState) -> dict:
+    """PAUSE-4：编辑打回确认（仅 verdict==reject 时触发）"""
+    user_input = interrupt({
+        "pause_point": "review_confirm",
+        "message": "编辑认为文章需要修改，请决定下一步操作。",
+        "review_result": state["review_result"],
+        "revision_count": state.get("revision_count", 0),
+        "max_revisions": state.get("max_revisions", 3),
+    })
+    if user_input.get("overrideVerdict"):
+        return {
+            "last_user_intervention": user_input,
+            "status": "done",
+            "progress_events": [{"type": "resumed", "message": "用户强制定稿"}]
+        }
+    # 采纳编辑意见 or 附加用户意见
+    extra_notes = user_input.get("userRevisionNotes", "")
+    return {
+        "last_user_intervention": {**user_input, "_extra_notes": extra_notes},
+        "revision_count": state.get("revision_count", 0) + 1,
+        "status": "revising",
+        "progress_events": [{"type": "resumed", "message": "按编辑意见重写"}]
+    }
+
+# ── 条件路由 ──────────────────────────────────────────────────────────
+
+def after_material_pause(state: AIWritingState) -> str:
+    if state["status"] == "researching":
+        return "researcher"  # 重新搜索
+    return "writer_outline"
+
+def after_outline_pause(state: AIWritingState) -> str:
+    if state["status"] == "writing_outline":
+        return "writer_outline"  # 重新规划
+    return "writer_draft"
+
+def after_draft_pause(state: AIWritingState) -> str:
+    status = state["status"]
+    if status == "done":
+        return "end"
+    if status == "revising":
+        return "writer_draft"  # 按用户意见重写
+    return "editor"            # 走编辑流程
+
+def after_review(state: AIWritingState) -> str:
+    review = state.get("review_result", {})
+    if review.get("verdict") == "pass":
+        return "pause_draft_confirm"  # 编辑通过 → 草稿确认
+    rev_count = state.get("revision_count", 0)
+    max_rev = state.get("max_revisions", 3)
+    if rev_count >= max_rev:
+        return "pause_draft_confirm"  # 超出次数强制到草稿确认
+    return "pause_review_confirm"     # 编辑打回 → 审核确认
+
+def after_review_pause(state: AIWritingState) -> str:
+    if state["status"] == "done":
+        return "end"
+    return "writer_draft"  # 重写
+
+# ── 组装 Graph ────────────────────────────────────────────────────────
+
+def build_ai_writing_graph():
+    graph = StateGraph(AIWritingState)
+
+    # 节点
+    graph.add_node("intent_parser",        intent_parser_node)
+    graph.add_node("researcher",           researcher_node)
+    graph.add_node("pause_material",       pause_material_confirm)   # PAUSE-1
+    graph.add_node("writer_outline",       writer_outline_node)
+    graph.add_node("pause_outline",        pause_outline_confirm)    # PAUSE-2
+    graph.add_node("writer_draft",         writer_draft_node)
+    graph.add_node("pause_draft",          pause_draft_confirm)       # PAUSE-3
+    graph.add_node("editor",               editor_node)
+    graph.add_node("pause_review",         pause_review_confirm)     # PAUSE-4
+
+    # 边
+    graph.set_entry_point("intent_parser")
+    graph.add_edge("intent_parser", "researcher")
+    graph.add_edge("researcher",    "pause_material")
+
+    graph.add_conditional_edges("pause_material", after_material_pause,
+                                 {"researcher": "researcher", "writer_outline": "writer_outline"})
+
+    graph.add_edge("writer_outline", "pause_outline")
+    graph.add_conditional_edges("pause_outline", after_outline_pause,
+                                 {"writer_outline": "writer_outline", "writer_draft": "writer_draft"})
+
+    graph.add_edge("writer_draft", "pause_draft")
+    graph.add_conditional_edges("pause_draft", after_draft_pause,
+                                 {"end": END, "writer_draft": "writer_draft", "editor": "editor"})
+
+    graph.add_conditional_edges("editor", after_review,
+                                 {"pause_draft_confirm": "pause_draft",
+                                  "pause_review_confirm": "pause_review"})
+
+    graph.add_conditional_edges("pause_review", after_review_pause,
+                                 {"end": END, "writer_draft": "writer_draft"})
+
+    # 使用 MemorySaver 支持 interrupt/resume（生产环境换成 PostgresSaver）
+    checkpointer = MemorySaver()
+    return graph.compile(checkpointer=checkpointer, interrupt_before=None)
+
+AI_WRITING_GRAPH = build_ai_writing_graph()
+```
+
+### 步骤 7.4：后端 HTTP 路由
+
+**文件**：`app/gateway/routers/ai_writing.py`
+
+```python
+import asyncio
+import json
+import uuid
+from typing import AsyncGenerator, Optional
+from fastapi import APIRouter, HTTPException
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel, Field
+from langgraph.types import Command
+from deerflow.agents.ai_writing.graph import AI_WRITING_GRAPH
+
+router = APIRouter()
+
+# ── 请求/响应模型 ─────────────────────────────────────────────────────
+
+class StartWritingRequest(BaseModel):
+    user_intent: str
+    article_type: str = "analysis"
+    target_audience: str = "普通读者"
+    word_count_target: int = 800
+    model_name: str = ""
+
+class StartWritingResponse(BaseModel):
+    session_id: str
+    message: str = "写作流程已启动"
+
+class ResumeRequest(BaseModel):
+    action: str
+    approved_material_ids: list[str] = Field(default_factory=list)
+    extra_keywords: list[str] = Field(default_factory=list)
+    edited_outline: Optional[dict] = None
+    outline_feedback: str = ""
+    user_revision_notes: str = ""
+    override_verdict: bool = False
+
+# ── 工具函数 ──────────────────────────────────────────────────────────
+
+def sse(event: str, data: dict) -> str:
+    return f"event: {event}\ndata: {json.dumps(data, ensure_ascii=False)}\n\n"
+
+def _make_thread_config(session_id: str, model_name: str = ""):
+    from deerflow.models.factory import get_default_llm
+    llm = get_default_llm(model_name=model_name or None)
+    return {
+        "configurable": {
+            "thread_id": session_id,
+            "llm": llm,
+            "ai_writing_config": {},  # 从全局 config 读取 search_provider 等
+        }
+    }
+
+# ── 路由 ──────────────────────────────────────────────────────────────
+
+@router.post("/start", response_model=StartWritingResponse)
+async def start_writing(body: StartWritingRequest):
+    """启动写作流程，返回 session_id（后续用此 ID 监听 SSE 和提交干预）"""
+    session_id = str(uuid.uuid4())
+    initial_state = {
+        "user_intent": body.user_intent,
+        "article_type": body.article_type,
+        "target_audience": body.target_audience,
+        "word_count_target": body.word_count_target,
+        "revision_count": 0,
+        "max_revisions": 3,
+        "status": "researching",
+        "drafts": [],
+        "progress_events": [],
+    }
+    config = _make_thread_config(session_id, body.model_name)
+
+    # 异步启动 Graph（不等待完成，通过 SSE 推送进度）
+    asyncio.create_task(_run_graph(session_id, initial_state, config))
+    return StartWritingResponse(session_id=session_id)
+
+
+@router.get("/{session_id}/stream")
+async def stream_progress(session_id: str):
+    """SSE 流：推送进度事件、干预请求、草稿内容"""
+    return StreamingResponse(
+        _sse_generator(session_id),
+        media_type="text/event-stream",
+        headers={"Cache-Control": "no-cache", "X-Accel-Buffering": "no"},
+    )
+
+
+@router.post("/{session_id}/resume")
+async def resume_writing(session_id: str, body: ResumeRequest):
+    """用户提交干预决策，恢复暂停的流程"""
+    config = _make_thread_config(session_id)
+    intervention = {
+        "action": body.action,
+        "approvedMaterialIds": body.approved_material_ids,
+        "extraKeywords": body.extra_keywords,
+        "editedOutline": body.edited_outline,
+        "outlineFeedback": body.outline_feedback,
+        "userRevisionNotes": body.user_revision_notes,
+        "overrideVerdict": body.override_verdict,
+    }
+    # LangGraph Command(resume=...) 恢复被 interrupt() 暂停的流程
+    asyncio.create_task(
+        AI_WRITING_GRAPH.ainvoke(Command(resume=intervention), config=config)
+    )
+    return {"message": "已提交，流程恢复中"}
+
+
+@router.get("/{session_id}/state")
+async def get_state(session_id: str):
+    """查询当前流程状态快照"""
+    config = _make_thread_config(session_id)
+    state = await AI_WRITING_GRAPH.aget_state(config)
+    if not state:
+        raise HTTPException(status_code=404, detail="Session not found")
+    return state.values
+
+
+# ── 内部辅助 ──────────────────────────────────────────────────────────
+
+# 每个 session 的事件队列
+_event_queues: dict[str, asyncio.Queue] = {}
+
+async def _run_graph(session_id: str, initial_state: dict, config: dict):
+    """后台运行 Graph，将节点输出推入事件队列"""
+    queue = asyncio.Queue()
+    _event_queues[session_id] = queue
+
+    try:
+        async for chunk in AI_WRITING_GRAPH.astream(
+            initial_state, config=config, stream_mode="updates"
+        ):
+            node_name = list(chunk.keys())[0]
+            node_output = chunk[node_name]
+
+            # 推送 progress_events
+            for evt in node_output.get("progress_events", []):
+                await queue.put(("progress", evt))
+
+            # 素材就绪
+            if pkg := node_output.get("material_package"):
+                await queue.put(("materials_ready", {
+                    "keywords": pkg["keywords"],
+                    "materials": pkg["materials"],
+                    "summary": pkg["summary"],
+                }))
+
+            # 大纲就绪
+            if outline := node_output.get("current_outline"):
+                await queue.put(("outline_ready", {"outline": outline}))
+
+            # 草稿就绪
+            if draft := node_output.get("current_draft"):
+                await queue.put(("draft_ready", {
+                    "title": draft["title"],
+                    "markdown": draft["full_markdown"],
+                    "revision_count": draft["revision_count"],
+                }))
+
+            # 编辑审核就绪
+            if review := node_output.get("review_result"):
+                await queue.put(("review_ready", {"review_result": review}))
+
+            # interrupt() 触发 → 推送 await_user 事件
+            # LangGraph 在 interrupt 时会抛出特殊异常，
+            # 通过 stream_mode="updates" 时以 "__interrupt__" 节点出现
+            if node_name == "__interrupt__":
+                interrupt_data = node_output.get("value", {})
+                await queue.put(("await_user", interrupt_data))
+
+        await queue.put(("done", {"message": "写作完成"}))
+
+    except Exception as e:
+        await queue.put(("error", {"message": str(e)}))
+    finally:
+        await queue.put(None)  # 哨兵，关闭流
+
+
+async def _sse_generator(session_id: str) -> AsyncGenerator[str, None]:
+    """从队列消费事件，推送为 SSE"""
+    # 等待队列创建（最多 5 秒）
+    for _ in range(50):
+        if session_id in _event_queues:
+            break
+        await asyncio.sleep(0.1)
+    else:
+        yield sse("error", {"message": "Session not found"})
+        return
+
+    queue = _event_queues[session_id]
+    yield sse("connected", {"session_id": session_id})
+
+    while True:
+        item = await queue.get()
+        if item is None:
+            break
+        event_type, data = item
+        yield sse(event_type, {"session_id": session_id, **data})
+        await asyncio.sleep(0)
+
+    _event_queues.pop(session_id, None)
+```
+
+**注册路由**（在 `app/gateway/app.py` 末尾追加，不修改已有代码）：
+
+```python
+from app.gateway.routers import ai_writing
+app.include_router(ai_writing.router, prefix="/api/ai-writing", tags=["ai-writing"])
+```
+
+---
+
+## 8. 前端实现（分步）
+
+### 步骤 8.1：API 客户端
+
+**文件**：`frontend-web/src/open-canvas/api/ai-writing.ts`
+
+```typescript
+import type { AIWritingRequest, ProgressEvent, UserInterventionPayload } from '../types/ai-writing';
+
+const BASE = '/api/ai-writing';
+
+/** 启动写作流程，返回 session_id */
+export async function startWritingSession(req: AIWritingRequest): Promise<string> {
+  const resp = await fetch(`${BASE}/start`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      user_intent: req.userIntent,
+      article_type: req.articleType,
+      target_audience: req.targetAudience,
+      word_count_target: req.wordCountTarget,
+    }),
+  });
+  if (!resp.ok) throw new Error(`启动失败: ${resp.status}`);
+  const data = await resp.json();
+  return data.session_id;
+}
+
+/** 监听 SSE 进度流 */
+export function subscribeToProgress(
+  sessionId: string,
+  onEvent: (event: ProgressEvent) => void,
+  signal?: AbortSignal,
+): () => void {
+  const es = new EventSource(`${BASE}/${sessionId}/stream`);
+
+  const eventTypes = [
+    'progress', 'materials_ready', 'outline_ready',
+    'draft_ready', 'review_ready', 'await_user',
+    'resumed', 'done', 'error',
+  ] as const;
+
+  eventTypes.forEach((type) => {
+    es.addEventListener(type, (e: MessageEvent) => {
+      try {
+        const data = JSON.parse(e.data);
+        onEvent({ type, sessionId, ...data } as ProgressEvent);
+      } catch {
+        // 忽略
+      }
+    });
+  });
+
+  signal?.addEventListener('abort', () => es.close());
+  return () => es.close();
+}
+
+/** 提交用户干预决策 */
+export async function resumeWriting(
+  sessionId: string,
+  payload: UserInterventionPayload,
+): Promise<void> {
+  const resp = await fetch(`${BASE}/${sessionId}/resume`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      action: payload.action,
+      approved_material_ids: payload.approvedMaterialIds ?? [],
+      extra_keywords: payload.extraKeywords ?? [],
+      edited_outline: payload.editedOutline ?? null,
+      outline_feedback: payload.outlineFeedback ?? '',
+      user_revision_notes: payload.userRevisionNotes ?? '',
+      override_verdict: payload.overrideVerdict ?? false,
+    }),
+  });
+  if (!resp.ok) throw new Error(`提交干预失败: ${resp.status}`);
+}
+```
+
+### 步骤 8.2：核心 Hook
+
+**文件**：`frontend-web/src/open-canvas/hooks/useAIWriting.ts`
+
+```typescript
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { startWritingSession, subscribeToProgress, resumeWriting } from '../api/ai-writing';
+import type {
+  AIWritingRequest, AIWritingState, ProgressEvent,
+  UserInterventionPayload, AIMaterial, AIOutline, ReviewResult,
+} from '../types/ai-writing';
+import { useCanvasGraphContext } from '../contexts/CanvasGraphContext';
+
+const INITIAL_STATE: AIWritingState = {
+  sessionId: null,
+  status: 'idle',
+  progressEvents: [],
+  materials: [],
+  outline: null,
+  currentDraftMarkdown: '',
+  currentDraftTitle: '',
+  reviewResult: null,
+  revisionCount: 0,
+  currentPause: null,
+  error: null,
+};
+
+export function useAIWriting() {
+  const { setArtifact } = useCanvasGraphContext();
+  const [state, setState] = useState<AIWritingState>(INITIAL_STATE);
+  const abortRef = useRef<AbortController | null>(null);
+  const unsubscribeRef = useRef<(() => void) | null>(null);
+
+  const handleEvent = useCallback((event: ProgressEvent) => {
+    setState((prev) => {
+      const base = { ...prev, progressEvents: [...prev.progressEvents, event] };
+
+      switch (event.type) {
+        case 'materials_ready':
+          return { ...base, materials: event.materials ?? [], status: 'awaiting_material_confirm', currentPause: event };
+
+        case 'outline_ready':
+          return { ...base, outline: event.outline ?? null, status: 'awaiting_outline_confirm', currentPause: event };
+
+        case 'draft_ready':
+          return {
+            ...base,
+            currentDraftMarkdown: event.draftMarkdown ?? '',
+            currentDraftTitle: event.draftTitle ?? '',
+            revisionCount: event.revisionCount ?? 0,
+            status: 'awaiting_draft_confirm',
+            currentPause: event,
+          };
+
+        case 'review_ready':
+          return { ...base, reviewResult: event.reviewResult ?? null };
+
+        case 'await_user':
+          return { ...base, status: `awaiting_${event.pausePoint ?? 'unknown'}` as AIWritingState['status'], currentPause: event };
+
+        case 'resumed':
+          return { ...base, currentPause: null };
+
+        case 'done':
+          return { ...base, status: 'done', currentPause: null };
+
+        case 'error':
+          return { ...base, status: 'error', error: event.message ?? '未知错误' };
+
+        default:
+          return base;
+      }
+    });
+
+    // 草稿实时同步到右侧 Artifact 面板
+    if (event.type === 'draft_ready' && event.draftMarkdown) {
+      setArtifact({
+        currentIndex: 0,
+        contents: [{
+          index: 0,
+          type: 'text',
+          title: event.draftTitle ?? '草稿',
+          fullMarkdown: event.draftMarkdown,
+        }],
+      });
+    }
+  }, [setArtifact]);
+
+  const startWriting = useCallback(async (request: AIWritingRequest) => {
+    if (state.status !== 'idle' && state.status !== 'done' && state.status !== 'error') return;
+
+    abortRef.current?.abort();
+    abortRef.current = new AbortController();
+    setState({ ...INITIAL_STATE, status: 'researching' });
+
+    try {
+      const sessionId = await startWritingSession(request);
+      setState((prev) => ({ ...prev, sessionId }));
+      const unsubscribe = subscribeToProgress(sessionId, handleEvent, abortRef.current.signal);
+      unsubscribeRef.current = unsubscribe;
+    } catch (err) {
+      setState((prev) => ({ ...prev, status: 'error', error: String(err) }));
+    }
+  }, [state.status, handleEvent]);
+
+  const submitIntervention = useCallback(async (payload: UserInterventionPayload) => {
+    if (!state.sessionId) return;
+    try {
+      await resumeWriting(state.sessionId, payload);
+      setState((prev) => ({ ...prev, currentPause: null }));
+    } catch (err) {
+      setState((prev) => ({ ...prev, error: String(err) }));
+    }
+  }, [state.sessionId]);
+
+  const stopWriting = useCallback(() => {
+    abortRef.current?.abort();
+    unsubscribeRef.current?.();
+    setState((prev) => ({ ...prev, status: 'idle' }));
+  }, []);
+
+  const reset = useCallback(() => {
+    abortRef.current?.abort();
+    unsubscribeRef.current?.();
+    setState(INITIAL_STATE);
+  }, []);
+
+  useEffect(() => () => { abortRef.current?.abort(); }, []);
+
+  return { state, startWriting, submitIntervention, stopWriting, reset };
+}
+```
+
+---
+
+## 9. 内网接口预留设计
+
+### 9.1 配置切换（config.yaml）
+
+```yaml
+ai_writing:
+  search_provider: internet         # ← 切换为 intranet 即启用内网模式
+  intranet_search_url: ""           # 内网搜索服务地址
+  intranet_search_api_key: ""       # 认证 Token（若需要）
+  intranet_search_timeout: 10
+  intranet_field_map:               # 内网字段名映射（与标准字段不同时填写）
+    title: "title"
+    content: "abstract"             # 示例：内网叫 abstract
+    source: "system_name"           # 示例：内网叫 system_name
+    published_at: "create_time"
+    relevance_score: "score"
+    recUuid: "id"
+```
+
+### 9.2 内网素材标准字段
+
+| 标准字段 | 类型 | 必须 | 说明 |
+|----------|------|:----:|------|
+| `title` | string | ✅ | 文章/文档标题 |
+| `content` | string | ✅ | 正文摘要，500 字以内 |
+| `source` | string | ✅ | 来源系统名（如"研发知识库"） |
+| `published_at` | string | ✅ | 发布日期 YYYY-MM-DD |
+| `relevance_score` | float 0-1 | ⬜ | 无则传 0 |
+| `recUuid` | string | ⬜ | 知识库文档 ID |
+
+### 9.3 对接内网步骤清单
+
+- [ ] 确认内网搜索 API 地址和认证方式
+- [ ] 在 `config.yaml` 的 `intranet_field_map` 中配置字段映射
+- [ ] 取消 `intranet_stub.py` 中的注释代码，调整字段映射
+- [ ] 将 `config.yaml` 中 `search_provider` 改为 `intranet`
+- [ ] 调用 `GET /api/ai-writing/health` 验证连通性
+- [ ] 验证内网素材卡片在前端正常展示（包括 `department`、`classification` 字段）
+
+---
+
+## 10. LangGraph 状态机流转图
+
+```
+START
+  │
+  ▼
+intent_parser ──── 意图解析（结构化写作配置）
+  │
+  ▼
+researcher ──────── Agent A：关键词拆解 → 并发搜索 → 去重排序
+  │
+  ▼
+pause_material ──── ⏸ PAUSE-1：推送 await_user 事件，等待用户确认素材
+  │ (interrupt)
+  ├── action=confirm    ──────────────────────────▶ writer_outline
+  └── action=re_search  ──────────────────────────▶ researcher（重搜）
+
+writer_outline ─── Agent B Phase1：写大纲（JSON）
+  │
+  ▼
+pause_outline ───── ⏸ PAUSE-2：推送 await_user 事件，等待用户确认大纲
+  │ (interrupt)
+  ├── action=confirm（含用户可能的编辑）─────────▶ writer_draft
+  └── action=re_outline ─────────────────────────▶ writer_outline（重规划）
+
+writer_draft ────── Agent B Phase2：按大纲逐段写正文
+  │
+  ▼
+pause_draft ─────── ⏸ PAUSE-3：推送 await_user 事件，等待用户确认草稿
+  │ (interrupt)
+  ├── action=finalize ────────────────────────────▶ END（用户直接定稿）
+  ├── action=user_revise ─────────────────────────▶ writer_draft（按用户意见重写）
+  └── action=to_editor ────────────────────────────▶ editor
+
+editor ─────────── Agent C：三项独立审查，综合评分
+  │
+  ├── verdict=pass ────────────────────────────────▶ pause_draft（草稿确认）
+  ├── verdict=reject & count < max ───────────────▶ pause_review（PAUSE-4）
+  └── verdict=reject & count >= max ──────────────▶ pause_draft（强制到草稿确认）
+
+pause_review ────── ⏸ PAUSE-4：推送编辑意见，等待用户决策
+  │ (interrupt)
+  ├── override_verdict=true ──────────────────────▶ END（强制定稿）
+  └── override_verdict=false ─────────────────────▶ writer_draft（按编辑意见重写）
+
+END
+```
+
+---
+
+## 11. 提示词模板（弱模型专用）
+
+以下是针对弱模型优化的三段式提示词框架（借鉴 CrewAI 的 role+goal+backstory 结构）：
+
+### 研究院 System Prompt
+
+```
+你是一名专业情报研究员（研究院）。
+你的目标：为写作任务搜集高质量素材。
+你的工作背景：你在一家权威媒体机构任职，熟悉各类信息源的可信度评估。
+
+你只能做以下事情：
+1. 从写作意图中提取搜索关键词
+2. 对搜索结果按相关度排序
+你不能写文章，不能评价内容好坏，只做信息收集。
+
+所有输出必须是合法的 JSON 格式，参考示例：
+{"keywords": ["关键词1", "关键词2", "关键词3"]}
+```
+
+### 作家 System Prompt（大纲阶段）
+
+```
+你是一名专业内容创作者（作家）。
+你的目标：根据素材和意图，规划清晰的文章大纲。
+你的工作背景：你有十年内容创作经验，擅长将零散素材组织成有逻辑的文章结构。
+
+你只能做以下事情：
+1. 分析素材，提取核心观点
+2. 规划文章章节结构和每节要点
+你不能写正文，只写大纲。
+
+所有输出必须是合法的 JSON，严格参考以下示例格式：
+{
+  "title": "文章标题",
+  "sections": [
+    {
+      "section_title": "第一章标题",
+      "key_points": ["要点一", "要点二"],
+      "material_ids": ["m001"]
+    }
+  ]
+}
+```
+
+### 作家 System Prompt（写作阶段）
+
+```
+你是一名专业内容创作者（作家）。
+你的目标：根据大纲和素材，写出一段高质量的文章内容。
+你的工作背景：你有十年内容创作经验，文字流畅，善于用事实说话。
+
+你只能做以下事情：
+1. 根据给定的章节要点和素材写这一段内容
+2. 观点必须来自素材，不编造数据
+你不能修改大纲，不能写其他章节，只写当前这一段。
+
+直接返回段落文字，不要 JSON，不要标题，不要解释。
+```
+
+### 编辑 System Prompt
+
+```
+你是一名资深主编（编辑），标准极高，要求严格。
+你的目标：审查文章质量，给出客观评分和具体修改意见。
+你的工作背景：你在一家权威媒体担任主编十五年，见过各种质量的文章。
+
+你只能做以下事情：
+1. 从 [fact/logic/language] 某一个维度审查文章
+2. 给出该维度的评分（0-100）和具体问题列表
+你不能改写文章，不能评价其他维度，只做当前指定维度的审查。
+
+所有输出必须是合法的 JSON，严格参考以下示例：
+{
+  "score": 82,
+  "issues": [
+    {
+      "location": "第二段",
+      "issue": "数据来源不明确",
+      "suggestion": "引用素材 m001 中的具体数据，并注明来源"
+    }
+  ]
+}
+```
+
+---
+
+## 12. SSE 协议 & 干预协议设计
+
+### SSE 事件类型
+
+| event | 触发时机 | data 关键字段 |
+|-------|----------|---------------|
+| `connected` | 连接建立 | `session_id` |
+| `step_start` | Agent 开始某步骤 | `agent_name`, `message` |
+| `step_done` | Agent 完成某步骤 | `agent_name`, `message` |
+| `materials_ready` | 研究院搜索完成 | `keywords`, `materials[]`, `summary` |
+| `outline_ready` | 大纲生成完成 | `outline{title, sections[]}` |
+| `draft_ready` | 草稿完成 | `title`, `markdown`, `revision_count` |
+| `review_ready` | 编辑审核完成 | `review_result{verdict, scores, notes[]}` |
+| `await_user` | 流程暂停，等待干预 | `pause_point`, 干预所需上下文数据 |
+| `resumed` | 用户干预已提交，流程恢复 | `message` |
+| `done` | 全部完成 | `message` |
+| `error` | 出错 | `message` |
+
+### 干预 API
+
+```
+POST /api/ai-writing/{session_id}/resume
+Content-Type: application/json
+
+{
+  "action": "confirm",               // 操作类型（见各干预点定义）
+  "approved_material_ids": [...],    // PAUSE-1
+  "extra_keywords": [...],           // PAUSE-1
+  "edited_outline": {...},           // PAUSE-2（null=不修改）
+  "outline_feedback": "",            // PAUSE-2（重规划时的意见）
+  "user_revision_notes": "",         // PAUSE-3 或 PAUSE-4
+  "override_verdict": false          // PAUSE-4
+}
+```
+
+**各干预点的 action 值**：
+
+| 干预点 | action 值 | 说明 |
+|--------|-----------|------|
+| PAUSE-1 | `confirm` | 确认当前素材继续 |
+| PAUSE-1 | `re_search` | 重新搜索（可附 extra_keywords） |
+| PAUSE-2 | `confirm` | 确认大纲（可附 edited_outline） |
+| PAUSE-2 | `re_outline` | 重新规划（可附 outline_feedback） |
+| PAUSE-3 | `finalize` | 直接定稿 |
+| PAUSE-3 | `user_revise` | 按用户意见重写（附 user_revision_notes） |
+| PAUSE-3 | `to_editor` | 提交编辑审核 |
+| PAUSE-4 | `accept_review` | 采纳编辑意见重写 |
+| PAUSE-4 | `force_finalize` | 强制定稿（override_verdict=true） |
+| PAUSE-4 | `custom_revise` | 附加用户意见重写（user_revision_notes） |
+
+---
+
+## 13. 前端 UI 组件详细设计
+
+### 13.1 组件树
+
+```
+AIWritingPanel.tsx                    （左侧面板根组件）
+├── AIWritingForm.tsx                  （写作意图输入表单）
+├── AIWritingTimeline.tsx             （进度时间线，纵向排列）
+│   ├── TimelineStep.tsx              （单个步骤卡片）
+│   │   ├── StepHeader.tsx            （Agent名 + 状态图标 + 时间）
+│   │   └── StepContent.tsx          （步骤详情，可收起展开）
+│   │
+│   ├── MaterialsCard.tsx             （素材卡片区，PAUSE-1 触发展示）
+│   │   ├── MaterialItem.tsx          （单条素材卡片，默认收起）
+│   │   │   ├── 标题 + 来源 + 时间
+│   │   │   ├── 相关度色条
+│   │   │   └── 正文摘要（可展开）
+│   │   └── MaterialsToolbar.tsx      （全选/全取消/补充搜索输入）
+│   │
+│   ├── OutlineCard.tsx               （大纲展示卡，PAUSE-2 触发展示）
+│   │   ├── OutlineSection.tsx        （可编辑的章节行）
+│   │   └── OutlineToolbar.tsx        （确认/重规划按钮）
+│   │
+│   ├── ReviewCard.tsx                （编辑审核结果，PAUSE-4 触发展示）
+│   │   ├── ScoreBar.tsx              （三项评分进度条）
+│   │   └── IssueList.tsx             （问题清单，按严重程度分组）
+│   │
+│   └── InterventionCard.tsx          （用户干预操作区，每个 PAUSE 点渲染）
+│       ├── 操作按钮组
+│       └── 补充意见输入框
+│
+└── AIWritingStatus.tsx               （底部状态栏：当前 Agent + 进度）
+```
+
+### 13.2 MaterialItem 组件规格
+
+```
+┌─────────────────────────────────────────────────────────┐
+│ ☑  [标题（最多两行截断）]                              ▶ │  ← 点击展开
+│    来源网站  ·  2024-01-15  ·  ████████░░ 82%           │
+└─────────────────────────────────────────────────────────┘
+
+展开后：
+┌─────────────────────────────────────────────────────────┐
+│ ☑  [标题]                                              ▼ │
+│    来源网站  ·  2024-01-15  ·  ████████░░ 82%           │
+│    ─────────────────────────────────────────────────    │
+│    [正文摘要，最多 200 字，超出显示"...展开"]             │
+│               │
+│    [查看原文 →]（若有 url）                              │
+└─────────────────────────────────────────────────────────┘
+```
+
+**相关度色条颜色规则**：
+- `>= 0.8`：绿色（高相关）
+- `0.5 ~ 0.8`：橙色（中相关）
+- `< 0.5`：红色（低相关，建议取消勾选）
+
+### 13.3 OutlineCard 组件规格
+
+```
+┌──────────────────────────────────────────────────────────┐
+│ 大纲（可编辑）                              [全部展开▼]   │
+├──────────────────────────────────────────────────────────┤
+│ 文章标题：[可内联编辑]                                    │
+│                                                          │
+│ ▶ 第一部分：引言与背景（点击展开要点）                    │
+│ ▶ 第二部分：核心分析                                      │
+│ ▶ 第三部分：结论与建议                                    │
+│                                                          │
+│ （展开后）                                               │
+│ ▼ 第二部分：核心分析                                      │
+│   • 要点一（可编辑）                                      │
+│   • 要点二（可编辑）                                      │
+│   + 添加要点                                             │
+│   引用素材：m001 m002（Tag 样式）                        │
+├──────────────────────────────────────────────────────────┤
+│ [确认大纲，开始写作]    [重新规划大纲...]                 │
+└──────────────────────────────────────────────────────────┘
+```
+
+### 13.4 InterventionCard 组件规格
+
+```
+┌──────────────────────────────────────────────────────────┐
+│ ⏸  需要您的确认才能继续                                   │
+│ ─────────────────────────────────────────────────────── │
+│ [PAUSE-1 素材确认时]                                     │
+│   已搜集到 8 条素材（已为您默认全选）                     │
+│   您可以取消勾选不相关的素材，或补充关键词                │
+│                                                          │
+│   补充关键词：[___________________] [+追加搜索]          │
+│                                                          │
+│   [✓ 确认素材，开始规划大纲]   [↺ 重新搜索]              │
+└──────────────────────────────────────────────────────────┘
+
+┌──────────────────────────────────────────────────────────┐
+│ ⏸  需要您的确认才能继续                                   │
+│ ─────────────────────────────────────────────────────── │
+│ [PAUSE-3 草稿确认时]                                     │
+│   初稿已完成（共 856 字）                                 │
+│   编辑评分：81分（通过线 80 分）                          │
+│                                                          │
+│   您的修改意见（可选）：                                   │
+│   [___________________________________]                  │
+│                                                          │
+│   [✓ 确认定稿]  [✎ 按我的意见修改]  [→ 让编辑审核]       │
+└──────────────────────────────────────────────────────────┘
+```
+
+### 13.5 ReviewCard 组件规格
+
+```
+┌──────────────────────────────────────────────────────────┐
+│ 编辑审核结果（第 1 次修改）             综合评分：78 / 100 │
+│                                                          │
+│ 事实准确性  ████████░░  82  （通过）                     │
+│ 逻辑结构    ██████░░░░  72  （需改进）                   │
+│ 语言文字    █████████░  88  （优秀）                     │
+│                                                          │
+│ ── 修改意见 ────────────────────────────────────────── │
+│                                                          │
+│ [major] 逻辑 · 第三段：论点跳跃，缺少过渡               │
+│   → 建议：在第三段开头增加连接上下文的过渡句              │
+│                                                          │
+│ [minor] 事实 · 第二段：引用数据未标注来源               │
+│   → 建议：补充"据素材 m002 显示"                         │
+│                                                          │
+│ 您的补充意见（可选）：                                    │
+│ [___________________________________]                   │
+│                                                          │
+│ [↺ 采纳编辑意见，让作家重写]   [✓ 忽略编辑，强制定稿]   │
+└──────────────────────────────────────────────────────────┘
+```
+
+### 13.6 进度时间线整体效果
+
+```
+左侧面板时间线（纵向）
+
+○ ── 研究院                          ← 完成（绿色圆点）
+│    搜集到 8 条素材
+│    ┌───────────────────────────┐
+│    │ 素材列表（默认收起）    ▶ │   ← 点击展开素材卡片
+│    └───────────────────────────┘
+│    ┌──────────────────────────────────────────────┐
+│    │ ⏸ 需要您确认素材，才能继续                    │
+│    │ [✓ 确认] [↺ 重新搜索]                        │
+│    └──────────────────────────────────────────────┘
+
+○ ── 作家（大纲）                     ← 完成（绿色圆点）
+│    已规划 3 个章节
+│    ┌───────────────────────────┐
+│    │ 大纲预览（默认收起）    ▶ │
+│    └───────────────────────────┘
+│    ┌──────────────────────────────────────────────┐
+│    │ ⏸ 请确认大纲后继续写作                       │
+│    │ [✓ 确认] [✎ 编辑大纲] [↺ 重规划]            │
+│    └──────────────────────────────────────────────┘
+
+◌ ── 作家（写作）                     ← 进行中（动画圆点）
+│    正在写作第二章...
+
+◌ ── 编辑                             ← 等待中（灰色圆点）
+
+◌ ── 定稿                             ← 等待中
+```
+
+---
+
+## 14. 文件目录结构
+
+```
+# 后端新增（不修改任何已有文件）
+offline-backend-20260512/backend/
+├── app/gateway/routers/
+│   └── ai_writing.py                       ← 新建
+└── packages/harness/deerflow/agents/
+    └── ai_writing/                          ← 新建目录
+        ├── __init__.py
+        ├── state.py
+        ├── graph.py
+        ├── nodes/
+        │   ├── __init__.py
+        │   ├── intent_parser.py
+        │   ├── researcher.py
+        │   ├── writer_outline.py
+        │   ├── writer_draft.py
+        │   └── editor.py
+        ├── search/
+        │   ├── __init__.py
+        │   ├── base.py                      ← 抽象接口（内网预留）
+        │   ├── internet_search.py
+        │   └── intranet_stub.py             ← 内网桩
+        └── prompts/
+            ├── researcher_prompts.py
+            ├── writer_prompts.py
+            └── editor_prompts.py
+
+# 前端新增（不修改已有组件）
+frontend-web/src/open-canvas/
+├── api/
+│   └── ai-writing.ts                        ← 新建
+├── types/
+│   └── ai-writing.ts                        ← 新建
+├── hooks/
+│   └── useAIWriting.ts                      ← 新建
+└── components/
+    └── ai-writing/                           ← 新建目录
+        ├── AIWritingPanel.tsx               ← 左侧面板根组件
+        ├── AIWritingForm.tsx                ← 写作意图输入表单
+        ├── AIWritingTimeline.tsx            ← 进度时间线
+        ├── TimelineStep.tsx                 ← 单步骤卡片
+        ├── MaterialsCard.tsx                ← 素材卡片区
+        ├── MaterialItem.tsx                 ← 单条素材
+        ├── MaterialsToolbar.tsx             ← 素材操作工具栏
+        ├── OutlineCard.tsx                  ← 大纲展示与编辑
+        ├── OutlineSection.tsx               ← 单章节行
+        ├── ReviewCard.tsx                   ← 编辑审核结果
+        ├── ScoreBar.tsx                     ← 评分进度条
+        ├── IssueList.tsx                    ← 问题清单
+        └── InterventionCard.tsx             ← 用户干预操作区
+```
+
+---
+
+## 15. 分步开发检查清单
+
+### 阶段一：后端骨架（2 天）
+
+- [ ] 创建 `ai_writing/` 目录结构（所有 `__init__.py`）
+- [ ] 实现 `state.py`（完整 AIWritingState 定义）
+- [ ] 实现 `search/base.py`（抽象接口）
+- [ ] 实现 `search/internet_search.py`（接入项目已有搜索工具）
+- [ ] 实现 `search/intranet_stub.py`（桩，返回空列表）
+- [ ] 实现 `nodes/intent_parser.py`（意图解析 → 结构化配置）
+- [ ] 实现 `nodes/researcher.py`（Agent A，两步：关键词+搜索）
+- [ ] 实现 `nodes/writer_outline.py`（Agent B Phase1，只写大纲）
+- [ ] 实现 `nodes/writer_draft.py`（Agent B Phase2，逐段写正文）
+- [ ] 实现 `nodes/editor.py`（Agent C，三次独立调用）
+- [ ] 实现 `graph.py`（含 4 个 interrupt 干预节点）
+- [ ] 实现 `app/gateway/routers/ai_writing.py`（start + stream + resume + state）
+- [ ] 在 `app.py` 注册路由（追加一行）
+- [ ] `curl` 测试 `/api/ai-writing/start` 和 `/api/ai-writing/{id}/stream`
+
+### 阶段二：后端干预验证（1 天）
+
+- [ ] 测试 PAUSE-1（素材确认）：验证 `interrupt()` 暂停 + `resume` 恢复
+- [ ] 测试 PAUSE-2（大纲确认）：验证编辑大纲后继续写作
+- [ ] 测试 PAUSE-3（草稿确认）：验证三种 action（定稿/重写/编辑）
+- [ ] 测试 PAUSE-4（审核确认）：验证打回循环和强制定稿
+- [ ] 测试最大循环上限（revision_count >= max_revisions）
+
+### 阶段三：前端进度展示（2 天）
+
+- [ ] 创建 `types/ai-writing.ts`（完整类型定义）
+- [ ] 创建 `api/ai-writing.ts`（start + SSE subscribe + resume）
+- [ ] 创建 `hooks/useAIWriting.ts`（状态管理 + 事件处理）
+- [ ] 创建 `AIWritingTimeline.tsx` + `TimelineStep.tsx`（时间线骨架）
+- [ ] 创建 `ScoreBar.tsx`（评分进度条）
+- [ ] 在 `CanvasResizableLayout.tsx` 引入 `AIWritingPanel`（新增 import，不修改现有逻辑）
+
+### 阶段四：素材卡片（1 天）
+
+- [ ] 创建 `MaterialItem.tsx`（收起/展开，相关度色条，勾选框）
+- [ ] 创建 `MaterialsCard.tsx`（素材列表，默认收起，显示素材数量）
+- [ ] 创建 `MaterialsToolbar.tsx`（全选/取消，补充关键词输入）
+- [ ] 创建 `InterventionCard.tsx` for PAUSE-1（确认/重搜按钮）
+- [ ] 联调测试：素材 SSE 事件 → 素材列表渲染 → 用户确认 → resume 请求
+
+### 阶段五：大纲交互（1 天）
+
+- [ ] 创建 `OutlineSection.tsx`（可内联编辑章节标题和要点）
+- [ ] 创建 `OutlineCard.tsx`（大纲树形展示，默认收起）
+- [ ] 创建 `InterventionCard.tsx` for PAUSE-2（确认/重规划按钮 + 反馈输入）
+- [ ] 测试：编辑大纲后提交 → 后端收到 `edited_outline` → 按修改后大纲写作
+
+### 阶段六：草稿确认与编辑审核（1 天）
+
+- [ ] 创建 `IssueList.tsx`（问题清单，按 major/minor 分组）
+- [ ] 创建 `ReviewCard.tsx`（评分 + 问题清单）
+- [ ] 创建 `InterventionCard.tsx` for PAUSE-3 和 PAUSE-4
+- [ ] 测试完整流程（搜索 → 大纲确认 → 写作 → 编辑 → 打回 → 重写 → 定稿）
+
+### 阶段七：弱模型调优（2 天）
+
+- [ ] 为每个 Agent 添加 Few-Shot JSON 示例
+- [ ] 添加完善的 JSON 解析容错（try/except + fallback 策略）
+- [ ] 调整各 Agent 的 prompt，确保弱模型返回合法 JSON
+- [ ] 调整 `pass_threshold`（从 80 开始，根据实际测试调整）
+- [ ] 测试素材截断逻辑（确保不超过 token 限制）
+
+### 阶段八：内网对接（未来）
+
+- [ ] 确认内网搜索 API 文档和认证方式
+- [ ] 在 `config.yaml` 配置 `intranet_field_map` 字段映射
+- [ ] 取消 `intranet_stub.py` 中的注释代码并调整
+- [ ] 切换 `search_provider: intranet` 测试连通性
+- [ ] 验证内网素材卡片（包含 `department`、`classification` 字段）正常展示
+
+---
+
+> **架构原则**：后端新路由用 `/api/ai-writing/` 前缀完全隔离；前端新建独立组件目录，
+> 通过在 `CanvasResizableLayout.tsx` 中新增导入接入，不修改任何已有组件。
+> 参考：Stanford STORM 多 Agent 写作流程、LangGraph HITL interrupt 机制、
+> CrewAI 角色锁定 Prompt 设计、GPT-Researcher 搜索接口抽象。
diff --git a/frontend-web/docs/openCanvas-progress.md b/frontend-web/docs/openCanvas-progress.md
index 012bb8ea..5e74c279 100644
--- a/frontend-web/docs/openCanvas-progress.md
+++ b/frontend-web/docs/openCanvas-progress.md
@@ -1,260 +1,312 @@
 # Open Canvas 集成进度文档
 
-> 更新时间：2026-05-16
+> 最后更新：2026-05-16
 > 当前分支：dhk-1
 
 ---
 
 ## 一、整体进度概览
 
+### Canvas 系统（双栏写作/编码工作区）
+
 | 阶段 | 名称 | 状态 |
 |------|------|------|
-| 前端阶段一 | 路由与目录骨架 | ✅ 已完成 |
-| 前端阶段二 | Canvas 双栏布局 | ✅ 已完成 |
-| 前端阶段三 | 类型与状态协议 | ✅ 已完成（随阶段一一并完成） |
-| 后端阶段一 | ThreadState 扩展 | ✅ 已完成 |
-| 后端阶段二 | canvas_agent 注册 + 最小节点闭环 | ✅ 已完成 |
-| 前端阶段四 | API 适配层 | ✅ 已完成 |
-| 前端阶段五 | 线程与流式状态接入 | ✅ 已完成 |
-| 前端阶段六 | Artifact 渲染器增强（CodeMirror / Markdown） | ✅ 已完成 |
-| 前后端阶段七 | 局部选区改写 | ✅ 已完成 |
-| 前后端阶段八 | 快捷动作系统 | ✅ 已完成 |
-| 前后端阶段九 | 本地模型支持完善 | ✅ 已完成 |
+| 阶段一 | 前端路由与目录骨架 | ✅ 已完成 |
+| 阶段二 | Canvas 双栏布局 | ✅ 已完成 |
+| 阶段三 | 前端 artifact 类型定义 | ✅ 已完成 |
+| 阶段四 | 后端 ThreadState 扩展 | ✅ 已完成 |
+| 阶段五 | canvas_agent 注册 + 最小节点闭环 | ✅ 已完成 |
+| 阶段六 | 前后端流式同步 | ✅ 已完成 |
+| 阶段七 | 版本历史导航 | ✅ 已完成 |
+| 阶段八 | 局部选区改写（Writing Editor 级） | ✅ 已完成 |
+| 阶段九 | 快捷动作系统 | ✅ 已完成 |
+| 阶段十 | 本地模型选择支持 | ✅ 已完成 |
 
-**当前状态**：全部 9 个阶段已完成 🎉
+### AI Writing Editor（文本 artifact 编辑器内置 AI 改写）
+
+| 步骤 | 名称 | 状态 |
+|------|------|------|
+| Step 1 | Tiptap 编辑器核心 | ✅ 已完成 |
+| Step 2 | 写作工具栏 + 模型选择器 | ✅ 已完成 |
+| Step 3a | 气泡菜单（选区 AI 改写入口） | ✅ 已完成 |
+| Step 3b | 段落悬停按钮（整段 AI 改写入口） | ✅ 已完成 |
+| Step 4 | AI 改写菜单 + SSE 流式接口 | ✅ 已完成 |
+| Step 5 | 候选结果预览 + 替换/插入 | ✅ 已完成 |
+| Step 6 | 后端 `POST /api/writing/rewrite`（SSE，思考分离） | ✅ 已完成 |
+| Step 7 | 视觉精修（字体、间距、排版） | ✅ 已完成 |
+
+**当前状态：全部功能已完成 🎉**
 
 ---
 
 ## 二、已完成工作详情
 
-### 2.1 前端路由接入
-
-修改了 `frontend-web/src/pages/PageRoutes.tsx`：
-
-```tsx
-import OpenCanvasRoutes from "@/open-canvas/routes/OpenCanvasRoutes";
-// 在 PageLayout 内部添加：
-<Route path="canvas/*" element={<OpenCanvasRoutes />} />
-```
-
-子路由：
-- `/page/canvas` → `CanvasHomePage`（欢迎页 + 快速开始）
-- `/page/canvas/:thread_id` → `CanvasThreadPage`（主工作区）
-
-### 2.2 前端目录结构（已建立，26 个文件）
+### 2.1 前端核心文件结构
 
 ```
 frontend-web/src/open-canvas/
-  api/
-    client.ts          # stub，Phase 5 实现
-    models.ts          # stub，Phase 5 实现
-    threads.ts         # stub，Phase 5 实现
-    runs.ts            # stub，Phase 5 实现
-  components/
-    layout/
-      CanvasShell.tsx              # 顶层布局壳，flex-col
-      CanvasHeader.tsx             # 顶部栏：返回键、折叠按钮、标题、流式指示
-      CanvasResizableLayout.tsx    # 左右可拖拽双栏（react-resizable-panels）
-    chat/
-      CanvasChatPanel.tsx          # 左栏：欢迎状态 + 消息列表 + 禁用输入框
-    artifact/
-      CanvasArtifactPanel.tsx      # 右栏：空状态或渲染器
-      CanvasArtifactHeader.tsx     # 右栏顶部：图标、标题、语言 Badge、版本导航
-      CanvasArtifactVersionNav.tsx # 版本 prev/next 导航
-      CanvasEmptyState.tsx         # 空状态：5 种快速开始模板
-      TextArtifactRenderer.tsx     # 文本渲染（Phase 6 增强为 Markdown）
-      CodeArtifactRenderer.tsx     # 代码渲染（Phase 6 增强为 CodeMirror）
-  contexts/
-    CanvasThreadContext.tsx        # threadId、modelName
-    CanvasGraphContext.tsx         # messages、artifact、isStreaming
-    CanvasUIContext.tsx            # isChatCollapsed、isEditing、selection 等 UI 状态
-  hooks/
-    useCanvasStream.ts             # stub，Phase 5 实现
-    useCanvasArtifact.ts           # stub，Phase 6 实现
-    useCanvasSelection.ts          # stub，Phase 7 实现
-    useCanvasQuickActions.ts       # stub，Phase 8 实现
-  pages/
-    CanvasHomePage.tsx             # 欢迎页 + 快速开始入口
-    CanvasThreadPage.tsx           # 三层 Provider 装配 + CanvasShell
-  routes/
-    OpenCanvasRoutes.tsx           # React Router 子路由
-  types/
-    artifact.ts                    # CanvasArtifact、CanvasArtifactText、CanvasArtifactCode
-    thread.ts                      # CanvasMessage、CanvasThreadValues、CanvasThreadMetadata
-    model.ts                       # CanvasModel（含 supports_canvas_* 能力字段）
-    selection.ts                   # CanvasTextSelection、CanvasCodeSelection
-    quick-action.ts                # QuickAction、QuickActionId
-  utils/
-    artifact.ts                    # getCurrentArtifactContent、appendArtifactVersion 等工具
-    selection.ts                   # stub
-    thread.ts                      # stub
-    stream.ts                      # stub
-    quick-actions.ts               # stub
-  constants/
-    index.ts                       # CANVAS_AGENT_ID、PROGRAMMING_LANGUAGES、QUICK_ACTIONS_*
+├── api/
+│   ├── client.ts          # LangGraph SDK 客户端实例
+│   ├── models.ts          # 模型列表 API
+│   ├── rewrite.ts         # AI 改写 SSE 流（streamRewrite，parseSse）
+│   ├── runs.ts            # streamCanvasRun（老的直接 API，已停用）
+│   └── threads.ts         # createCanvasThread、getCanvasThread
+├── components/
+│   ├── artifact/
+│   │   ├── CanvasArtifactHeader.tsx      # 右栏顶部：标题、语言、版本导航
+│   │   ├── CanvasArtifactPanel.tsx       # 右栏：流式预览 / 编辑器 / 空状态
+│   │   ├── CanvasArtifactVersionNav.tsx  # prev/next 版本切换
+│   │   ├── CanvasEmptyState.tsx          # 5 种快速开始模板
+│   │   ├── CanvasQuickActionBar.tsx      # 快捷动作按钮栏
+│   │   ├── CodeArtifactRenderer.tsx      # CodeMirror 代码编辑器
+│   │   ├── TextArtifactRenderer.tsx      # Tiptap 文本编辑器 + AI 改写流程
+│   │   ├── WritingAiMenu.tsx             # AI 改写动作菜单（polish/expand/shorten/tone）
+│   │   ├── WritingBubbleMenu.tsx         # 选区气泡菜单（portal 实现）
+│   │   ├── WritingParagraphMenu.tsx      # 段落悬停 AI 改写按钮
+│   │   ├── WritingRewritePreview.tsx     # 改写结果预览面板（含思考过程展开）
+│   │   └── WritingToolbar.tsx            # 格式工具栏（含模型选择器）
+│   ├── chat/
+│   │   └── CanvasChatPanel.tsx           # 左栏：消息列表 + 输入框
+│   ├── layout/
+│   │   ├── CanvasHeader.tsx              # 顶部栏：返回、折叠、流式指示
+│   │   ├── CanvasResizableLayout.tsx     # 左右可拖拽双栏（含 CanvasStreamProvider）
+│   │   └── CanvasShell.tsx               # 顶层壳：加载已有线程状态
+│   └── selectors/
+│       └── CanvasModelSelector.tsx       # 模型下拉选择器
+├── contexts/
+│   ├── CanvasGraphContext.tsx   # artifact、streamingArtifact、isStreaming
+│   ├── CanvasStreamContext.tsx  # 共享 useCanvasThreadStream 实例（sendMessage）
+│   ├── CanvasThreadContext.tsx  # threadId、modelName
+│   └── CanvasUIContext.tsx      # isChatCollapsed、writingSelection
+├── editor/
+│   ├── TiptapEditor.tsx         # EditorContent 包装器
+│   └── TiptapExtensions.ts      # StarterKit + Underline + Placeholder + Markdown
+├── hooks/
+│   ├── useCanvasArtifact.ts     # artifact 初始化工具
+│   ├── useCanvasQuickActions.ts # 快捷动作触发（走 CanvasStreamContext）
+│   ├── useCanvasSelection.ts    # 文字/代码选区状态
+│   ├── useCanvasStream.ts       # 旧直接 API 流（已停用，保留备用）
+│   ├── useCanvasThread.ts       # 线程加载工具
+│   ├── useCanvasThreadStream.ts # LangGraph SDK useStream hook（主流）
+│   ├── useWritingEditor.ts      # Tiptap editor 实例管理
+│   └── useWritingRewrite.ts     # AI 改写状态机（ThinkTagParser、AbortController）
+├── pages/
+│   ├── CanvasHomePage.tsx       # 欢迎页 + 快速开始
+│   └── CanvasThreadPage.tsx     # Provider 装配层
+├── routes/
+│   └── OpenCanvasRoutes.tsx     # /page/canvas/* 子路由
+├── types/
+│   ├── artifact.ts              # CanvasArtifact、CanvasArtifactText、CanvasArtifactCode
+│   ├── model.ts                 # CanvasModel
+│   ├── quick-action.ts          # QuickAction、QuickActionId
+│   ├── selection.ts             # CanvasTextSelection、CanvasCodeSelection
+│   └── thread.ts                # CanvasMessage、CanvasThreadValues
+└── utils/
+    ├── apply-rewrite.ts         # applyReplace、applyInsert（Tiptap 事务）
+    ├── artifact.ts              # getCurrentArtifactContent、setCurrentArtifactIndex 等
+    ├── quick-actions.ts         # buildQuickActionMessage（含 artifact 内容注入）
+    ├── selection.ts             # buildMessageWithSelection
+    ├── stream.ts                # 流式工具
+    └── thread.ts                # 线程工具
 ```
 
-### 2.3 核心类型定义
+### 2.2 后端核心文件结构
 
-```ts
-// types/artifact.ts
-export type CanvasArtifact = {
-  currentIndex: number;                          // 从 1 开始
-  contents: CanvasArtifactContent[];
-};
-
-export type CanvasArtifactText = {
-  index: number; type: "text"; title: string; fullMarkdown: string;
-};
-
-export type CanvasArtifactCode = {
-  index: number; type: "code"; title: string;
-  language: ProgrammingLanguageOptions; code: string;
-};
+```
+offline-backend-20260512/backend/
+├── packages/harness/deerflow/agents/
+│   ├── canvas_agent/
+│   │   ├── __init__.py
+│   │   ├── agent.py      # make_canvas_agent()：LangGraph graph 工厂
+│   │   ├── prompt.py     # build_canvas_system_prompt()：含 selection_rewrite + quick_actions
+│   │   └── tools.py      # update_artifact_tool：创建/追加 artifact 版本
+│   └── thread_state.py   # ThreadState（含 artifact 字段、CanvasArtifact TypedDict）
+└── app/gateway/
+    ├── app.py            # 注册 writing router
+    └── routers/
+        └── writing.py    # POST /api/writing/rewrite（SSE 流式）
 ```
 
-### 2.4 Context 结构
+**langgraph.json** 注册了两个 graph：
+- `lead_agent` → 主聊天 Agent
+- `canvas_agent` → Canvas 写作 Agent
 
-```tsx
-// CanvasThreadPage.tsx 的装配顺序
-<CanvasThreadProvider initialThreadId={thread_id}>
-  <CanvasGraphProvider>
-    <CanvasUIProvider>
-      <CanvasShell />
-    </CanvasUIProvider>
-  </CanvasGraphProvider>
-</CanvasThreadProvider>
+### 2.3 关键 Context 层级
+
+```
+CanvasThreadPage
+  ├── CanvasThreadProvider      # threadId、modelName
+  │     ├── CanvasGraphProvider # artifact、streamingArtifact、isStreaming
+  │     │     └── CanvasUIProvider  # isChatCollapsed、writingSelection
+  │     │           └── CanvasShell
+  │     │                 └── CanvasResizableLayout
+  │     │                       └── CanvasStreamProvider  ← 持有 useCanvasThreadStream 单例
+  │     │                             ├── CanvasChatPanel      # 读 useCanvasStreamContext()
+  │     │                             └── CanvasArtifactPanel
+  │     │                                   └── CanvasQuickActionBar  # 读 useCanvasStreamContext()
 ```
 
 ---
 
-## 三、已解决的技术难题
+## 三、关键架构决策与注意事项
 
-### 3.1 react-resizable-panels v4.6.2 API 差异
+### 3.1 流式架构：单例流（重要）
 
-此版本与旧版 API 不同，必须使用：
+**问题**：原先 `CanvasChatPanel` 调 `useCanvasThreadStream()`，`CanvasQuickActionBar` 调 `useCanvasStream()`（旧的直接 API），两套流互不相通，快捷动作响应不出现在聊天面板。
 
-```tsx
-// ✅ 正确写法
-import type { GroupImperativeHandle } from "react-resizable-panels";
-const layoutRef = useRef<GroupImperativeHandle>(null);
-
-<ResizablePanelGroup
-  orientation="horizontal"      // ← 不是 direction
-  groupRef={layoutRef}          // ← 不是 ref
->
-  <ResizablePanel id="chat" ... />      // ← 必须有 id
-  <ResizablePanel id="artifact" ... />  // ← 必须有 id
-</ResizablePanelGroup>
-
-// 切换折叠
-layoutRef.current?.setLayout({ chat: 0, artifact: 100 });  // ← 对象形式，非数组
-```
-
-### 3.2 Flex 高度链（防止底部内容被裁剪）
+**解决方案**：新增 `CanvasStreamContext`，在 `CanvasResizableLayout` 中调用 `useCanvasThreadStream()` 一次，通过 Context 共享给所有子组件。`CanvasChatPanel` 和 `useCanvasQuickActions` 都从 `useCanvasStreamContext()` 取 `sendMessage`。
 
 ```
-PageLayout（h-screen）
-  └── main（flex-1）
-        └── CanvasShell div（h-full flex flex-col）
-              └── CanvasResizableLayout wrapper（flex-1 min-h-0 overflow-hidden）← 关键
-                    └── ResizablePanelGroup（h-full）
-                          └── 面板内容（h-full）
+useCanvasStream（旧，已停用） ← 不再被调用，保留备用
+useCanvasThreadStream（新，LangGraph SDK） ← 通过 CanvasStreamContext 统一共享
 ```
 
-**`min-h-0` 是必须的**，否则 flex 子项不会收缩，底部内容被推出屏幕外。
+### 3.2 artifact 内容注入机制（重要）
 
-### 3.3 折叠/展开按钮
+**问题**：LangGraph `create_agent` 只把 `state.messages` 传给 LLM，`state.artifact` 字段不会自动可见。Agent 做 expand/shorten 等操作时看不到要改写的内容。
 
-`CanvasHeader.tsx` 中通过 `useCanvasUIContext()` 控制 `isChatCollapsed`，
-`CanvasResizableLayout.tsx` 中用 `useEffect` 监听并调用 `setLayout`：
+**解决方案**：在每次 `sendMessage` 时，把当前 artifact 内容以 `<artifact>` 标签嵌入人类消息末尾。
 
-```tsx
-useEffect(() => {
-  layoutRef.current?.setLayout(
-    isChatCollapsed ? { chat: 0, artifact: 100 } : { chat: 35, artifact: 65 }
-  );
-}, [isChatCollapsed]);
+- 普通聊天：`sendMessage` 内部自动追加（仅当消息里还没有 `<artifact>` 时）
+- 快捷动作：`buildQuickActionMessage(id, content)` 在构建时就包含内容
+- 聊天面板显示时：`message-list-item.tsx` 调 `stripArtifactTag()` 剥掉标签，用户看不到
+
+```typescript
+// utils/quick-actions.ts
+export function buildQuickActionMessage(id, content) {
+  const body = isCodeArtifact(content) ? content.code : content.fullMarkdown;
+  return `${instruction}\n\n<artifact ${tag}>\n${body}\n</artifact>`;
+}
+
+// core/messages/utils.ts
+export function stripArtifactTag(content: string): string {
+  return content.replace(/<artifact[^>]*>[\s\S]*?<\/artifact>/g, "").trim();
+}
 ```
 
+### 3.3 ThinkTagParser（AI 改写思考过程解析）
+
+后端支持两种思考格式：
+- Anthropic：独立 thinking block，以 `event: thinking` SSE 事件传输
+- DeepSeek：把思考过程内联在文本里：`<think>...</think>content`
+
+前端 `useWritingRewrite.ts` 的 `ThinkTagParser` 是流式状态机，处理跨 chunk 边界的 `<think>` 标签。
+
+### 3.4 版本历史：本地切换
+
+`CanvasArtifactVersionNav` 的 prev/next 只修改本地 `CanvasGraphContext.artifact.currentIndex`，不写回后端。刷新后 currentIndex 重置为后端存储的最新值（这是有意的简化设计）。
+
+### 3.5 Writing Editor 流程（三阶段状态机）
+
+```
+idle → menu → preview → idle
+         ↑              ↓
+     openAiMenu      closeAll
+```
+
+- **idle**：正常编辑
+- **menu**：显示 `WritingAiMenu`（选择 polish/expand/shorten/tone）
+- **preview**：显示 `WritingRewritePreview`（SSE 流式结果 + 思考过程 + 替换/插入按钮）
+
 ---
 
-## 四、下一步：后端 ThreadState 扩展
+## 四、已解决的技术难题
 
-**目标文件**：`offline-backend-20260512/backend/packages/harness/deerflow/agents/thread_state.py`
-
-**任务**：在现有 `ThreadState` 中新增以下 Canvas 专用字段，不影响 `artifacts: list[str]`（文件产物）：
-
-```python
-# 新增 TypedDict（建议单独定义）
-class CanvasArtifactText(TypedDict):
-    index: int
-    type: Literal["text"]
-    title: str
-    fullMarkdown: str
-
-class CanvasArtifactCode(TypedDict):
-    index: int
-    type: Literal["code"]
-    title: str
-    language: str
-    code: str
-
-class CanvasArtifact(TypedDict):
-    currentIndex: int
-    contents: list[CanvasArtifactText | CanvasArtifactCode]
-
-# 在 ThreadState 中新增字段
-artifact: Optional[CanvasArtifact]          # Canvas 主文档（区别于 artifacts 文件列表）
-highlighted_text: Optional[str]             # 用户选中的文本片段
-highlighted_code: Optional[str]             # 用户选中的代码片段
-canvas_mode: Optional[Literal["text", "code"]]
-quick_action_id: Optional[str]             # 快捷动作 id
-web_search_enabled: bool                   # 默认 False
-web_search_results: Optional[list[dict]]
-```
-
-**验收标准**：
-- 旧线程无 `artifact` 字段时不报错
-- `pnpm typecheck` 无新增错误（前端字段已对齐）
-- `make test` 全量回归通过
-
-**之后紧接**：`canvas_agent` 注册 + `factory.py` 修改 + 最小节点闭环
-
----
-
-## 五、关键文件位置
-
-| 文件 | 用途 |
+| 问题 | 解法 |
 |------|------|
-| `frontend-web/docs/openCanvas.md` | 主需求文档 |
-| `frontend-web/docs/openCanvas-frontend-checklist.md` | 前端详细清单 |
-| `frontend-web/docs/openCanvas-backend-checklist.md` | 后端详细清单 |
-| `frontend-web/docs/openCanvas-progress.md` | 本进度文档 |
-| `F:\react01\openCanvas` | open-canvas 源码参考（本地克隆） |
-| `offline-backend-20260512/backend/packages/harness/deerflow/agents/thread_state.py` | 下一步主改文件 |
-| `offline-backend-20260512/backend/packages/harness/deerflow/agents/factory.py` | canvas_agent 注册位置 |
+| react-resizable-panels v4 API 变更（`orientation` 不是 `direction`，`groupRef` 不是 `ref`，`setLayout` 参数为 `{id: size}` 对象） | 参考 v4 文档，逐一修正 |
+| Flex 高度链底部裁剪 | 在 wrapper div 加 `min-h-0`，配合 `flex-1 overflow-hidden` |
+| Tiptap v3 BubbleMenu 已从 React 组件改为纯 Extension | 自定义 portal 实现：监听 `selectionUpdate`，手动计算位置 |
+| 段落悬停按钮鼠标桥接：鼠标经过 6px 间隙时按钮消失 | 文档级 `mousemove` 监听 + 380ms 延迟隐藏，判断鼠标是否在扩展热区内 |
+| 弹窗超出屏幕底部 | 检测 `spaceBelow` vs `spaceAbove`，空间不足时翻转到光标上方 |
+| DeepSeek 在文本流里混入 `<think>` 标签 | `ThinkTagParser` 状态机，保留最后 6/7 字节防止跨 chunk 分割 |
+| loading→success 状态转换检测（stale closure） | 用 `prevStatusRef` + `useEffect` 检测 status 变化，取代直接读 state |
+| 快捷动作响应不出现在聊天面板 | `CanvasStreamContext` 统一 `sendMessage` 入口 |
+| LLM 看不到 artifact 内容（只有 state.messages） | 消息里直接嵌入 `<artifact>` 标签，显示时剥离 |
+| `<artifact>` 标签在聊天面板里显示 | `message-list-item.tsx` 调 `stripArtifactTag()` |
 
 ---
 
-## 六、架构决策记录
+## 五、当前已知限制（非 bug，设计取舍）
 
-| 决策 | 内容 |
+1. **版本切换不持久化**：切换 artifact 版本后刷新页面会回到最新版本
+2. **useCanvasStream 孤立**：旧的直接 API 流 hook 保留但未被调用，可后续清理
+3. **CanvasShell 的 setMessages 冗余**：加载旧线程时 `setMessages` 写入 CanvasGraphContext，但 `CanvasChatPanel` 读的是 `thread.messages`（来自 useStream + fetchStateHistory）。setArtifact 仍有效
+4. **artifact 内容随消息发送**：大文档每条消息都附带全文，token 消耗较大。当前规模可接受
+
+---
+
+## 六、快速开始下一次工作
+
+### 启动服务
+
+```bash
+# 后端（从 offline-backend-20260512/backend/）
+make dev       # 启动 Gateway API on port 8001
+
+# 前端（从 frontend-web/）
+pnpm dev       # 启动 Vite on port 5174
+```
+
+### 访问路径
+
+- 主页：`http://localhost:5174`
+- Canvas 入口：点击左侧导航 → Canvas，或直接访问 `http://localhost:5174/page/canvas`
+
+### 类型检查
+
+```bash
+cd frontend-web && pnpm typecheck
+# 预期：只有 CodeArtifactRenderer.tsx 的 CodeMirror 版本冲突错误（预存 bug，不影响运行）
+```
+
+---
+
+## 七、如需继续开发的潜在方向
+
+| 方向 | 描述 | 优先级 |
+|------|------|------|
+| 版本切换持久化 | 将 currentIndex 变更写回后端 ThreadState | 低 |
+| artifact 内容 token 优化 | 仅发送 diff 或用 summary 代替全文 | 低 |
+| 清理 useCanvasStream | 删除未被调用的旧 hook | 低 |
+| 代码 artifact 的 AI 改写 | CodeArtifactRenderer 也接入 WritingAiMenu 流程 | 中 |
+| Canvas 选区→聊天（高级） | 用户在右栏选中文字后在左栏输入指令，自动带选区上下文 | 中 |
+| Tiptap 扩展（表格、任务列表） | 增加 Table、TaskList extension | 低 |
+
+---
+
+## 八、关键文件速查
+
+| 文件 | 说明 |
 |------|------|
-| canvas_agent 方案 | 新增独立 canvas_agent，不改 lead_agent（方案 A）|
-| 路由形式 | `/page/canvas/*`，挂在 PageLayout 内 |
-| artifact 字段共存 | `artifact`（Canvas 文档）与 `artifacts: list[str]`（文件列表）独立共存 |
-| 模型配置真源 | 后端 config.yaml，前端动态加载 /api/models |
-| 前端 artifact 索引 | 从 1 开始（与 open-canvas 对齐） |
-| 流式首版策略 | 节点完成后输出完整 artifact 对象，不做 token 级局部流 |
+| `frontend-web/docs/openCanvas-progress.md` | **本文档** |
+| `frontend-web/src/open-canvas/contexts/CanvasStreamContext.tsx` | 流单例 Context |
+| `frontend-web/src/open-canvas/hooks/useCanvasThreadStream.ts` | 主流 hook（LangGraph SDK） |
+| `frontend-web/src/open-canvas/hooks/useWritingRewrite.ts` | AI 改写状态机 |
+| `frontend-web/src/open-canvas/api/rewrite.ts` | 改写 SSE 客户端 |
+| `frontend-web/src/open-canvas/utils/quick-actions.ts` | 快捷动作消息构建 |
+| `frontend-web/src/core/messages/utils.ts` | `stripArtifactTag` 在此 |
+| `frontend-web/src/components/workspace/messages/message-list-item.tsx` | 调用 stripArtifactTag 的位置 |
+| `frontend-web/src/styles/globals.css` | Tiptap 写作编辑器样式（`.tiptap-writing-editor`） |
+| `offline-backend-20260512/backend/packages/harness/deerflow/agents/canvas_agent/agent.py` | canvas_agent 工厂 |
+| `offline-backend-20260512/backend/packages/harness/deerflow/agents/canvas_agent/tools.py` | update_artifact_tool |
+| `offline-backend-20260512/backend/packages/harness/deerflow/agents/canvas_agent/prompt.py` | 系统提示词 |
+| `offline-backend-20260512/backend/app/gateway/routers/writing.py` | AI 改写后端接口 |
+| `offline-backend-20260512/backend/langgraph.json` | canvas_agent 注册 |
 
 ---
 
-## 七、开始新对话的推荐提示词
+## 九、开始新对话的推荐提示词
 
 ```
-我们在集成 open-canvas 到 DeerFlow 项目。
-参考进度文档：frontend-web/docs/openCanvas-progress.md
-目前前端阶段一/二/三已完成，下一步是后端 ThreadState 扩展。
-请从第四节"下一步：后端 ThreadState 扩展"开始继续。
+我们在开发 DeerFlow 的 Canvas 写作模式（open-canvas 集成）。
+详细进度见：frontend-web/docs/openCanvas-progress.md
+
+当前全部功能已完成，包括：
+- Canvas 双栏布局、canvas_agent、版本历史
+- AI Writing Editor（Tiptap + SSE 改写 + 思考过程展开）
+- 快捷动作（通过 CanvasStreamContext 统一流）
+- artifact 内容注入（消息里嵌入 <artifact> 标签，显示时剥离）
+
+请根据进度文档第七节"潜在开发方向"或我指定的任务继续开发。
 ```
diff --git a/frontend-web/docs/测试.md b/frontend-web/docs/测试.md
new file mode 100644
index 00000000..1f05bed6
--- /dev/null
+++ b/frontend-web/docs/测试.md
@@ -0,0 +1,109 @@
+# AI 智能写作 — 手工测试清单
+
+> 测试环境：后端 `http://localhost:8001`，前端 `http://localhost:5174`
+> 每项测试前确认后端已启动（`make dev`）、前端已启动（`pnpm dev`）
+
+---
+
+## T1 — 启动写作任务
+
+| # | 步骤 | 预期结果 |
+|---|------|----------|
+| 1.1 | 打开 Canvas 页面，点击右上角「AI 写作」按钮 | AIWritingPanel 在右侧展开，显示写作配置表单 |
+| 1.2 | 填写：意图「新能源汽车市场趋势分析」，类型「分析报告」，目标读者「行业研究人员」，字数「1200」 | 表单验证通过，提交按钮可点击 |
+| 1.3 | 点击「开始写作」 | 按钮变为 loading 状态；时间轴出现第一条「素材收集专家 · 开始检索素材」进度条目 |
+| 1.4 | 意图字段留空后点击提交 | 表单校验阻止提交，提示「请填写写作意图」 |
+
+---
+
+## T2 — SSE 进度流（时间轴）
+
+| # | 步骤 | 预期结果 |
+|---|------|----------|
+| 2.1 | 任务启动后观察时间轴 | 每隔几秒新增进度条目，agent_name 标签分别出现「素材收集专家」「作家」「编辑」 |
+| 2.2 | 打开浏览器 DevTools → Network，过滤 `stream` | 看到一个 `text/event-stream` 请求长连接，持续收到 `data:` 帧 |
+| 2.3 | 断网 5 秒后恢复 | 面板显示「连接中断」提示（或 error 事件），不崩溃 |
+
+---
+
+## T3 — PAUSE-1 素材确认
+
+| # | 步骤 | 预期结果 |
+|---|------|----------|
+| 3.1 | 等待素材收集专家完成检索，出现 PAUSE-1 干预卡 | 卡片标题「素材确认」，列出 ≥1 条素材，每条有复选框、标题、来源、相关度分数色条 |
+| 3.2 | 全选所有素材，点击「确认素材，继续写作」 | 干预卡禁用，时间轴新增「作家 · 开始规划大纲」 |
+| 3.3 | 重新发起任务，PAUSE-1 出现后取消勾选全部素材，点击「重新检索」 | 向后端发送 `action: re_search`；时间轴回到素材收集专家节点重新检索 |
+| 3.4 | PAUSE-1 出现后填写「追加关键词」输入框（如「锂电池」）并按 Enter，再点「追加搜索」 | 标签出现「锂电池」；后端收到 `action: append_search, extraKeywords: ["锂电池"]` |
+| 3.5 | 验证相关度色条颜色：分数 ≥0.8 绿色 / 0.5–0.8 橙色 / <0.5 红色 | 三种颜色均可在不同素材中观察到 |
+
+---
+
+## T4 — PAUSE-2 大纲确认
+
+| # | 步骤 | 预期结果 |
+|---|------|----------|
+| 4.1 | PAUSE-2 出现后检查大纲卡 | 显示文章标题 + ≥2 个章节，每节有节标题与要点列表 |
+| 4.2 | 点击文章标题，内联编辑改为「2025 新能源趋势报告」，按 Enter | 标题实时变更，不刷新页面 |
+| 4.3 | 展开某章节，点击一条要点，修改文字，按 Blur 失焦 | 要点文字更新 |
+| 4.4 | 点击「+ 新增章节」，填写章节标题 | 大纲末尾追加新章节 |
+| 4.5 | 点击「确认大纲，开始写作」 | 编辑后的大纲随 `action: confirm_outline` 提交；时间轴出现「作家 · 开始撰写草稿」 |
+| 4.6 | PAUSE-2 出现后点击「重新规划大纲」 | 显示意见输入框；填写「请增加政策分析章节」后提交；后端收到 `action: re_outline, outlineFeedback: ...` |
+
+---
+
+## T5 — PAUSE-3 草稿确认
+
+| # | 步骤 | 预期结果 |
+|---|------|----------|
+| 5.1 | 作家完成草稿，PAUSE-3 出现 | 干预卡显示修改次数（如「第 1 稿」）；右侧 Artifact 面板同步显示 Markdown 草稿内容 |
+| 5.2 | 点击「定稿，提交编辑审核」 | 进入编辑节点；时间轴出现「编辑 · 开始审核」 |
+| 5.3 | 点击「提出修改意见」，填写意见后提交 | 作家节点重新生成草稿；修改次数 +1 |
+| 5.4 | 连续打回 3 次，观察第 4 次 PAUSE-3 | revisionCount 正确递增显示 |
+
+---
+
+## T6 — PAUSE-4 审核结果确认
+
+| # | 步骤 | 预期结果 |
+|---|------|----------|
+| 6.1 | 编辑审核完成，PAUSE-4 出现 | ReviewCard 显示：综合得分、事实/逻辑/语言三项分数、及格线（默认 75）、verdict 徽章（通过=绿 / 打回=红）|
+| 6.2 | verdict=pass 时，点击「接受审核，定稿」 | 流程结束；时间轴出现「完成」；右侧面板保留最终草稿 |
+| 6.3 | verdict=reject 时，查看问题列表 | major 问题排在 minor 前；每条显示类别徽章、位置、问题描述、建议 |
+| 6.4 | verdict=reject 时，点击「强制定稿」 | 向后端发送 `action: force_finalize`；流程结束 |
+| 6.5 | 添加「额外说明」文字后点击「接受审核，定稿」 | extra_notes 包含在提交的 intervention payload 中（DevTools → Network 验证） |
+
+---
+
+## T7 — 错误与边界场景
+
+| # | 步骤 | 预期结果 |
+|---|------|----------|
+| 7.1 | 后端未启动时点击「开始写作」 | 面板显示错误提示「无法连接到服务器」，不白屏 |
+| 7.2 | 写作进行中点击「停止/重置」 | 时间轴清空，表单恢复可编辑，后端流被中断（Network 连接关闭）|
+| 7.3 | 素材列表为空（后端返回 0 条）时 PAUSE-1 | 干预卡显示「暂无素材」提示，「确认」按钮仍可点击 |
+| 7.4 | 大纲只有 1 个章节时，点击删除该章节 | 删除按钮禁用或弹出「至少保留一个章节」提示 |
+| 7.5 | 弱模型返回格式错误的 JSON（手动 mock 后端） | 前端收到 fallback 结构，不崩溃；时间轴正常继续 |
+
+---
+
+## T8 — 跨阶段状态一致性
+
+| # | 步骤 | 预期结果 |
+|---|------|----------|
+| 8.1 | PAUSE-2 时展开大纲卡，刷新页面（F5） | 页面恢复；如写作任务 ID 持久化，状态可恢复（否则回到初始状态，均可接受）|
+| 8.2 | 同时打开两个浏览器标签，各自启动独立写作任务 | 两个任务互不干扰，各自有独立 task_id |
+| 8.3 | 完整跑通一次全流程（T1→T2→T3→T4→T5→T6 pass） | 右侧 Artifact 面板显示完整定稿文章，时间轴所有节点状态为「完成」 |
+
+---
+
+## 后端单元测试（补充确认）
+
+```bash
+# 在 offline-backend-20260512/backend/ 下运行
+PYTHONPATH=. uv run pytest tests/test_ai_writing_json_parse.py -v   # 16 tests
+PYTHONPATH=. uv run pytest tests/test_ai_writing_graph.py -v        # 19 tests
+```
+
+两个测试文件均应全部通过（0 failed）。
+
+npm install @tiptap/core @tiptap/starter-kit @tiptap/extension-underline @tiptap/extension-placeholder
\ No newline at end of file
diff --git a/frontend-web/docs/素材专家检索.md b/frontend-web/docs/素材专家检索.md
new file mode 100644
index 00000000..d4ddb29b
--- /dev/null
+++ b/frontend-web/docs/素材专家检索.md
@@ -0,0 +1,188 @@
+# 素材专家检索 —— 内网接口对接说明
+
+本文档说明 AI 智能写作中「素材收集专家」的检索机制、内网知识库接口的对接逻辑、
+涉及的代码文件，以及常见错误的排查方式。
+
+---
+
+## 1. 检索来源切换
+
+素材专家支持多种检索来源，通过**后端配置文件**统一切换，**无需改动任何代码**。
+
+配置位置：`offline-backend-20260512/backend/config.yaml`
+
+```yaml
+ai_writing:
+  # 检索来源开关：internet=互联网检索（默认）/ intranet=内网知识库 / tavily / demo
+  search_provider: internet
+  # 以下两项仅在 search_provider=intranet 时生效
+  intranet_search_url: http://10.106.57.180:7863/knowledge_base/search_docs_es
+  intranet_knowledge_base: samples
+```
+
+| `search_provider` 取值 | 含义 |
+|---|---|
+| `internet` | 互联网检索（DuckDuckGo），失败时回退到 demo 演示素材。**当前默认值** |
+| `intranet`  | 内网知识库检索（调用 `search_docs_es` 接口） |
+| `tavily`    | Tavily 互联网检索 |
+| `demo`      | 内置演示素材，仅用于本地调试 |
+
+> 内网接口联通后，把 `search_provider` 改为 `intranet` 即可切换。
+> 配置文件支持热加载（`get_app_config()` 按 mtime 自动重载），改完一般无需重启后端。
+
+---
+
+## 2. 内网接口规格
+
+- **地址**：`http://10.106.57.180:7863/knowledge_base/search_docs_es`
+- **方法**：`POST`
+- **请求体**：
+
+  ```json
+  {
+    "query": "检索关键词",
+    "knowledge_base_name": "samples",
+    "ts": "yes"
+  }
+  ```
+
+- **响应体**：一个数组，每个元素结构如下：
+
+  ```json
+  [
+    {
+      "page_content": "正文片段",
+      "metadata": {
+        "m_title":  "标题",
+        "content":  "内容",
+        "recUuid":  "原文id",
+        "m_publish":"发布时间",
+        "source1":  "来源"
+      }
+    }
+  ]
+  ```
+
+  我们需要的字段都在 `metadata` 里。
+
+### 字段映射
+
+后端把内网响应映射为统一的 `SearchResult` 结构：
+
+| 内网响应字段              | SearchResult 字段 | 说明 |
+|--------------------------|--------------------|------|
+| `metadata.m_title`        | `title`            | 标题，缺省为「（无标题）」 |
+| `metadata.content`        | `content`          | 内容，截断到 500 字 |
+| `metadata.source1`        | `source`           | 来源，缺省为「内网知识库」 |
+| `metadata.m_publish`      | `published_at`     | 发布时间 |
+| `metadata.recUuid`        | `recUuid`          | 原文 id，用于前端拼接「查看原文」链接 |
+| —                         | `url`              | 固定为空，原文地址由前端依据 `recUuid` 拼接 |
+| —                         | `relevance_score`  | 接口不返回分值，按返回顺序赋递减分以保留 ES 排序 |
+| —                         | `source_type`      | 固定为 `"intranet"` |
+
+---
+
+## 3. 对接逻辑与涉及文件
+
+### 后端
+
+| 文件 | 作用 |
+|------|------|
+| `packages/harness/deerflow/agents/ai_writing/search/intranet_stub.py` | **内网检索适配器** `IntranetSearchProvider`。发起 POST 请求、解析响应、映射为 `SearchResult` |
+| `packages/harness/deerflow/agents/ai_writing/search/__init__.py` | `get_search_provider()` 工厂函数，依据 `search_provider` 配置返回对应 provider |
+| `packages/harness/deerflow/agents/ai_writing/search/base.py` | `SearchResult` 数据结构 + `BaseSearchProvider` 抽象基类 |
+| `packages/harness/deerflow/agents/ai_writing/nodes/researcher.py` | 素材收集专家节点，调用 provider 检索并把结果合并、排序为素材包 |
+| `app/gateway/routers/ai_writing.py` | `_ai_writing_config()` 读取 `config.yaml` 的 `ai_writing` 段，经 `_make_config()` 注入运行时 |
+| `config.yaml` | `ai_writing` 段，检索来源开关与内网接口地址 |
+
+调用链：
+
+```
+ai_writing.py(_make_config 注入 ai_writing_config)
+  → researcher_node
+    → get_search_provider(ai_writing_config)   # 依据 search_provider 选择
+      → IntranetSearchProvider.search()         # POST search_docs_es
+        → SearchResult[]                        # 字段映射
+```
+
+### 前端
+
+| 文件 | 作用 |
+|------|------|
+| `src/core/config/index.ts` | `INTRANET_SOURCE_URL_BASE` 原文详情页地址前缀 + `buildIntranetSourceUrl()` 构造函数 |
+| `src/open-canvas/components/ai-writing/MaterialItem.tsx` | 素材卡片，`recUuid` 非空时显示「查看原文」按钮 |
+| `src/open-canvas/components/ai-writing/CompletedInterventionCard.tsx` | 历史回显的素材卡，「原文」链接同样基于 `recUuid` |
+| `src/open-canvas/api/ai-writing.ts` | `normalizeMaterial()` 把后端 snake_case 字段转为前端 camelCase（含 `recUuid`） |
+
+「查看原文」链接拼接规则：
+
+```
+INTRANET_SOURCE_URL_BASE + recUuid
+= https://chlib.b.uat.4.cn/knowlibrary/#/knowledge/mid_detail?recUuid={recUuid}
+```
+
+- 仅当素材的 `recUuid` **非空**时才显示「查看原文」按钮。
+- 点击直接 `window.open(...)` 新标签页打开，不做站内跳转。
+
+---
+
+## 4. 错误处理与排查
+
+### 4.1 内网检索返回空 / 调不通
+
+**现象**：切到 `intranet` 后，素材专家时间线出现琥珀色告警「ES 波动导致检索异常」，
+下方显示真实报错原因；若完全无结果，再提示「未检索到任何素材」。
+
+`IntranetSearchProvider.search()` 对所有异常（连接失败、超时、非 2xx、JSON 解析失败）
+都做了兜底：**捕获后记录 warning 日志、把原因收集到 `provider.errors`，并返回空列表**，
+不会让整个写作流程崩溃。`researcher_node` 在检索结束后取出 `provider.errors`，
+以非致命的 `notice` 事件推送到前端时间线（标题「ES 波动导致检索异常」+ 真实原因），
+**接口报错不影响写作流程继续**。
+
+> 容错相关代码：
+> - 检索异常收集：`intranet_stub.py` / `duckduckgo_search.py` 的 `errors` 列表
+> - 告警事件发出：`researcher.py` 的 `_notice()` 与 `progress_events`
+> - 模型调用异常：`researcher.py`（检索词/排序）、`writer_outline.py` / `writer_draft.py` /
+>   `editor.py` 均会发出「模型错误」事件（致命错误用 `error`，可兜底的用 `notice`）
+> - 前端展示：`TimelineStep.tsx` 渲染 `notice`（琥珀）/ `error`（红色）的标题 + 真实原因
+
+排查步骤：
+
+1. **确认网络可达**：在后端所在机器执行
+   `curl -X POST http://10.106.57.180:7863/knowledge_base/search_docs_es -H "Content-Type: application/json" -d "{\"query\":\"测试\",\"knowledge_base_name\":\"samples\",\"ts\":\"yes\"}"`
+2. **查看后端日志**：搜索关键字 `intranet search failed`，会打印具体异常（连接超时 / DNS / 401 等）。
+3. **确认配置**：`config.yaml` 的 `intranet_search_url`、`intranet_knowledge_base` 是否正确。
+
+空结果时前端已有兜底：素材确认卡会弹出「未检索到任何素材，是否在无素材的情况下继续写作」，
+用户可以选择「重新搜索」或「无数据继续写作」。
+
+### 4.2 字段缺失 / 响应结构变化
+
+`search()` 对每个字段都用 `or` 兜底（如 `m_title` 缺失时回退为「（无标题）」），
+单条数据字段缺失不会导致整批失败。
+
+若内网接口改为「数组外包一层 `data`/`results`」的结构，适配器已兼容；
+若改成其它结构，需修改 `intranet_stub.py` 中解析 `items` 的逻辑。
+
+### 4.3 「查看原文」按钮不显示
+
+**原因**：该素材的 `recUuid` 为空。这是预期行为 —— 只有内网知识库素材才带 `recUuid`，
+互联网检索（`internet`/`tavily`/`demo`）的素材没有 `recUuid`，不显示「查看原文」。
+
+如需让互联网素材也能跳转，需另行调整 `MaterialItem.tsx` 的显示条件。
+
+### 4.4 原文链接打不开 / 地址不对
+
+「查看原文」地址前缀写在 `src/core/config/index.ts` 的 `INTRANET_SOURCE_URL_BASE`。
+若内网原文详情页地址有变，只改这一个常量即可。
+
+---
+
+## 5. 联调上线步骤
+
+1. 确认后端机器能访问 `10.106.57.180:7863`。
+2. 把 `config.yaml` 的 `ai_writing.search_provider` 改为 `intranet`。
+3. 后端配置热加载生效（或重启后端）。
+4. 进入 AI 智能写作页面，发起一次写作，观察素材收集专家是否返回内网素材。
+5. 校验素材卡片的标题/来源/时间显示正确，「查看原文」能跳到内网详情页。
+6. 如检索为空，按 [4.1](#41-内网检索返回空--调不通) 排查。
diff --git a/frontend-web/package-lock.json b/frontend-web/package-lock.json
index 2edad9b5..0437d4af 100644
--- a/frontend-web/package-lock.json
+++ b/frontend-web/package-lock.json
@@ -35,6 +35,13 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@radix-ui/react-use-controllable-state": "^1.2.2",
         "@tanstack/react-query": "^5.90.17",
+        "@tiptap/core": "^3.23.4",
+        "@tiptap/extension-bubble-menu": "^3.23.4",
+        "@tiptap/extension-placeholder": "^3.23.4",
+        "@tiptap/extension-underline": "^3.23.4",
+        "@tiptap/pm": "^3.23.4",
+        "@tiptap/react": "^3.23.4",
+        "@tiptap/starter-kit": "^3.23.4",
         "@types/hast": "^3.0.4",
         "@uiw/codemirror-theme-basic": "^4.25.4",
         "@uiw/codemirror-theme-monokai": "^4.25.4",
@@ -74,6 +81,7 @@
         "streamdown": "1.4.0",
         "tailwind-merge": "^3.4.0",
         "tdesign-react": "^1.12.3",
+        "tiptap-markdown": "^0.9.0",
         "tokenlens": "^1.3.1",
         "unist-util-visit": "^5.0.0",
         "use-stick-to-bottom": "^1.1.1",
@@ -4262,6 +4270,417 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tiptap/core": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.23.4.tgz",
+      "integrity": "sha512-ni2LWE52bVeSt3L2HVBSmbBw+elc32ATej9C68EyKzN/8vR5ILxFn6RCdDTKm4asmwZyq2jys12dKmBdWMr9QA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.23.4.tgz",
+      "integrity": "sha512-7YjSibNlPcy9eGK+tHt5G/Njr7nPxl+rZ3rCC6TwtLIRLSHPnoGDsfFOgTPkXxaQcE1a/VQwemnYfWc3kdIjDQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.23.4.tgz",
+      "integrity": "sha512-3L9tnZ12i+98u5df2nV2zGu/sc3rhI87E3ocn1YYAO8PJUAgZnMwdet8JawCrS1uut5sRKlxo3SXEmdNfRVm/w==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.23.4.tgz",
+      "integrity": "sha512-EPTpL/IFp/aTGZErBq/Mc3dKznj6G/qNEkVYWjueOn1oKApyT0P6WVHGvu/vpMdErhzmoGDuFPPGVS6T8Upx2Q==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.23.4.tgz",
+      "integrity": "sha512-mXB2KZOz1R+E6VNTZ3vzdAk7ZDGKjPmsJEZIQg1B5qRycTKg49/rCCkLA2QnqAwX6BzS3mLLH1RWE2W0oXD7vg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.23.4.tgz",
+      "integrity": "sha512-C0TeRipMycUEBnV+Mzx6eLp/yZb6Vi/waP3Tkb0lO5/ikg7LWLB7AlmMunjIXEUcR/pJHID/aEh5PfJFpysUDg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.23.4.tgz",
+      "integrity": "sha512-UEU1w/85CSNKktbhESnIRmtjKcH7DeschReZA8err1wAnYLTKzid5ucnJSJ25iRg2V5Fnuws5gnPT5CVgdfXCQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.23.4.tgz",
+      "integrity": "sha512-YC4G6VkxT629rlqUTwD6XvOpxjvghn7fxrK4RbyKVJY2C6E1vgmX0won1Ast6v+qTE6iONOMS6f6VyPxSGjg4w==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.23.4.tgz",
+      "integrity": "sha512-ujJQUIENk0RwVFCh5g/TOSEv1a7Pnam/cjHmSUqHWUNZkYS9aOqjm+JfURJPCinRS2oHvo3AARul5mkKgDJYcA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.23.4.tgz",
+      "integrity": "sha512-eAc72bKM26yIPx0jsU8qdjE71vFNVu5R9jGbdItBMFc0SPLS4qY8g+8RJ+iWoLwbcSEpgooLS9D9sLfdAU+Tvw==",
+      "optional": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.23.4.tgz",
+      "integrity": "sha512-RuyvOlIGP6UpVOc0Lw0L63jKLtYM49CNhPV2OMSfwwwbBZ3pJGos2/SqpYg71d3sn+qpsAopS4Pfr8iPZog73A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.23.4.tgz",
+      "integrity": "sha512-ODlpZCi7n136BH9luM09EFL8Pg+bbRCd0tzCQM5BKMXRkLitYZA8Gl/f5DLmGJ50wzFsDPXK2Br2g9UvZK7COg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.23.4.tgz",
+      "integrity": "sha512-8W9Hqi0J69Xbqg08nPf4xRMJXMccaKFAgUE1tvy5PAWJSQxOMwkKQXgZXxwe+80sOMUnV8qveBqUy/ODMPgAxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.23.4.tgz",
+      "integrity": "sha512-EA4kK8ywZ4dQNOdxeZbplmDDs5T5LjMgHpqxRwukj9wwKiILOK5E3fcKm1fCKh9Q02w96jax6YVccHwmgJP3sQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.23.4.tgz",
+      "integrity": "sha512-jUAHi+HZlg47BzgVIy6y/UH5vev7vPQ95jddhB5K3hC122kvWFMXlken7UOnqzbxNcHs2+4Oi/ZJirYMpT4P5w==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-link": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.23.4.tgz",
+      "integrity": "sha512-XjxltY7MomwfTs6jmN6Bw5bb/upb34lpyqv2RiXppFTK25Br7ipksRjUpWpB4/csZeg30qwrLGVKxCol38ffrw==",
+      "dependencies": {
+        "linkifyjs": "^4.3.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-list": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.23.4.tgz",
+      "integrity": "sha512-yuauDm6qW/7q+ZO0YJBKQEGdnUm6DDTJM8AMp9bMZrT4jRf/zyUtNcZ91QEfFvBcyVuI+10PIOXtNPevhQ741Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.23.4.tgz",
+      "integrity": "sha512-Q/JXosShD5oyDwukE6igdrZD2lb0ZgyoQTHYchk0pzU4frClFbn3RI1wKP+XeqKLhdO6KH2WZ9rERGH7PtDi7Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-list-keymap": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.23.4.tgz",
+      "integrity": "sha512-9FezifCfuoc0o+5K6l4QNOOfelqxnDGg/f9oL1D/LFZPC54bPxpWWft9QCWOqyqZgyLCLjbCjciAlbgkrFUmmw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.23.4.tgz",
+      "integrity": "sha512-+3ofyssYnOTa1+nFWEmCAY1ngn8nAV1xo25JnNNC87NMU9WkSgr93jB7/uUJP0uui1C2dBLlaup3XXm108yarw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.23.4.tgz",
+      "integrity": "sha512-KbhXjCFzWphvFn5VU7E4dtmYDm+bssI1i0+CnXPWCXkjdaaX88ck68Xp1fKz8/bbI/CqlgiNDO/3TvqgtZ6woQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-placeholder": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-3.23.4.tgz",
+      "integrity": "sha512-yHtAZkFR9M2AQmCi555w4ns1BBCqwRyYDYMtd10DBvqPX7T3TmGerPdUfI6sLr74GxnZ5zHOnOYdwAbeG5JzNw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.23.4.tgz",
+      "integrity": "sha512-Vnq5vW801zPbu1LtKeA5k4R241jY+hRjXeijYwIPxy15KzIiipY12518HiCf6/8kkRbMxgOfdYg9X4BRV3HV3g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.23.4.tgz",
+      "integrity": "sha512-q9kxver/MR18p66aWZHSPycnr9hcBFyVGeGj8gf+BQCzn5hpvtSYTfLvk1nq8GFhygdQ9/e3f7B5ovrm/jnpvw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-underline": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.23.4.tgz",
+      "integrity": "sha512-F1ocPT10LV+seky25R1TMCRdc/Iof99jLcDSYDGr6mNEDY4ct2RvOeSM8aDdYq6CkH+vXt3i3JDeRwV23KzswQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extensions": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.23.4.tgz",
+      "integrity": "sha512-SlGPXauW8iKWG7wwuwC/0y/smLImp0h6GBIGgNnTBgIP/ThXQnjLMSZH0mW/REO87dQxkku01V3ARRywi+juhg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.23.4.tgz",
+      "integrity": "sha512-+C5ngcoza47n3MjtjVBqBEBICPC0McdbwzJ+X6SSCviCLoqnSYanv5mIX9HWG0Q4fJ4BkdNM3VibZUxQaTbKyQ==",
+      "dependencies": {
+        "prosemirror-changeset": "^2.3.0",
+        "prosemirror-commands": "^1.6.2",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-model": "^1.24.1",
+        "prosemirror-schema-list": "^1.5.0",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.6.4",
+        "prosemirror-transform": "^1.10.2",
+        "prosemirror-view": "^1.38.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/react": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-3.23.4.tgz",
+      "integrity": "sha512-mb5aIY9PuLreOVLExqs+8BAI20I/8+jCUBfEIqheuFY2GRRuBiwczejSlYuADfVDBbPVN5uPw4UMADCaH5wueQ==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "fast-equals": "^5.3.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "optionalDependencies": {
+        "@tiptap/extension-bubble-menu": "^3.23.4",
+        "@tiptap/extension-floating-menu": "^3.23.4"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.23.4.tgz",
+      "integrity": "sha512-3VhU+NO6/ec9DMj/5Ej0nzARSq42cXnqW+QHCmTL3FNXkXQz+tw1KlfruT5GGJ3M0RssjWjRC0a39N/4S3qxeA==",
+      "dependencies": {
+        "@tiptap/core": "^3.23.4",
+        "@tiptap/extension-blockquote": "^3.23.4",
+        "@tiptap/extension-bold": "^3.23.4",
+        "@tiptap/extension-bullet-list": "^3.23.4",
+        "@tiptap/extension-code": "^3.23.4",
+        "@tiptap/extension-code-block": "^3.23.4",
+        "@tiptap/extension-document": "^3.23.4",
+        "@tiptap/extension-dropcursor": "^3.23.4",
+        "@tiptap/extension-gapcursor": "^3.23.4",
+        "@tiptap/extension-hard-break": "^3.23.4",
+        "@tiptap/extension-heading": "^3.23.4",
+        "@tiptap/extension-horizontal-rule": "^3.23.4",
+        "@tiptap/extension-italic": "^3.23.4",
+        "@tiptap/extension-link": "^3.23.4",
+        "@tiptap/extension-list": "^3.23.4",
+        "@tiptap/extension-list-item": "^3.23.4",
+        "@tiptap/extension-list-keymap": "^3.23.4",
+        "@tiptap/extension-ordered-list": "^3.23.4",
+        "@tiptap/extension-paragraph": "^3.23.4",
+        "@tiptap/extension-strike": "^3.23.4",
+        "@tiptap/extension-text": "^3.23.4",
+        "@tiptap/extension-underline": "^3.23.4",
+        "@tiptap/extensions": "^3.23.4",
+        "@tiptap/pm": "^3.23.4"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
     "node_modules/@tokenlens/core": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@tokenlens/core/-/core-1.3.0.tgz",
@@ -4606,6 +5025,20 @@
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.8.tgz",
       "integrity": "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg=="
     },
+    "node_modules/@types/linkify-it": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.5.tgz",
+      "integrity": "sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw=="
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "13.0.9",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.9.tgz",
+      "integrity": "sha512-1XPwR0+MgXLWfTn9gCsZ55AHOKW1WN+P9vr0PaQh5aerR9LLQXUbjfEAFhjmEmyoYFWAyuN2Mqkn40MZ4ukjBw==",
+      "dependencies": {
+        "@types/linkify-it": "^3",
+        "@types/mdurl": "^1"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -4614,6 +5047,11 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mdurl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.5.tgz",
+      "integrity": "sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA=="
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -4641,7 +5079,6 @@
     },
     "node_modules/@types/react-dom": {
       "version": "19.2.3",
-      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.2.0"
@@ -4668,6 +5105,11 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="
+    },
     "node_modules/@types/validator": {
       "version": "13.15.10",
       "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.15.10.tgz",
@@ -4910,6 +5352,11 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
     "node_modules/aria-hidden": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
@@ -5986,6 +6433,14 @@
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
+    "node_modules/fast-equals": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.4.0.tgz",
+      "integrity": "sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fault": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
@@ -6867,6 +7322,19 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/linkifyjs": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.3.tgz",
+      "integrity": "sha512-P8aEP5U/D1/IlTY2OeYsErdwh9bGuLE30NcXtKEjgdHcahveQoQwM2yZNsioQHsWFz0P7KKudisbrzCgR0sDHg=="
+    },
     "node_modules/lodash-es": {
       "version": "4.18.1",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
@@ -6931,6 +7399,38 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
+      "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it-task-lists": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz",
+      "integrity": "sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA=="
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -7224,6 +7724,11 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
     "node_modules/mermaid": {
       "version": "11.14.0",
       "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.14.0.tgz",
@@ -7945,6 +8450,11 @@
         "regex-recursion": "^6.0.2"
       }
     },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g=="
+    },
     "node_modules/p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -8176,6 +8686,160 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/prosemirror-changeset": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.4.1.tgz",
+      "integrity": "sha512-96WBLhOaYhJ+kPhLg3uW359Tz6I/MfcrQfL4EGv4SrcqKEMC1gmoGrXHecPE8eOwTVCJ4IwgfzM8fFad25wNfw==",
+      "dependencies": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz",
+      "integrity": "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.10.2"
+      }
+    },
+    "node_modules/prosemirror-dropcursor": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz",
+      "integrity": "sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-gapcursor": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.4.1.tgz",
+      "integrity": "sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==",
+      "dependencies": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.5.0.tgz",
+      "integrity": "sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
+      "integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-markdown": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.4.tgz",
+      "integrity": "sha512-D98dm4cQ3Hs6EmjK500TdAOew4Z03EV71ajEFiWra3Upr7diytJsjF4mPV2dW+eK5uNectiRj0xFxYI9NLXDbw==",
+      "dependencies": {
+        "@types/markdown-it": "^14.0.0",
+        "markdown-it": "^14.0.0",
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "node_modules/prosemirror-markdown/node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q=="
+    },
+    "node_modules/prosemirror-markdown/node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/prosemirror-markdown/node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg=="
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.25.6",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.6.tgz",
+      "integrity": "sha512-RIm+e9BiqAaJ1mRECv3vR3C+VG8ELoTTI+47tVudGi82yLnFOx3G/p/iSPK1HmHQdKhkkrJ68NJqxh7S+FBVmQ==",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-schema-list": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
+      "integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
+      "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-tables": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.8.5.tgz",
+      "integrity": "sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==",
+      "dependencies": {
+        "prosemirror-keymap": "^1.2.3",
+        "prosemirror-model": "^1.25.4",
+        "prosemirror-state": "^1.4.4",
+        "prosemirror-transform": "^1.10.5",
+        "prosemirror-view": "^1.41.4"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.12.0.tgz",
+      "integrity": "sha512-GxboyN4AMIsoHNtz5uf2r2Ru551i5hWeCMD6E2Ib4Eogqoub0NflniaBPVQ4MrGE5yZ8JV9tUHg9qcZTTrcN4w==",
+      "dependencies": {
+        "prosemirror-model": "^1.21.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.41.8",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.8.tgz",
+      "integrity": "sha512-TnKDdohEatgyZNGCDWIdccOHXhYloJwbwU+phw/a23KBvJIR9lWQWW7WHHK3vBdOLDNuF7TaX98GObUZOWkOnA==",
+      "dependencies": {
+        "prosemirror-model": "^1.20.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -8608,6 +9272,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ=="
+    },
     "node_modules/roughjs": {
       "version": "4.6.6",
       "resolved": "https://registry.npmjs.org/roughjs/-/roughjs-4.6.6.tgz",
@@ -8907,6 +9576,20 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tiptap-markdown": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/tiptap-markdown/-/tiptap-markdown-0.9.0.tgz",
+      "integrity": "sha512-dKLQ9iiuGNgrlGVjrNauF/UBzWu4LYOx5pkD0jNkmQt/GOwfCJsBuzZTsf1jZ204ANHOm572mZ9PYvGh1S7tpQ==",
+      "dependencies": {
+        "@types/markdown-it": "^13.0.7",
+        "markdown-it": "^14.1.0",
+        "markdown-it-task-lists": "^2.1.1",
+        "prosemirror-markdown": "^1.11.1"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.0.1"
+      }
+    },
     "node_modules/tokenlens": {
       "version": "1.3.1",
       "license": "MIT",
@@ -8968,6 +9651,11 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+    },
     "node_modules/ufo": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
diff --git a/frontend-web/package.json b/frontend-web/package.json
index a9319e1d..8c9b705a 100644
--- a/frontend-web/package.json
+++ b/frontend-web/package.json
@@ -1,100 +1,108 @@
-{
-  "name": "deer-flow-frontend-vite",
-  "version": "0.1.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/lang-html": "^6.4.11",
-    "@codemirror/lang-javascript": "^6.2.4",
-    "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-markdown": "^6.5.0",
-    "@codemirror/lang-python": "^6.2.1",
-    "@codemirror/language-data": "^6.5.2",
-    "@langchain/core": "^1.1.15",
-    "@langchain/langgraph-sdk": "^1.5.3",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "@tanstack/react-query": "^5.90.17",
-    "@types/hast": "^3.0.4",
-    "@uiw/codemirror-theme-basic": "^4.25.4",
-    "@uiw/codemirror-theme-monokai": "^4.25.4",
-    "@uiw/react-codemirror": "^4.25.4",
-    "@xyflow/react": "^12.10.0",
-    "ai": "^6.0.33",
-    "best-effort-json-parser": "^1.2.1",
-    "canvas-confetti": "^1.9.4",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "codemirror": "^6.0.2",
-    "date-fns": "^4.1.0",
-    "docx": "^9.5.1",
-    "dotenv": "^17.2.3",
-    "embla-carousel-react": "^8.6.0",
-    "gsap": "^3.13.0",
-    "hast": "^1.0.0",
-    "katex": "^0.16.28",
-    "lucide-react": "^0.562.0",
-    "motion": "^12.26.2",
-    "nanoid": "^5.1.6",
-    "next-themes": "^0.4.6",
-    "ogl": "^1.0.11",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^4.4.1",
-    "react-router-dom": "^7.9.4",
-    "react-syntax-highlighter": "^16.1.1",
-    "rehype-katex": "^7.0.1",
-    "rehype-raw": "^7.0.0",
-    "remark-gfm": "^4.0.1",
-    "remark-math": "^6.0.0",
-    "shiki": "3.15.0",
-    "sonner": "^2.0.7",
-    "streamdown": "1.4.0",
-    "tailwind-merge": "^3.4.0",
-    "tdesign-react": "^1.12.3",
-    "tokenlens": "^1.3.1",
-    "unist-util-visit": "^5.0.0",
-    "use-stick-to-bottom": "^1.1.1",
-    "uuid": "^14.0.0",
-    "zod": "^3.24.2"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4.0.15",
-    "@types/gsap": "^3.0.0",
-    "@types/node": "^20.14.10",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^5.0.4",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^4.0.15",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5.8.2",
-    "vite": "^6.0.0",
-    "vite-plugin-source-identifier": "^1.1.2"
-  },
-  "packageManager": "pnpm@10.26.2"
-}
+{
+  "name": "deer-flow-frontend-vite",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/language-data": "^6.5.2",
+    "@langchain/core": "^1.1.15",
+    "@langchain/langgraph-sdk": "^1.5.3",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@tanstack/react-query": "^5.90.17",
+    "@tiptap/core": "^3.23.4",
+    "@tiptap/extension-bubble-menu": "^3.23.4",
+    "@tiptap/extension-placeholder": "^3.23.4",
+    "@tiptap/extension-underline": "^3.23.4",
+    "@tiptap/pm": "^3.23.4",
+    "@tiptap/react": "^3.23.4",
+    "@tiptap/starter-kit": "^3.23.4",
+    "@types/hast": "^3.0.4",
+    "@uiw/codemirror-theme-basic": "^4.25.4",
+    "@uiw/codemirror-theme-monokai": "^4.25.4",
+    "@uiw/react-codemirror": "^4.25.4",
+    "@xyflow/react": "^12.10.0",
+    "ai": "^6.0.33",
+    "best-effort-json-parser": "^1.2.1",
+    "canvas-confetti": "^1.9.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "codemirror": "^6.0.2",
+    "date-fns": "^4.1.0",
+    "docx": "^9.5.1",
+    "dotenv": "^17.2.3",
+    "embla-carousel-react": "^8.6.0",
+    "gsap": "^3.13.0",
+    "hast": "^1.0.0",
+    "katex": "^0.16.28",
+    "lucide-react": "^0.562.0",
+    "motion": "^12.26.2",
+    "nanoid": "^5.1.6",
+    "next-themes": "^0.4.6",
+    "ogl": "^1.0.11",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.4.1",
+    "react-router-dom": "^7.9.4",
+    "react-syntax-highlighter": "^16.1.1",
+    "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "shiki": "3.15.0",
+    "sonner": "^2.0.7",
+    "streamdown": "1.4.0",
+    "tailwind-merge": "^3.4.0",
+    "tdesign-react": "^1.12.3",
+    "tiptap-markdown": "^0.9.0",
+    "tokenlens": "^1.3.1",
+    "unist-util-visit": "^5.0.0",
+    "use-stick-to-bottom": "^1.1.1",
+    "uuid": "^14.0.0",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.15",
+    "@types/gsap": "^3.0.0",
+    "@types/node": "^20.14.10",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.0.15",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.0.0",
+    "vite-plugin-source-identifier": "^1.1.2"
+  },
+  "packageManager": "pnpm@10.26.2"
+}
diff --git a/frontend-web/src/components/workspace/artifacts/context.tsx b/frontend-web/src/components/workspace/artifacts/context.tsx
index 8d8a1b93..e15481af 100644
--- a/frontend-web/src/components/workspace/artifacts/context.tsx
+++ b/frontend-web/src/components/workspace/artifacts/context.tsx
@@ -94,3 +94,7 @@ export function useArtifacts() {
   }
   return context;
 }
+
+export function useArtifactsOptional(): ArtifactsContextType | null {
+  return useContext(ArtifactsContext) ?? null;
+}
diff --git a/frontend-web/src/components/workspace/messages/message-group.tsx b/frontend-web/src/components/workspace/messages/message-group.tsx
index e995fb02..cf820620 100644
--- a/frontend-web/src/components/workspace/messages/message-group.tsx
+++ b/frontend-web/src/components/workspace/messages/message-group.tsx
@@ -33,7 +33,7 @@ import { extractTitleFromMarkdown } from "@/core/utils/markdown";
 import { env } from "@/env";
 import { cn } from "@/lib/utils";
 
-import { useArtifacts } from "../artifacts";
+import { useArtifactsOptional } from "../artifacts";
 import { FlipDisplay } from "../flip-display";
 import { Tooltip } from "../tooltip";
 
@@ -201,8 +201,7 @@ function ToolCall({
   isLoading?: boolean;
 }) {
   const { t } = useI18n();
-  const { setOpen, autoOpen, autoSelect, selectedArtifact, select } =
-    useArtifacts();
+  const artifacts = useArtifactsOptional();
 
   if (name === "web_search") {
     let label: React.ReactNode = t.toolCalls.searchForRelatedInfo;
@@ -329,43 +328,43 @@ function ToolCall({
         )}
       </ChainOfThoughtStep>
     );
-  } else if (name === "write_file" || name === "str_replace") {
-    let description: string | undefined = (args as { description: string })
-      ?.description;
-    if (!description) {
-      description = t.toolCalls.writeFile;
-    }
-    const path: string | undefined = (args as { path: string })?.path;
-    const artifactPath =
-      name === "write_file" && path
-        ? new URL(
-            `write-file:${path}?message_id=${messageId}&tool_call_id=${id}`,
-          ).toString()
-        : path;
-    if (isLoading && isLast && autoOpen && autoSelect && path && !result) {
-      setTimeout(() => {
-        if (!artifactPath || selectedArtifact === artifactPath) {
-          return;
-        }
-        select(artifactPath, true);
-        setOpen(true);
-      }, 100);
-    }
+  } else if (name === "write_file" || name === "str_replace") {
+    let description: string | undefined = (args as { description: string })
+      ?.description;
+    if (!description) {
+      description = t.toolCalls.writeFile;
+    }
+    const path: string | undefined = (args as { path: string })?.path;
+    const artifactPath =
+      name === "write_file" && path
+        ? new URL(
+            `write-file:${path}?message_id=${messageId}&tool_call_id=${id}`,
+          ).toString()
+        : path;
+    if (artifacts && isLoading && isLast && artifacts.autoOpen && artifacts.autoSelect && path && !result) {
+      setTimeout(() => {
+        if (!artifactPath || artifacts.selectedArtifact === artifactPath) {
+          return;
+        }
+        artifacts.select(artifactPath, true);
+        artifacts.setOpen(true);
+      }, 100);
+    }
 
     return (
       <ChainOfThoughtStep
         key={id}
         className="cursor-pointer"
-        label={description}
-        icon={NotebookPenIcon}
-        onClick={() => {
-          if (!artifactPath) {
-            return;
-          }
-          select(artifactPath);
-          setOpen(true);
-        }}
-      >
+        label={description}
+        icon={NotebookPenIcon}
+        onClick={() => {
+          if (!artifactPath || !artifacts) {
+            return;
+          }
+          artifacts.select(artifactPath);
+          artifacts.setOpen(true);
+        }}
+      >
         {path && (
           <ChainOfThoughtSearchResult className="cursor-pointer">
             {path}
@@ -412,6 +411,17 @@ function ToolCall({
         icon={ListTodoIcon}
       ></ChainOfThoughtStep>
     );
+  } else if (name === "update_artifact") {
+    const title = typeof args.title === "string" ? args.title : undefined;
+    const type = args.type as string | undefined;
+    const label = title ?? (type === "code" ? "生成代码" : "生成文档");
+    return (
+      <ChainOfThoughtStep key={id} label={label} icon={NotebookPenIcon}>
+        <ChainOfThoughtSearchResult>
+          {type === "code" ? "代码文件" : "Markdown 文档"}
+        </ChainOfThoughtSearchResult>
+      </ChainOfThoughtStep>
+    );
   } else {
     const description: string | undefined = (args as { description: string })
       ?.description;
diff --git a/frontend-web/src/components/workspace/messages/message-list-item.tsx b/frontend-web/src/components/workspace/messages/message-list-item.tsx
index da3acecf..62836ca9 100644
--- a/frontend-web/src/components/workspace/messages/message-list-item.tsx
+++ b/frontend-web/src/components/workspace/messages/message-list-item.tsx
@@ -28,6 +28,7 @@ import {
   extractContentFromMessage,
   extractReasoningContentFromMessage,
   parseUploadedFiles,
+  stripArtifactTag,
   stripUploadedFilesTag,
   type FileInMessage,
 } from "@/core/messages/utils";
@@ -173,7 +174,7 @@ function MessageContent_({
 
   const contentToDisplay = useMemo(() => {
     if (isHuman) {
-      return rawContent ? stripUploadedFilesTag(rawContent) : "";
+      return rawContent ? stripArtifactTag(stripUploadedFilesTag(rawContent)) : "";
     }
     return rawContent ?? "";
   }, [rawContent, isHuman]);
diff --git a/frontend-web/src/core/api/canvas-client.ts b/frontend-web/src/core/api/canvas-client.ts
new file mode 100644
index 00000000..3c1c0f5c
--- /dev/null
+++ b/frontend-web/src/core/api/canvas-client.ts
@@ -0,0 +1,57 @@
+"use client";
+
+import { Client as LangGraphClient } from "@langchain/langgraph-sdk/client";
+
+import { getAuthorizationHeaderValue } from "../auth";
+import { getCanvasLangGraphBaseURL } from "../config";
+
+import { sanitizeRunStreamOptions } from "./stream-mode";
+
+/**
+ * Dedicated LangGraph client for the Canvas page.
+ *
+ * Keeping this separate from getAPIClient() means:
+ * - Canvas API calls can be pointed at a different server via VITE_CANVAS_LANGGRAPH_BASE_URL
+ * - Canvas-specific HTTP-level logic (headers, retries, middleware) lives here
+ * - Changes here never touch the main page's API path
+ */
+function createCanvasClient(): LangGraphClient {
+  const client = new LangGraphClient({
+    apiUrl: getCanvasLangGraphBaseURL(),
+    onRequest(_url, init) {
+      const headers = new Headers(init.headers ?? {});
+      const authHeader = getAuthorizationHeaderValue();
+      if (authHeader && !headers.has("Authorization")) {
+        headers.set("Authorization", authHeader);
+      }
+      return { ...init, headers };
+    },
+  });
+
+  const originalRunStream = client.runs.stream.bind(client.runs);
+  client.runs.stream = ((threadId, assistantId, payload) =>
+    originalRunStream(
+      threadId,
+      assistantId,
+      sanitizeRunStreamOptions(payload),
+    )) as typeof client.runs.stream;
+
+  const originalJoinStream = client.runs.joinStream.bind(client.runs);
+  client.runs.joinStream = ((threadId, runId, options) =>
+    originalJoinStream(
+      threadId,
+      runId,
+      sanitizeRunStreamOptions(options),
+    )) as typeof client.runs.joinStream;
+
+  return client;
+}
+
+let _canvasClient: LangGraphClient | null = null;
+
+export function getCanvasAPIClient(): LangGraphClient {
+  if (!_canvasClient) {
+    _canvasClient = createCanvasClient();
+  }
+  return _canvasClient;
+}
diff --git a/frontend-web/src/core/config/index.ts b/frontend-web/src/core/config/index.ts
index 4dc61576..928a1339 100644
--- a/frontend-web/src/core/config/index.ts
+++ b/frontend-web/src/core/config/index.ts
@@ -1,5 +1,18 @@
 import { env } from "@/env";
 
+/**
+ * 内网知识库「查看原文」详情页地址前缀。
+ * 素材的 recUuid 直接拼接在其后即为完整原文链接。
+ */
+export const INTRANET_SOURCE_URL_BASE =
+  "https://chlib.b.uat.4.cn/knowlibrary/#/knowledge/mid_detail?recUuid=";
+
+/** 由 recUuid 构造内网原文详情页地址；recUuid 为空时返回空串。 */
+export function buildIntranetSourceUrl(recUuid?: string | null): string {
+  if (!recUuid) return "";
+  return `${INTRANET_SOURCE_URL_BASE}${encodeURIComponent(recUuid)}`;
+}
+
 function getBaseOrigin() {
   if (typeof window !== "undefined") {
     return window.location.origin;
@@ -18,6 +31,23 @@ export function getBackendBaseURL() {
   }
 }
 
+/**
+ * Canvas page has its own LangGraph base URL so canvas-specific modifications
+ * (different server, different route prefix, etc.) can be made independently
+ * without touching the main page's API path.
+ * Falls back to the main LangGraph URL when VITE_CANVAS_LANGGRAPH_BASE_URL is unset.
+ */
+export function getCanvasLangGraphBaseURL(): string {
+  if (env.NEXT_PUBLIC_CANVAS_LANGGRAPH_BASE_URL) {
+    return new URL(
+      env.NEXT_PUBLIC_CANVAS_LANGGRAPH_BASE_URL,
+      getBaseOrigin(),
+    ).toString();
+  }
+  // Fall back to the main LangGraph URL (same server, different assistantId)
+  return getLangGraphBaseURL();
+}
+
 export function getLangGraphBaseURL(isMock?: boolean) {
   if (env.NEXT_PUBLIC_LANGGRAPH_BASE_URL) {
     return new URL(
diff --git a/frontend-web/src/core/messages/utils.ts b/frontend-web/src/core/messages/utils.ts
index e1c1a478..6929f0a7 100644
--- a/frontend-web/src/core/messages/utils.ts
+++ b/frontend-web/src/core/messages/utils.ts
@@ -14,20 +14,20 @@ interface AssistantMessageGroup extends GenericMessageGroup<"assistant"> {}
 
 interface AssistantPresentFilesGroup extends GenericMessageGroup<"assistant:present-files"> {}
 
-interface AssistantClarificationGroup extends GenericMessageGroup<"assistant:clarification"> {}
-
-interface AssistantSetupAgentApprovalGroup extends GenericMessageGroup<"assistant:setup-agent-approval"> {}
-
-interface AssistantSubagentGroup extends GenericMessageGroup<"assistant:subagent"> {}
+interface AssistantClarificationGroup extends GenericMessageGroup<"assistant:clarification"> {}
+
+interface AssistantSetupAgentApprovalGroup extends GenericMessageGroup<"assistant:setup-agent-approval"> {}
+
+interface AssistantSubagentGroup extends GenericMessageGroup<"assistant:subagent"> {}
 
 type MessageGroup =
   | HumanMessageGroup
   | AssistantProcessingGroup
   | AssistantMessageGroup
-  | AssistantPresentFilesGroup
-  | AssistantClarificationGroup
-  | AssistantSetupAgentApprovalGroup
-  | AssistantSubagentGroup;
+  | AssistantPresentFilesGroup
+  | AssistantClarificationGroup
+  | AssistantSetupAgentApprovalGroup
+  | AssistantSubagentGroup;
 
 export function groupMessages<T>(
   messages: Message[],
@@ -44,11 +44,11 @@ export function groupMessages<T>(
   function lastOpenGroup() {
     const last = groups[groups.length - 1];
     if (
-      last &&
-      last.type !== "human" &&
-      last.type !== "assistant" &&
-      last.type !== "assistant:clarification" &&
-      last.type !== "assistant:setup-agent-approval"
+      last &&
+      last.type !== "human" &&
+      last.type !== "assistant" &&
+      last.type !== "assistant:clarification" &&
+      last.type !== "assistant:setup-agent-approval"
     ) {
       return last;
     }
@@ -70,23 +70,23 @@ export function groupMessages<T>(
     }
 
     if (message.type === "tool") {
-      if (isClarificationToolMessage(message)) {
+      if (isClarificationToolMessage(message)) {
         // Add to the preceding processing group to preserve tool-call association,
         // then also open a standalone clarification group for prominent display.
         lastOpenGroup()?.messages.push(message);
         groups.push({
           id: message.id,
           type: "assistant:clarification",
-          messages: [message],
-        });
-      } else if (isSetupAgentApprovalToolMessage(message)) {
-        lastOpenGroup()?.messages.push(message);
-        groups.push({
-          id: message.id,
-          type: "assistant:setup-agent-approval",
-          messages: [message],
-        });
-      } else {
+          messages: [message],
+        });
+      } else if (isSetupAgentApprovalToolMessage(message)) {
+        lastOpenGroup()?.messages.push(message);
+        groups.push({
+          id: message.id,
+          type: "assistant:setup-agent-approval",
+          messages: [message],
+        });
+      } else {
         const open = lastOpenGroup();
         if (open) {
           open.messages.push(message);
@@ -297,19 +297,19 @@ export function hasPresentFiles(message: Message) {
   );
 }
 
-export function isClarificationToolMessage(message: Message) {
-  return message.type === "tool" && message.name === "ask_clarification";
-}
-
-export function isSetupAgentApprovalToolMessage(message: Message) {
-  return (
-    message.type === "tool" &&
-    message.name === "setup_agent" &&
-    typeof message.additional_kwargs?.setup_agent_approval === "object" &&
-    message.additional_kwargs.setup_agent_approval !== null
-  );
-}
-
+export function isClarificationToolMessage(message: Message) {
+  return message.type === "tool" && message.name === "ask_clarification";
+}
+
+export function isSetupAgentApprovalToolMessage(message: Message) {
+  return (
+    message.type === "tool" &&
+    message.name === "setup_agent" &&
+    typeof message.additional_kwargs?.setup_agent_approval === "object" &&
+    message.additional_kwargs.setup_agent_approval !== null
+  );
+}
+
 export function extractPresentFilesFromMessage(message: Message) {
   if (message.type !== "ai" || !hasPresentFiles(message)) {
     return [];
@@ -372,6 +372,13 @@ export function stripUploadedFilesTag(content: string): string {
     .trim();
 }
 
+/** Strip injected <artifact ...>...</artifact> blocks from human message display. */
+export function stripArtifactTag(content: string): string {
+  return content
+    .replace(/<artifact[^>]*>[\s\S]*?<\/artifact>/g, "")
+    .trim();
+}
+
 export function parseUploadedFiles(content: string): FileInMessage[] {
   // Match <uploaded_files>...</uploaded_files> tag
   const uploadedFilesRegex = /<uploaded_files>([\s\S]*?)<\/uploaded_files>/;
diff --git a/frontend-web/src/env.ts b/frontend-web/src/env.ts
index 7e7b7254..e387c0f2 100644
--- a/frontend-web/src/env.ts
+++ b/frontend-web/src/env.ts
@@ -4,6 +4,7 @@ function readEnv(
   key:
     | "VITE_BACKEND_BASE_URL"
     | "VITE_LANGGRAPH_BASE_URL"
+    | "VITE_CANVAS_LANGGRAPH_BASE_URL"
     | "VITE_STATIC_WEBSITE_ONLY"
     | "VITE_GITHUB_OAUTH_TOKEN",
 ): EnvValue {
@@ -14,6 +15,9 @@ function readEnv(
 export const env = {
   NEXT_PUBLIC_BACKEND_BASE_URL: readEnv("VITE_BACKEND_BASE_URL"),
   NEXT_PUBLIC_LANGGRAPH_BASE_URL: readEnv("VITE_LANGGRAPH_BASE_URL"),
+  // Canvas page uses its own LangGraph base URL so it can be independently
+  // routed (e.g. a separate canvas-agent server). Falls back to the main URL.
+  NEXT_PUBLIC_CANVAS_LANGGRAPH_BASE_URL: readEnv("VITE_CANVAS_LANGGRAPH_BASE_URL"),
   NEXT_PUBLIC_STATIC_WEBSITE_ONLY: readEnv("VITE_STATIC_WEBSITE_ONLY"),
   GITHUB_OAUTH_TOKEN: readEnv("VITE_GITHUB_OAUTH_TOKEN"),
 };
diff --git a/frontend-web/src/open-canvas/api/ai-writing-article-types.ts b/frontend-web/src/open-canvas/api/ai-writing-article-types.ts
new file mode 100644
index 00000000..68bddd13
--- /dev/null
+++ b/frontend-web/src/open-canvas/api/ai-writing-article-types.ts
@@ -0,0 +1,69 @@
+import { getBackendBaseURL } from '@/core/config';
+import { apiFetch } from '@/core/api';
+
+export interface ArticleType {
+  id: string;
+  key: string;
+  label: string;
+  description: string | null;
+  prompt_hint: string | null;
+  default_word_count: number;
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateArticleTypeRequest {
+  key: string;
+  label: string;
+  description?: string;
+  prompt_hint?: string;
+  default_word_count?: number;
+  sort_order?: number;
+}
+
+export interface UpdateArticleTypeRequest {
+  key?: string;
+  label?: string;
+  description?: string | null;
+  prompt_hint?: string | null;
+  default_word_count?: number;
+  sort_order?: number;
+}
+
+const BASE = () => `${getBackendBaseURL()}/api/ai-writing/article-types`;
+
+export async function listArticleTypes(): Promise<ArticleType[]> {
+  const resp = await apiFetch(BASE());
+  if (!resp.ok) throw new Error(`获取文章类型失败: ${resp.status}`);
+  return resp.json();
+}
+
+export async function createArticleType(data: CreateArticleTypeRequest): Promise<ArticleType> {
+  const resp = await apiFetch(BASE(), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  if (resp.status === 409) throw new Error(`文章类型标识 "${data.key}" 已存在`);
+  if (!resp.ok) throw new Error(`创建文章类型失败: ${resp.status}`);
+  return resp.json();
+}
+
+export async function updateArticleType(id: string, data: UpdateArticleTypeRequest): Promise<ArticleType> {
+  const resp = await apiFetch(`${BASE()}/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  if (resp.status === 409) throw new Error(`文章类型标识已存在`);
+  if (resp.status === 404) throw new Error(`文章类型不存在`);
+  if (!resp.ok) throw new Error(`更新文章类型失败: ${resp.status}`);
+  return resp.json();
+}
+
+export async function deleteArticleType(id: string): Promise<void> {
+  const resp = await apiFetch(`${BASE()}/${id}`, { method: 'DELETE' });
+  if (resp.status === 404) throw new Error(`文章类型不存在`);
+  if (!resp.ok) throw new Error(`删除文章类型失败: ${resp.status}`);
+}
diff --git a/frontend-web/src/open-canvas/api/ai-writing-sessions.ts b/frontend-web/src/open-canvas/api/ai-writing-sessions.ts
new file mode 100644
index 00000000..eae5cad8
--- /dev/null
+++ b/frontend-web/src/open-canvas/api/ai-writing-sessions.ts
@@ -0,0 +1,73 @@
+import { getBackendBaseURL } from '@/core/config';
+import { apiFetch } from '@/core/api';
+
+import type { ProgressEvent, CompletedIntervention } from '../types/ai-writing';
+
+export interface AIWritingSessionSummary {
+  id: string;
+  user_id: string | null;
+  title: string;
+  user_intent: string | null;
+  status: string;
+  draft_title: string | null;
+  draft_markdown: string | null;
+  completed_interventions: CompletedInterventionRecord[] | null;
+  review_result: Record<string, unknown> | null;
+  transcript: AIWritingTranscript | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CompletedInterventionRecord {
+  pausePoint: string;
+  action: string;
+  timestamp: string;
+}
+
+/** 完整对话时间线快照：与实时对话用同一份数据结构，历史回显时直接喂给 AIWritingTimeline。 */
+export interface AIWritingTranscript {
+  progressEvents: ProgressEvent[];
+  completedInterventions: CompletedIntervention[];
+}
+
+const BASE = () => `${getBackendBaseURL()}/api/ai-writing/sessions`;
+
+export async function listAIWritingSessions(): Promise<AIWritingSessionSummary[]> {
+  const resp = await apiFetch(BASE());
+  if (!resp.ok) throw new Error(`获取历史记录失败: ${resp.status}`);
+  return resp.json();
+}
+
+export async function getAIWritingSession(id: string): Promise<AIWritingSessionSummary> {
+  const resp = await apiFetch(`${BASE()}/${id}`);
+  if (!resp.ok) throw new Error(`获取会话失败: ${resp.status}`);
+  return resp.json();
+}
+
+export async function renameAIWritingSession(id: string, title: string): Promise<AIWritingSessionSummary> {
+  const resp = await apiFetch(`${BASE()}/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title }),
+  });
+  if (!resp.ok) throw new Error(`重命名失败: ${resp.status}`);
+  return resp.json();
+}
+
+export async function deleteAIWritingSession(id: string): Promise<void> {
+  const resp = await apiFetch(`${BASE()}/${id}`, { method: 'DELETE' });
+  if (!resp.ok) throw new Error(`删除失败: ${resp.status}`);
+}
+
+/** 保存会话的完整对话时间线，供历史回显出与实时对话一致的富时间线。 */
+export async function saveAIWritingTranscript(
+  id: string,
+  transcript: AIWritingTranscript,
+): Promise<void> {
+  const resp = await apiFetch(`${BASE()}/${id}/transcript`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ transcript }),
+  });
+  if (!resp.ok) throw new Error(`保存对话时间线失败: ${resp.status}`);
+}
diff --git a/frontend-web/src/open-canvas/api/ai-writing.ts b/frontend-web/src/open-canvas/api/ai-writing.ts
new file mode 100644
index 00000000..0305eecb
--- /dev/null
+++ b/frontend-web/src/open-canvas/api/ai-writing.ts
@@ -0,0 +1,208 @@
+import { getBackendBaseURL } from '@/core/config';
+import { apiFetch } from '@/core/api';
+
+import type {
+  AIWritingRequest,
+  ProgressEvent,
+  ProgressEventType,
+  UserInterventionPayload,
+} from '../types/ai-writing';
+
+const BASE = () => `${getBackendBaseURL()}/api/ai-writing`;
+
+/** 启动写作流程，返回 session_id */
+export async function startWritingSession(req: AIWritingRequest): Promise<string> {
+  const resp = await apiFetch(`${BASE()}/start`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      user_intent: req.userIntent,
+      article_type: req.articleType,
+      target_audience: req.targetAudience,
+      word_count_target: req.wordCountTarget,
+      model_name: req.modelName ?? '',
+    }),
+  });
+  if (!resp.ok) throw new Error(`启动失败: ${resp.status}`);
+  const data = await resp.json();
+  return data.session_id;
+}
+
+const SSE_EVENT_TYPES: ProgressEventType[] = [
+  'connected', 'step_start', 'step_done', 'research_progress',
+  'materials_ready', 'outline_chunk', 'outline_ready',
+  'draft_chunk', 'draft_ready',
+  'review_chunk', 'review_item_done', 'review_ready',
+  'await_user', 'resumed', 'notice', 'done', 'error',
+];
+
+// ── 后端返回 snake_case，前端类型是 camelCase，统一在此转换 ──────────────────
+
+function normalizeMaterial(m: Record<string, unknown>): Record<string, unknown> {
+  return {
+    ...m,
+    relevanceScore: m.relevance_score ?? m.relevanceScore ?? 0,
+    publishedAt:    m.published_at   ?? m.publishedAt   ?? '',
+    sourceType:     m.source_type    ?? m.sourceType     ?? 'internet',
+    recUuid:        m.recUuid        ?? m.rec_uuid       ?? '',
+  };
+}
+
+function normalizeOutlineSection(s: Record<string, unknown>): Record<string, unknown> {
+  return {
+    ...s,
+    sectionTitle: s.section_title ?? s.sectionTitle ?? '',
+    keyPoints:    s.key_points    ?? s.keyPoints    ?? [],
+    materialIds:  s.material_ids  ?? s.materialIds  ?? [],
+  };
+}
+
+function normalizeOutline(o: unknown): unknown {
+  if (!o || typeof o !== 'object') return o;
+  const obj = o as Record<string, unknown>;
+  const sections = Array.isArray(obj.sections)
+    ? obj.sections.map((s: unknown) => normalizeOutlineSection(s as Record<string, unknown>))
+    : [];
+  return { ...obj, sections };
+}
+
+function normalizeReviewIssue(i: Record<string, unknown>): Record<string, unknown> {
+  return { ...i };
+}
+
+function normalizeReviewResult(r: unknown): unknown {
+  if (!r || typeof r !== 'object') return r;
+  const obj = r as Record<string, unknown>;
+  return {
+    ...obj,
+    factScore:      obj.fact_score      ?? obj.factScore      ?? 0,
+    logicScore:     obj.logic_score     ?? obj.logicScore     ?? 0,
+    languageScore:  obj.language_score  ?? obj.languageScore  ?? 0,
+    overallScore:   obj.overall_score   ?? obj.overallScore   ?? 0,
+    passThreshold:  obj.pass_threshold  ?? obj.passThreshold  ?? 75,
+    revisionNotes: Array.isArray(obj.revision_notes)
+      ? obj.revision_notes.map((x: unknown) => normalizeReviewIssue(x as Record<string, unknown>))
+      : Array.isArray(obj.revisionNotes)
+        ? obj.revisionNotes
+        : [],
+  };
+}
+
+function normalizeEvent(parsed: Record<string, unknown>): Partial<ProgressEvent> {
+  const out: Record<string, unknown> = { ...parsed };
+
+  // 通用字段
+  if ('agent_name'  in out) { out.agentName  = out.agent_name;  }
+  if ('pause_point' in out) { out.pausePoint = out.pause_point; }
+
+  // materials 数组（materials_ready 和 await_user 里都可能有）
+  if (Array.isArray(out.materials)) {
+    out.materials = out.materials.map((m: unknown) =>
+      normalizeMaterial(m as Record<string, unknown>)
+    );
+  }
+
+  // outline
+  if (out.outline) out.outline = normalizeOutline(out.outline);
+
+  // draft_ready: 后端发 "title"/"markdown"，前端期望 draftTitle/draftMarkdown
+  if ('markdown' in out && !out.draftMarkdown) out.draftMarkdown = out.markdown;
+  if ('title'    in out && !out.draftTitle)    out.draftTitle    = out.title;
+  if ('revision_count' in out) out.revisionCount = out.revision_count;
+
+  // review_ready
+  if (out.review_result)  out.reviewResult  = normalizeReviewResult(out.review_result);
+  if (out.reviewResult && !out.review_result) out.reviewResult = normalizeReviewResult(out.reviewResult);
+
+  // review_item_done (streaming per-category result from sse_queue)
+  if ('category' in out) out.reviewItemCategory = out.category;
+  if ('score'    in out) out.reviewItemScore    = out.score;
+  if ('issues'   in out && Array.isArray(out.issues)) {
+    out.reviewItemIssues = out.issues.map((x: unknown) =>
+      normalizeReviewIssue(x as Record<string, unknown>)
+    );
+  }
+
+  return out as Partial<ProgressEvent>;
+}
+
+/** 监听 SSE 进度流，使用 fetch + ReadableStream 以支持认证头 */
+export function subscribeToProgress(
+  sessionId: string,
+  onEvent: (event: ProgressEvent) => void,
+  signal?: AbortSignal,
+): () => void {
+  let stopped = false;
+
+  apiFetch(`${BASE()}/${sessionId}/stream`, { signal })
+    .then(async (response) => {
+      if (!response.ok || !response.body) return;
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+      let currentType = '';
+      let currentData = '';
+
+      while (!stopped) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() ?? '';
+
+        for (const line of lines) {
+          if (line.startsWith('event: ')) {
+            currentType = line.slice(7).trim();
+          } else if (line.startsWith('data: ')) {
+            currentData = line.slice(6).trim();
+          } else if (line === '' && currentType && currentData) {
+            if (SSE_EVENT_TYPES.includes(currentType as ProgressEventType)) {
+              try {
+                const parsed = JSON.parse(currentData);
+                const normalized = normalizeEvent(parsed);
+                onEvent({
+                  type: currentType as ProgressEventType,
+                  sessionId,
+                  message: '',
+                  ...normalized,
+                } as ProgressEvent);
+              } catch {
+                // malformed JSON — skip
+              }
+            }
+            currentType = '';
+            currentData = '';
+          }
+        }
+      }
+
+      reader.releaseLock();
+    })
+    .catch(() => {});
+
+  return () => { stopped = true; };
+}
+
+/** 提交用户干预决策，恢复暂停的流程 */
+export async function resumeWriting(
+  sessionId: string,
+  payload: UserInterventionPayload,
+): Promise<void> {
+  const resp = await apiFetch(`${BASE()}/${sessionId}/resume`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      action: payload.action,
+      approved_material_ids: payload.approvedMaterialIds ?? [],
+      extra_keywords: payload.extraKeywords ?? [],
+      edited_outline: payload.editedOutline ?? null,
+      outline_feedback: payload.outlineFeedback ?? '',
+      user_revision_notes: payload.userRevisionNotes ?? '',
+      override_verdict: payload.overrideVerdict ?? false,
+      selected_issue_indices: payload.selectedIssueIndices ?? null,
+    }),
+  });
+  if (!resp.ok) throw new Error(`提交干预失败: ${resp.status}`);
+}
diff --git a/frontend-web/src/open-canvas/api/rewrite.ts b/frontend-web/src/open-canvas/api/rewrite.ts
new file mode 100644
index 00000000..cae36bdd
--- /dev/null
+++ b/frontend-web/src/open-canvas/api/rewrite.ts
@@ -0,0 +1,106 @@
+import { apiFetch } from "@/core/api/fetch-client";
+import { getBackendBaseURL } from "@/core/config";
+
+export type RewriteAction = "polish" | "expand" | "shorten" | "tone";
+export type RewriteTone =
+  | "professional"
+  | "casual"
+  | "readable"
+  | "academic"
+  | "expressive";
+
+export interface RewriteRequest {
+  threadId?: string | null;
+  selection: { from: number; to: number; text: string };
+  action: RewriteAction;
+  tone?: RewriteTone;
+  modelName?: string;
+  surroundingContext?: { before?: string; after?: string };
+  customInstruction?: string;
+  followUpInstruction?: string;
+  previousResult?: string;
+}
+
+export type RewriteStreamEvent =
+  | { type: "thinking"; chunk: string }
+  | { type: "text"; chunk: string }
+  | { type: "done" }
+  | { type: "error"; message: string };
+
+// ── SSE parser ────────────────────────────────────────────────────────────────
+
+async function* parseSse(body: ReadableStream<Uint8Array>): AsyncGenerator<{ event: string; data: string }> {
+  const reader = body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let currentEvent = "";
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+
+      const lines = buffer.split("\n");
+      buffer = lines.pop() ?? "";
+
+      for (const line of lines) {
+        const trimmed = line.trimEnd();
+        if (trimmed.startsWith("event: ")) {
+          currentEvent = trimmed.slice(7);
+        } else if (trimmed.startsWith("data: ")) {
+          yield { event: currentEvent, data: trimmed.slice(6) };
+          currentEvent = "";
+        }
+        // empty line resets event field (SSE spec)
+        else if (trimmed === "") {
+          currentEvent = "";
+        }
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+
+// ── Streaming entry point ─────────────────────────────────────────────────────
+
+export async function* streamRewrite(
+  req: RewriteRequest,
+  signal?: AbortSignal,
+): AsyncGenerator<RewriteStreamEvent> {
+  const res = await apiFetch(`${getBackendBaseURL()}/api/writing/rewrite`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(req),
+    signal,
+  });
+
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({})) as Record<string, unknown>;
+    const msg = (body?.detail as string | undefined) ?? (body?.message as string | undefined) ?? `HTTP ${res.status}`;
+    throw new Error(msg);
+  }
+
+  if (!res.body) throw new Error("No response body");
+
+  for await (const { event, data } of parseSse(res.body)) {
+    if (signal?.aborted) return;
+    try {
+      const parsed = JSON.parse(data) as Record<string, unknown>;
+      if (event === "thinking") {
+        yield { type: "thinking", chunk: parsed.chunk as string };
+      } else if (event === "text") {
+        yield { type: "text", chunk: parsed.chunk as string };
+      } else if (event === "done") {
+        yield { type: "done" };
+        return;
+      } else if (event === "error") {
+        yield { type: "error", message: parsed.message as string };
+        return;
+      }
+    } catch {
+      // skip malformed frame
+    }
+  }
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingDraftPanel.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingDraftPanel.tsx
new file mode 100644
index 00000000..dc39da2e
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingDraftPanel.tsx
@@ -0,0 +1,59 @@
+import { FileText, PenLine } from 'lucide-react';
+
+import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
+import { getCurrentArtifactContent, isCodeArtifact } from '../../utils/artifact';
+import { TextArtifactRenderer } from '../artifact/TextArtifactRenderer';
+import type { CanvasArtifactText } from '../../types/artifact';
+
+function DraftWaitingPlaceholder() {
+  return (
+    <div className="h-full flex flex-col items-center justify-center gap-5 select-none">
+      <div className="relative">
+        <div className="w-16 h-16 rounded-2xl bg-muted/60 flex items-center justify-center">
+          <FileText className="w-8 h-8 text-muted-foreground/40" />
+        </div>
+        <div className="absolute -bottom-1.5 -right-1.5 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
+          <PenLine className="w-3.5 h-3.5 text-primary/60" />
+        </div>
+      </div>
+      <div className="text-center space-y-1.5 max-w-[200px]">
+        <p className="text-sm font-medium text-foreground/60">草稿将在此处显示</p>
+        <p className="text-[11px] text-muted-foreground leading-relaxed">
+          完成写作流程后，AI 生成的内容将实时出现在这里
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function AIWritingDraftPanel() {
+  const { artifact } = useCanvasGraphContext();
+
+  if (!artifact) {
+    return (
+      <div className="h-full bg-muted/10 border-l">
+        <DraftWaitingPlaceholder />
+      </div>
+    );
+  }
+
+  const content = getCurrentArtifactContent(artifact);
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden border-l">
+      {/* 标题栏 */}
+      <div className="h-10 border-b flex items-center gap-2 px-4 shrink-0 bg-muted/20">
+        <FileText className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+        <span className="text-sm font-medium truncate flex-1">
+          {content?.title ?? '草稿预览'}
+        </span>
+      </div>
+
+      <div className="flex-1 overflow-hidden">
+        {content && !isCodeArtifact(content) ? (
+          <TextArtifactRenderer content={content as CanvasArtifactText} />
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingForm.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingForm.tsx
new file mode 100644
index 00000000..3beecdcd
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingForm.tsx
@@ -0,0 +1,201 @@
+import { useEffect, useState } from 'react';
+import { PenLine } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { getBackendBaseURL } from '@/core/config';
+import { apiFetch } from '@/core/api';
+
+import type { AIWritingRequest } from '../../types/ai-writing';
+import { useArticleTypes } from '../../hooks/useArticleTypes';
+
+interface AIWritingFormProps {
+  onSubmit: (req: AIWritingRequest) => void;
+  disabled?: boolean;
+}
+
+interface ModelOption {
+  name: string;
+  displayName: string;
+}
+
+const INPUT_CLASS =
+  'flex h-8 w-full rounded-md border border-input bg-background px-3 py-1 text-xs shadow-sm ' +
+  'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 ' +
+  'focus-visible:ring-ring disabled:opacity-50';
+
+export function AIWritingForm({ onSubmit, disabled }: AIWritingFormProps) {
+  const [intent, setIntent] = useState('');
+  const [articleType, setArticleType] = useState('analysis');
+  const [audience, setAudience] = useState('普通读者');
+  const [wordCountInput, setWordCountInput] = useState('800');
+  const [modelName, setModelName] = useState('');
+  const [models, setModels] = useState<ModelOption[]>([]);
+
+  const { articleTypes, loading: typesLoading, refresh: refreshTypes } = useArticleTypes();
+
+  // 初始化时加载文章类型
+  useEffect(() => {
+    refreshTypes();
+  }, [refreshTypes]);
+
+  // 类型加载完成后：若当前选中值不在列表中则切换为第一项
+  useEffect(() => {
+    if (articleTypes.length === 0) return;
+    const keys = articleTypes.map((t) => t.key);
+    if (!keys.includes(articleType)) {
+      const first = articleTypes[0];
+      setArticleType(first.key);
+      setWordCountInput(String(first.default_word_count));
+    }
+  }, [articleTypes]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 切换文章类型时自动填入该类型的默认字数
+  function handleArticleTypeChange(key: string) {
+    setArticleType(key);
+    const found = articleTypes.find((t) => t.key === key);
+    if (found) {
+      setWordCountInput(String(found.default_word_count));
+    }
+  }
+
+  useEffect(() => {
+    apiFetch(`${getBackendBaseURL()}/api/models`)
+      .then((r) => r.json())
+      .then((data) => {
+        const list: ModelOption[] = (data.models ?? []).map(
+          (m: { name: string; display_name?: string }) => ({
+            name: m.name,
+            displayName: m.display_name || m.name,
+          }),
+        );
+        setModels(list);
+        if (list.length > 0 && !modelName) {
+          setModelName(list[0].name);
+        }
+      })
+      .catch(() => {});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function handleWordCountBlur() {
+    const num = parseInt(wordCountInput, 10);
+    if (isNaN(num) || num < 100) {
+      setWordCountInput('800');
+    } else {
+      setWordCountInput(String(num));
+    }
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!intent.trim()) return;
+    const wordCount = Math.max(100, parseInt(wordCountInput, 10) || 800);
+    onSubmit({
+      userIntent: intent.trim(),
+      articleType,
+      targetAudience: audience.trim() || '普通读者',
+      wordCountTarget: wordCount,
+      modelName: modelName || undefined,
+    });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-3 px-4 py-4">
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-muted-foreground">写作意图</label>
+        <Textarea
+          placeholder="描述你想写的文章，例如：写一篇分析今年 AI 大模型发展趋势的文章，重点关注国内企业的布局…"
+          value={intent}
+          onChange={(e) => setIntent(e.target.value)}
+          disabled={disabled}
+          rows={4}
+          className="resize-none text-sm"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-2">
+        <div className="space-y-1.5">
+          <label className="text-xs font-medium text-muted-foreground">文章类型</label>
+          <Select
+            value={articleType}
+            onValueChange={handleArticleTypeChange}
+            disabled={disabled || typesLoading}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder={typesLoading ? '加载中…' : '选择类型'} />
+            </SelectTrigger>
+            <SelectContent>
+              {articleTypes.map((t) => (
+                <SelectItem key={t.key} value={t.key} className="text-xs">
+                  {t.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="text-xs font-medium text-muted-foreground">目标字数（字）</label>
+          <input
+            type="number"
+            min={100}
+            step={100}
+            className={INPUT_CLASS}
+            placeholder="800"
+            value={wordCountInput}
+            onChange={(e) => setWordCountInput(e.target.value)}
+            onBlur={handleWordCountBlur}
+            disabled={disabled}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-muted-foreground">目标读者</label>
+        <input
+          type="text"
+          className={INPUT_CLASS}
+          placeholder="普通读者 / 行业专家 / 政策决策者…"
+          value={audience}
+          onChange={(e) => setAudience(e.target.value)}
+          disabled={disabled}
+        />
+      </div>
+
+      {models.length > 0 && (
+        <div className="space-y-1.5">
+          <label className="text-xs font-medium text-muted-foreground">写作模型</label>
+          <Select
+            value={modelName}
+            onValueChange={setModelName}
+            disabled={disabled}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder="选择模型…" />
+            </SelectTrigger>
+            <SelectContent>
+              {models.map((m) => (
+                <SelectItem key={m.name} value={m.name} className="text-xs">
+                  {m.displayName}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      <Button type="submit" disabled={disabled || !intent.trim()} className="w-full h-8 text-xs gap-1.5">
+        <PenLine className="size-3.5" />
+        开始 AI 写作
+      </Button>
+    </form>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingHistoryDropdown.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingHistoryDropdown.tsx
new file mode 100644
index 00000000..6d4c925e
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingHistoryDropdown.tsx
@@ -0,0 +1,202 @@
+import { useState, useRef, useEffect } from 'react';
+import { History, Trash2, Check, X, RefreshCw } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import type { AIWritingSessionSummary } from '../../api/ai-writing-sessions';
+
+const STATUS_LABELS: Record<string, { label: string; color: string }> = {
+  in_progress: { label: '进行中', color: 'text-blue-500' },
+  draft_ready:  { label: '草稿', color: 'text-amber-500' },
+  review_ready: { label: '审核', color: 'text-purple-500' },
+  done:         { label: '完成', color: 'text-green-500' },
+  error:        { label: '错误', color: 'text-destructive' },
+};
+
+function formatRelative(isoStr: string): string {
+  const ms = Date.now() - new Date(isoStr).getTime();
+  const mins = Math.floor(ms / 60000);
+  if (mins < 1)  return '刚刚';
+  if (mins < 60) return `${mins} 分钟前`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs  < 24) return `${hrs} 小时前`;
+  const days = Math.floor(hrs / 24);
+  if (days < 7)  return `${days} 天前`;
+  return new Date(isoStr).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
+}
+
+interface SessionItemProps {
+  session: AIWritingSessionSummary;
+  isSelected: boolean;
+  onSelect: () => void;
+  onDelete: () => void;
+  onRename: (title: string) => void;
+}
+
+function SessionItem({ session, isSelected, onSelect, onDelete, onRename }: SessionItemProps) {
+  const [editing, setEditing] = useState(false);
+  const [editValue, setEditValue] = useState(session.title);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { label, color } = STATUS_LABELS[session.status] ?? { label: session.status, color: 'text-muted-foreground' };
+
+  useEffect(() => {
+    if (editing) inputRef.current?.focus();
+  }, [editing]);
+
+  function commitRename() {
+    const trimmed = editValue.trim();
+    if (trimmed && trimmed !== session.title) onRename(trimmed);
+    setEditing(false);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Enter') commitRename();
+    else if (e.key === 'Escape') { setEditValue(session.title); setEditing(false); }
+  }
+
+  return (
+    <div
+      className={cn(
+        'group relative flex items-start gap-2 px-3 py-2.5 cursor-pointer transition-colors',
+        isSelected ? 'bg-accent' : 'hover:bg-accent/60',
+      )}
+      onClick={!editing ? onSelect : undefined}
+    >
+      <div className="flex-1 min-w-0">
+        {editing ? (
+          <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+            <input
+              ref={inputRef}
+              className="flex-1 text-xs bg-background border rounded px-1.5 py-0.5 outline-none focus:ring-1 focus:ring-ring"
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+            />
+            <button className="shrink-0 text-green-500 hover:text-green-600" onClick={commitRename}>
+              <Check className="w-3 h-3" />
+            </button>
+            <button className="shrink-0 text-muted-foreground hover:text-foreground" onClick={() => { setEditValue(session.title); setEditing(false); }}>
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+        ) : (
+          <p
+            className="text-xs font-medium truncate leading-snug"
+            onDoubleClick={(e) => { e.stopPropagation(); setEditing(true); }}
+            title="双击重命名"
+          >
+            {session.title}
+          </p>
+        )}
+        <div className="flex items-center gap-1.5 mt-0.5">
+          <span className={cn('text-[10px] font-medium', color)}>{label}</span>
+          <span className="text-[10px] text-muted-foreground">·</span>
+          <span className="text-[10px] text-muted-foreground">{formatRelative(session.updated_at)}</span>
+        </div>
+      </div>
+
+      {/* 删除按钮，hover 时显示 */}
+      {!editing && (
+        <button
+          className="opacity-0 group-hover:opacity-100 shrink-0 p-0.5 text-muted-foreground hover:text-destructive transition-opacity"
+          onClick={(e) => { e.stopPropagation(); onDelete(); }}
+          title="删除"
+        >
+          <Trash2 className="w-3 h-3" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface AIWritingHistoryDropdownProps {
+  sessions: AIWritingSessionSummary[];
+  selectedId: string | null;
+  loading: boolean;
+  onSelect: (session: AIWritingSessionSummary) => void;
+  onDelete: (id: string) => void;
+  onRename: (id: string, title: string) => void;
+  onRefresh: () => void;
+}
+
+export function AIWritingHistoryDropdown({
+  sessions,
+  selectedId,
+  loading,
+  onSelect,
+  onDelete,
+  onRename,
+  onRefresh,
+}: AIWritingHistoryDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  function handleOpen() {
+    setOpen((v) => {
+      if (!v) onRefresh();
+      return !v;
+    });
+  }
+
+  return (
+    <div ref={containerRef} className="relative">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-7 px-2 text-xs gap-1"
+        onClick={handleOpen}
+        title="查看历史记录"
+      >
+        <History className="size-3" />
+        历史
+      </Button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-1 z-50 w-64 rounded-lg border bg-popover shadow-lg overflow-hidden">
+          {/* 头部 */}
+          <div className="flex items-center justify-between px-3 py-2 border-b">
+            <span className="text-xs font-semibold">写作历史</span>
+            <button
+              className={cn('text-muted-foreground hover:text-foreground transition-transform', loading && 'animate-spin')}
+              onClick={onRefresh}
+              title="刷新"
+            >
+              <RefreshCw className="w-3 h-3" />
+            </button>
+          </div>
+
+          {/* 列表 */}
+          <div className="max-h-72 overflow-y-auto">
+            {sessions.length === 0 ? (
+              <div className="text-center py-6 text-xs text-muted-foreground">
+                {loading ? '加载中…' : '暂无历史记录'}
+              </div>
+            ) : (
+              sessions.map((s) => (
+                <SessionItem
+                  key={s.id}
+                  session={s}
+                  isSelected={s.id === selectedId}
+                  onSelect={() => { onSelect(s); setOpen(false); }}
+                  onDelete={() => onDelete(s.id)}
+                  onRename={(title) => onRename(s.id, title)}
+                />
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingHistoryView.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingHistoryView.tsx
new file mode 100644
index 00000000..04a70a25
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingHistoryView.tsx
@@ -0,0 +1,131 @@
+import { CheckCircle2, ChevronRight, FileText, Search, PenLine, ClipboardEdit, Star } from 'lucide-react';
+
+import type { AIWritingSessionSummary, CompletedInterventionRecord } from '../../api/ai-writing-sessions';
+import { AIWritingTimeline } from './AIWritingTimeline';
+
+const PAUSE_LABELS: Record<string, string> = {
+  material_confirm: '素材确认',
+  outline_confirm:  '大纲确认',
+  draft_confirm:    '草稿确认',
+  review_confirm:   '编辑意见处理',
+};
+
+const ACTION_LABELS: Record<string, string> = {
+  approve:        '已批准',
+  re_search:      '重新搜索',
+  re_outline:     '重新规划',
+  finalize:       '直接定稿',
+  to_editor:      '提交审核',
+  user_revise:    '手动修改',
+  accept_review:  '接受意见',
+  force_finalize: '强制定稿',
+};
+
+const PAUSE_ICONS: Record<string, React.ElementType> = {
+  material_confirm: Search,
+  outline_confirm:  PenLine,
+  draft_confirm:    FileText,
+  review_confirm:   ClipboardEdit,
+};
+
+function InterventionTimelineItem({ record, isLast }: { record: CompletedInterventionRecord; isLast: boolean }) {
+  const Icon = PAUSE_ICONS[record.pausePoint] ?? CheckCircle2;
+  const ts = record.timestamp
+    ? new Date(record.timestamp).toLocaleString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+    : '';
+
+  return (
+    <div className="flex gap-3">
+      <div className="flex flex-col items-center">
+        <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
+          <Icon className="w-3 h-3 text-primary" />
+        </div>
+        {!isLast && <div className="w-px flex-1 bg-border/60 mt-1" />}
+      </div>
+      <div className="pb-4 min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-medium">
+            {PAUSE_LABELS[record.pausePoint] ?? record.pausePoint}
+          </span>
+          <ChevronRight className="w-3 h-3 text-muted-foreground" />
+          <span className="text-xs text-primary font-medium">
+            {ACTION_LABELS[record.action] ?? record.action}
+          </span>
+        </div>
+        {ts && <p className="text-[10px] text-muted-foreground mt-0.5">{ts}</p>}
+      </div>
+    </div>
+  );
+}
+
+interface AIWritingHistoryViewProps {
+  session: AIWritingSessionSummary;
+}
+
+export function AIWritingHistoryView({ session }: AIWritingHistoryViewProps) {
+  const interventions = session.completed_interventions ?? [];
+  const transcript = session.transcript;
+  // 有完整时间线快照时，复用实时对话的 AIWritingTimeline 渲染，保证回显与实时一致
+  const hasTranscript = !!transcript && (transcript.progressEvents?.length ?? 0) > 0;
+  const createdAt = session.created_at
+    ? new Date(session.created_at).toLocaleString('zh-CN', {
+        year: 'numeric', month: 'short', day: 'numeric',
+        hour: '2-digit', minute: '2-digit',
+      })
+    : '';
+
+  return (
+    <div className="flex-1 overflow-y-auto">
+      {/* 元信息 */}
+      <div className="px-4 pt-3">
+        <div className="rounded-lg border bg-muted/30 px-3 py-2.5 space-y-1">
+          <p className="text-xs font-semibold truncate">{session.draft_title ?? session.title}</p>
+          {session.user_intent && (
+            <p className="text-[11px] text-muted-foreground leading-relaxed line-clamp-2">
+              {session.user_intent}
+            </p>
+          )}
+          {createdAt && (
+            <p className="text-[10px] text-muted-foreground">{createdAt}</p>
+          )}
+        </div>
+      </div>
+
+      {hasTranscript ? (
+        /* 完整对话时间线回显 */
+        <AIWritingTimeline
+          events={transcript!.progressEvents}
+          completedInterventions={transcript!.completedInterventions ?? []}
+          currentPause={null}
+        />
+      ) : (
+        /* 旧会话无时间线快照时，回退到精简阶段列表 */
+        <div className="px-4 py-3 space-y-4">
+          {interventions.length > 0 ? (
+            <div>
+              <p className="text-[11px] font-medium text-muted-foreground mb-2">写作阶段</p>
+              <div>
+                {interventions.map((rec, i) => (
+                  <InterventionTimelineItem
+                    key={i}
+                    record={rec}
+                    isLast={i === interventions.length - 1}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div className="text-center py-4 text-xs text-muted-foreground">无阶段记录</div>
+          )}
+
+          {session.status === 'done' && (
+            <div className="flex items-center gap-2 text-xs text-green-600 dark:text-green-400">
+              <Star className="w-3.5 h-3.5" />
+              <span>写作完成</span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPageHeader.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPageHeader.tsx
new file mode 100644
index 00000000..0925c3f6
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPageHeader.tsx
@@ -0,0 +1,41 @@
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, PenLine } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
+import { getCurrentArtifactContent } from '../../utils/artifact';
+
+export function AIWritingPageHeader() {
+  const navigate = useNavigate();
+  const { artifact } = useCanvasGraphContext();
+  const currentContent = getCurrentArtifactContent(artifact);
+
+  return (
+    <div className="h-11 border-b flex items-center px-3 gap-2 shrink-0 bg-background">
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7 shrink-0"
+        onClick={() => navigate('/page/canvas')}
+        title="返回 Canvas 列表"
+      >
+        <ArrowLeft className="h-4 w-4" />
+      </Button>
+
+      <Separator orientation="vertical" className="h-4" />
+
+      <PenLine className="h-4 w-4 text-primary shrink-0" />
+      <span className="text-sm font-semibold">AI 智能写作</span>
+
+      {currentContent?.title && (
+        <>
+          <Separator orientation="vertical" className="h-4" />
+          <span className="text-sm text-muted-foreground truncate">
+            {currentContent.title}
+          </span>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
new file mode 100644
index 00000000..92d4adb8
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx
@@ -0,0 +1,388 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ChevronsDown, Play, Plus, RotateCcw, Settings2, Square } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
+import { useAIWriting } from '../../hooks/useAIWriting';
+import { useAIWritingSessions } from '../../hooks/useAIWritingSessions';
+import { AIWritingForm } from './AIWritingForm';
+import { AIWritingTimeline } from './AIWritingTimeline';
+import { InterventionCard } from './InterventionCard';
+import { WritingSkeletonCard } from './WritingSkeletonCard';
+import { DraftStreamingView } from './DraftStreamingView';
+import { OutlineStreamingView } from './OutlineStreamingView';
+import { ReviewStreamingView } from './ReviewStreamingView';
+import { RevisionSummaryCard } from './RevisionSummaryCard';
+import { AIWritingHistoryDropdown } from './AIWritingHistoryDropdown';
+import { AIWritingHistoryView } from './AIWritingHistoryView';
+import type { AIWritingSessionSummary } from '../../api/ai-writing-sessions';
+
+const STATUS_LABEL: Record<string, string> = {
+  idle: '就绪',
+  researching: '素材收集专家搜集素材中…',
+  awaiting_material_confirm: '等待确认素材',
+  writing_outline: '作家规划大纲中…',
+  awaiting_outline_confirm: '等待确认大纲',
+  writing_draft: '作家写作中…',
+  awaiting_draft_confirm: '等待确认草稿',
+  reviewing: '编辑审核中…',
+  awaiting_review_confirm: '等待处理编辑意见',
+  revising: '按意见修改中…',
+  done: '写作完成 ✓',
+  error: '出错了',
+};
+
+export function AIWritingPanel() {
+  const navigate = useNavigate();
+  const { setArtifact } = useCanvasGraphContext();
+  const { state, startWriting, submitIntervention, pauseWriting, resumeWriting, reset } = useAIWriting();
+  const { sessions, loading: sessionsLoading, refresh, rename, remove } = useAIWritingSessions();
+
+  // History view state — null means normal writing mode
+  const [historySession, setHistorySession] = useState<AIWritingSessionSummary | null>(null);
+
+  const isIdle = state.status === 'idle';
+  const isDone = state.status === 'done';
+  const isError = state.status === 'error';
+  const isRunning = !isIdle && !isDone && !isError;
+  const showSkeleton = isRunning && !state.currentPause && !state.isPaused;
+
+  // ── 自动滚底逻辑 ────────────────────────────────────────────────────────────
+  const scrollRef = useRef<HTMLDivElement>(null);
+  // 程序触发滚动时置 true，阻止 scroll 事件误判为用户上划
+  const isAutoScrollingRef = useRef(false);
+  // 同步 ref：让 scroll/wheel 回调可以立即读取最新值，不依赖 state 异步更新
+  const autoScrollRef = useRef(true);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const disableAutoScroll = useCallback(() => {
+    autoScrollRef.current = false;
+    setAutoScroll(false);
+  }, []);
+
+  // 新会话 / 重置后恢复自动滚底
+  useEffect(() => {
+    if (isIdle) {
+      autoScrollRef.current = true;
+      setAutoScroll(true);
+    }
+  }, [isIdle]);
+
+  // 开始写作 / 点击继续后恢复自动滚底
+  useEffect(() => {
+    if (isRunning && !state.isPaused) {
+      autoScrollRef.current = true;
+      setAutoScroll(true);
+    }
+  }, [isRunning, state.isPaused]);
+
+  // 监听用户手动滚动（挂载一次）
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    // wheel 事件：鼠标滚轮 / 触控板，只由用户触发
+    const onWheel = (e: WheelEvent) => {
+      if (e.deltaY < 0) disableAutoScroll(); // 向上滚
+    };
+
+    // scroll 事件：兼容拖动滚动条的场景
+    // 通过对比前后 scrollTop 判断是否向上滚（排除程序触发的向下滚）
+    let lastTop = el.scrollTop;
+    const onScroll = () => {
+      const cur = el.scrollTop;
+      if (!isAutoScrollingRef.current && cur < lastTop - 2) {
+        disableAutoScroll();
+      }
+      lastTop = cur;
+    };
+
+    el.addEventListener('wheel', onWheel, { passive: true });
+    el.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      el.removeEventListener('wheel', onWheel);
+      el.removeEventListener('scroll', onScroll);
+    };
+  }, [disableAutoScroll]);
+
+  // 内容变化时若自动滚底开启则滚到底部
+  useEffect(() => {
+    // 检查同步 ref，避免 state 异步导致的时序竞争
+    if (!autoScrollRef.current || !isRunning || !scrollRef.current) return;
+    const el = scrollRef.current;
+    isAutoScrollingRef.current = true;
+    el.scrollTop = el.scrollHeight;
+    requestAnimationFrame(() => { isAutoScrollingRef.current = false; });
+  }, [
+    autoScroll,   // 点击按钮后重新触发一次
+    isRunning,
+    state.progressEvents.length,
+    state.streamingDraftSections.length,
+    state.streamingReviewItems.length,
+    state.outlineStreamingText,
+    state.currentPause,
+  ]);
+
+  const scrollToBottom = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    isAutoScrollingRef.current = true;
+    el.scrollTop = el.scrollHeight;
+    requestAnimationFrame(() => { isAutoScrollingRef.current = false; });
+    autoScrollRef.current = true;
+    setAutoScroll(true);
+  }, []);
+
+  const handleSelectHistory = useCallback((session: AIWritingSessionSummary) => {
+    setHistorySession(session);
+    // Push historical draft to the right panel
+    if (session.draft_markdown) {
+      setArtifact({
+        currentIndex: 0,
+        contents: [{
+          index: 0,
+          type: 'text',
+          title: session.draft_title ?? session.title,
+          fullMarkdown: session.draft_markdown,
+        }],
+      });
+    } else {
+      setArtifact(null);
+    }
+  }, [setArtifact]);
+
+  const handleNewSession = useCallback(() => {
+    setHistorySession(null);
+    reset();
+  }, [reset]);
+
+  const showNewButton = historySession !== null || state.status !== 'idle';
+
+  // History view mode
+  if (historySession) {
+    return (
+      <div className="flex flex-col h-full overflow-hidden bg-background">
+        <div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
+          <span className="text-sm font-semibold truncate flex-1 min-w-0 mr-2">
+            {historySession.draft_title ?? historySession.title}
+          </span>
+          <div className="flex items-center gap-1.5 shrink-0">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={() => navigate('/page/canvas/article-types')}
+              title="文章类型配置"
+            >
+              <Settings2 className="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1" onClick={handleNewSession}>
+              <Plus className="size-3" />
+              新建对话
+            </Button>
+            <AIWritingHistoryDropdown
+              sessions={sessions}
+              selectedId={historySession.id}
+              loading={sessionsLoading}
+              onSelect={handleSelectHistory}
+              onDelete={remove}
+              onRename={rename}
+              onRefresh={refresh}
+            />
+          </div>
+        </div>
+        <AIWritingHistoryView session={historySession} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden bg-background">
+      {/* 头部 */}
+      <div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
+        <span className="text-sm font-semibold shrink-0">AI 智能写作</span>
+        <div className="flex items-center gap-1.5">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => navigate('/page/canvas/article-types')}
+            title="文章类型配置"
+          >
+            <Settings2 className="size-3.5" />
+          </Button>
+          {showNewButton && (
+            <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1" onClick={handleNewSession}>
+              <Plus className="size-3" />
+              新建
+            </Button>
+          )}
+          {isRunning && !state.isPaused && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-xs gap-1 animate-breathe-stop text-red-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30"
+              onClick={pauseWriting}
+            >
+              <Square className="size-3 fill-current" />
+              停止
+            </Button>
+          )}
+          {state.isPaused && (
+            <>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2 text-xs gap-1 text-primary hover:text-primary hover:bg-primary/8"
+                onClick={resumeWriting}
+              >
+                <Play className="size-3 fill-current" />
+                继续
+              </Button>
+              <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1" onClick={reset}>
+                <RotateCcw className="size-3" />
+                重置
+              </Button>
+            </>
+          )}
+          {(isDone || isError) && (
+            <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1" onClick={reset}>
+              <RotateCcw className="size-3" />
+              重置
+            </Button>
+          )}
+          <AIWritingHistoryDropdown
+            sessions={sessions}
+            selectedId={null}
+            loading={sessionsLoading}
+            onSelect={handleSelectHistory}
+            onDelete={remove}
+            onRename={rename}
+            onRefresh={refresh}
+          />
+        </div>
+      </div>
+
+      {/* 主体：relative 父容器 + absolute 滚动容器，确保滚动容器尺寸始终正确 */}
+      <div className="flex-1 min-h-0 relative">
+      <div ref={scrollRef} className="absolute inset-0 overflow-y-auto">
+        {/* 未开始时显示表单 */}
+        {isIdle && (
+          <AIWritingForm onSubmit={startWriting} />
+        )}
+
+        {/* 运行中或完成后显示时间线 */}
+        {!isIdle && (
+          <AIWritingTimeline
+            events={state.progressEvents}
+            completedInterventions={state.completedInterventions}
+            currentPause={state.currentPause}
+            currentInterventionSlot={
+              state.currentPause ? (
+                <InterventionCard
+                  pauseEvent={state.currentPause}
+                  materials={state.materials}
+                  outline={state.outline}
+                  reviewResult={state.reviewResult}
+                  draftTitle={state.currentDraftTitle}
+                  revisionCount={state.revisionCount}
+                  onSubmit={submitIntervention}
+                  disabled={false}
+                />
+              ) : undefined
+            }
+          />
+        )}
+
+        {/* 大纲流式思考框 */}
+        {state.status === 'writing_outline' && (state.outlineStreamingText || state.outlineThinkingText) && (
+          <OutlineStreamingView text={state.outlineStreamingText} thinkingText={state.outlineThinkingText} />
+        )}
+
+        {/* 编辑审核流式结果 */}
+        {state.status === 'reviewing' && state.streamingReviewItems.length > 0 && (
+          <ReviewStreamingView items={state.streamingReviewItems} />
+        )}
+
+        {/* 修改完成摘要 */}
+        {state.revisionSummary && (
+          <div className="px-4 pb-2">
+            <RevisionSummaryCard summary={state.revisionSummary} />
+          </div>
+        )}
+
+        {/* 草稿流式打字机视图 */}
+        {state.status === 'writing_draft' && state.streamingDraftSections.length > 0 && (
+          <DraftStreamingView
+            title={state.streamingDraftTitle}
+            sections={state.streamingDraftSections}
+          />
+        )}
+
+        {showSkeleton &&
+         state.status !== 'writing_draft' &&
+         !(state.status === 'writing_outline' && (state.outlineStreamingText || state.outlineThinkingText)) &&
+         !(state.status === 'reviewing' && state.streamingReviewItems.length > 0) && (
+          <div className="px-4 pb-4">
+            <WritingSkeletonCard status={state.status} researchProgress={state.researchProgress} />
+          </div>
+        )}
+
+        {state.status === 'writing_draft' && state.streamingDraftSections.length === 0 && (
+          <div className="px-4 pb-4">
+            <WritingSkeletonCard status="writing_draft" />
+          </div>
+        )}
+
+        {isError && state.error && (
+          <div className="mx-4 mt-2 rounded-md bg-destructive/10 px-3 py-2 text-xs text-destructive">
+            {state.error}
+          </div>
+        )}
+      </div>{/* 滚动内容区结束 */}
+
+      {/* 回到底部悬浮按钮：生成中且用户已上划时出现 */}
+      {isRunning && !autoScroll && (
+        <div className="absolute inset-x-0 bottom-4 flex justify-center z-10 pointer-events-none">
+          <button
+            onClick={scrollToBottom}
+            className="pointer-events-auto flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-full bg-background border shadow-md hover:bg-muted transition-colors whitespace-nowrap"
+          >
+            <ChevronsDown className="size-3.5" />
+            回到底部
+          </button>
+        </div>
+      )}
+      </div>{/* 相对定位容器结束 */}
+
+      {/* 状态栏 */}
+      {!isIdle && (
+        <div
+          className={cn(
+            'shrink-0 px-4 py-2 border-t text-xs flex items-center gap-2',
+            isError ? 'text-destructive' : 'text-muted-foreground',
+          )}
+        >
+          {state.isPaused ? (
+            <>
+              <span className="inline-block size-1.5 rounded-full bg-amber-400" />
+              已暂停
+            </>
+          ) : (
+            <>
+              {isRunning && (
+                <span className="inline-block size-1.5 rounded-full bg-blue-500 animate-pulse" />
+              )}
+              {state.status === 'researching' && state.researchProgress
+                ? state.researchProgress
+                : STATUS_LABEL[state.status] ?? state.status}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/AIWritingTimeline.tsx b/frontend-web/src/open-canvas/components/ai-writing/AIWritingTimeline.tsx
new file mode 100644
index 00000000..eedf8a69
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/AIWritingTimeline.tsx
@@ -0,0 +1,66 @@
+import type { CompletedIntervention, ProgressEvent } from '../../types/ai-writing';
+import { TimelineStep } from './TimelineStep';
+import { CompletedInterventionCard } from './CompletedInterventionCard';
+
+interface AIWritingTimelineProps {
+  events: ProgressEvent[];
+  completedInterventions: CompletedIntervention[];
+  currentPause: ProgressEvent | null;
+  currentInterventionSlot?: React.ReactNode;
+}
+
+const DISPLAYED_TYPES = new Set([
+  'step_start',
+  'step_done',
+  'materials_ready',
+  'outline_ready',
+  'draft_ready',
+  'review_ready',
+  'await_user',
+  'resumed',
+  'notice',
+  'done',
+  'error',
+]);
+
+export function AIWritingTimeline({
+  events,
+  completedInterventions,
+  currentPause,
+  currentInterventionSlot,
+}: AIWritingTimelineProps) {
+  const visible = events.filter((e) => DISPLAYED_TYPES.has(e.type));
+
+  if (visible.length === 0) return null;
+
+  // 遍历时追踪 await_user 事件的序号，以便从 completedInterventions 取对应记录
+  let awaitUserIdx = 0;
+
+  return (
+    <div className="px-4 py-3 space-y-0">
+      {visible.map((event, idx) => {
+        const isLast = idx === visible.length - 1;
+        let slot: React.ReactNode = null;
+
+        if (event.type === 'await_user') {
+          const completedRecord = completedInterventions[awaitUserIdx];
+          awaitUserIdx += 1;
+
+          if (completedRecord) {
+            // 已完成的干预点 → 渲染折叠历史卡
+            slot = <CompletedInterventionCard record={completedRecord} />;
+          } else if (currentPause && isLast) {
+            // 当前活跃干预点 → 渲染操作卡
+            slot = currentInterventionSlot;
+          }
+        }
+
+        return (
+          <TimelineStep key={idx} event={event} isLast={isLast && !slot}>
+            {slot}
+          </TimelineStep>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/CompletedInterventionCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/CompletedInterventionCard.tsx
new file mode 100644
index 00000000..70619177
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/CompletedInterventionCard.tsx
@@ -0,0 +1,233 @@
+import { useState } from 'react';
+import {
+  CheckCircle2, ChevronRight, ChevronDown,
+  ExternalLink, ListTree, FileText,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { buildIntranetSourceUrl } from '@/core/config';
+import type { CompletedIntervention } from '../../types/ai-writing';
+import { OutlineCard } from './OutlineCard';
+import { ReviewCard } from './ReviewCard';
+import { ScoreBar } from './ScoreBar';
+
+interface Props {
+  record: CompletedIntervention;
+}
+
+export function CompletedInterventionCard({ record }: Props) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (record.pausePoint === 'material_confirm') {
+    return <MaterialCompleted record={record} expanded={expanded} onToggle={() => setExpanded(v => !v)} />;
+  }
+  if (record.pausePoint === 'outline_confirm') {
+    return <OutlineCompleted record={record} expanded={expanded} onToggle={() => setExpanded(v => !v)} />;
+  }
+  if (record.pausePoint === 'draft_confirm') {
+    return <DraftCompleted record={record} expanded={expanded} onToggle={() => setExpanded(v => !v)} />;
+  }
+  if (record.pausePoint === 'review_confirm') {
+    return <ReviewCompleted record={record} expanded={expanded} onToggle={() => setExpanded(v => !v)} />;
+  }
+  return null;
+}
+
+// ── 素材确认历史卡 ────────────────────────────────────────────────────────────
+
+function MaterialCompleted({ record, expanded, onToggle }: { record: CompletedIntervention; expanded: boolean; onToggle: () => void }) {
+  const count = record.materials?.length ?? 0;
+
+  return (
+    <div className="rounded-md border border-green-200/60 bg-green-50/30 dark:border-green-900/30 dark:bg-green-950/10 overflow-hidden text-xs">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="w-full flex items-center gap-2 px-3 py-2 hover:bg-green-50/60 dark:hover:bg-green-950/20 transition-colors text-left"
+      >
+        <CheckCircle2 className="size-3.5 text-green-500 shrink-0" />
+        <FileText className="size-3.5 text-blue-500 shrink-0" />
+        <span className="flex-1 font-medium">
+          {count === 0 && record.action !== 're_search' ? (
+            '已在无素材的情况下继续写作'
+          ) : (
+            <>
+              已确认{' '}
+              <span className="text-muted-foreground font-normal">{count} 条素材</span>
+            </>
+          )}
+        </span>
+        {count > 0 && (
+          expanded
+            ? <ChevronDown className="size-3 text-muted-foreground" />
+            : <ChevronRight className="size-3 text-muted-foreground" />
+        )}
+      </button>
+
+      {expanded && record.materials && record.materials.length > 0 && (
+        <div className="px-2.5 pb-2.5 pt-1 space-y-1.5 border-t border-green-200/40 dark:border-green-900/20">
+          {record.materials.map((m) => {
+            const pct = Math.round(m.relevanceScore * 100);
+            const barColor =
+              m.relevanceScore >= 0.8 ? 'bg-green-500'
+              : m.relevanceScore >= 0.5 ? 'bg-orange-400'
+              : 'bg-red-400';
+            return (
+              <div key={m.id} className="rounded border border-border/50 bg-background px-2.5 py-1.5 space-y-1">
+                <p className="font-medium leading-snug line-clamp-2">{m.title}</p>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <span className="truncate max-w-[100px]">{m.source}</span>
+                  {m.publishedAt && <><span className="text-muted-foreground/40">·</span><span>{m.publishedAt}</span></>}
+                  <div className="flex flex-1 items-center gap-1 min-w-0">
+                    <div className="flex-1 h-1 rounded-full bg-muted overflow-hidden min-w-[40px]">
+                      <div className={cn('h-full rounded-full', barColor)} style={{ width: `${pct}%` }} />
+                    </div>
+                    <span className={cn('shrink-0 text-[10px]', barColor.replace('bg-', 'text-'))}>{pct}%</span>
+                  </div>
+                  {m.recUuid && (
+                    <button type="button"
+                       onClick={() => window.open(buildIntranetSourceUrl(m.recUuid), '_blank', 'noopener,noreferrer')}
+                       className="shrink-0 text-primary hover:underline inline-flex items-center gap-0.5">
+                      原文 <ExternalLink className="size-2.5" />
+                    </button>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── 大纲确认历史卡 ────────────────────────────────────────────────────────────
+
+function OutlineCompleted({ record, expanded, onToggle }: { record: CompletedIntervention; expanded: boolean; onToggle: () => void }) {
+  const sectionCount = record.outline?.sections.length ?? 0;
+
+  return (
+    <div className="rounded-md border border-green-200/60 bg-green-50/30 dark:border-green-900/30 dark:bg-green-950/10 overflow-hidden text-xs">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="w-full flex items-center gap-2 px-3 py-2 hover:bg-green-50/60 dark:hover:bg-green-950/20 transition-colors text-left"
+      >
+        <CheckCircle2 className="size-3.5 text-green-500 shrink-0" />
+        <ListTree className="size-3.5 text-purple-500 shrink-0" />
+        <span className="flex-1 font-medium">
+          已确认大纲
+          {record.outline?.title && (
+            <span className="ml-1 text-muted-foreground font-normal">
+              《{record.outline.title}》
+            </span>
+          )}
+          <span className="ml-1 text-muted-foreground font-normal">共 {sectionCount} 章节</span>
+        </span>
+        {record.outline && (
+          expanded
+            ? <ChevronDown className="size-3 text-muted-foreground" />
+            : <ChevronRight className="size-3 text-muted-foreground" />
+        )}
+      </button>
+
+      {expanded && record.outline && (
+        <div className="px-2.5 pb-2.5 pt-1 border-t border-green-200/40 dark:border-green-900/20">
+          <OutlineCard outline={record.outline} readOnly />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── 草稿确认历史卡 ────────────────────────────────────────────────────────────
+
+function DraftCompleted({ record, expanded, onToggle }: { record: CompletedIntervention; expanded: boolean; onToggle: () => void }) {
+  const title = record.draftTitle ? `《${record.draftTitle}》` : '草稿';
+  const wordCount = record.draftWordCount ?? 0;
+  const hasReview = !!record.reviewResult;
+
+  const actionLabel =
+    record.action === 'finalize' ? '已确认定稿' :
+    record.action === 'user_revise' ? '已要求修改' :
+    '已提交编辑审核';
+
+  const actionColor =
+    record.action === 'finalize' ? 'text-green-600 dark:text-green-400' :
+    record.action === 'user_revise' ? 'text-orange-500 dark:text-orange-400' :
+    'text-blue-500 dark:text-blue-400';
+
+  return (
+    <div className="rounded-md border border-green-200/60 bg-green-50/30 dark:border-green-900/30 dark:bg-green-950/10 overflow-hidden text-xs">
+      <button
+        type="button"
+        onClick={hasReview ? onToggle : undefined}
+        className={cn(
+          'w-full flex items-center gap-2 px-3 py-2 text-left',
+          hasReview && 'hover:bg-green-50/60 dark:hover:bg-green-950/20 transition-colors',
+        )}
+      >
+        <CheckCircle2 className="size-3.5 text-green-500 shrink-0" />
+        <span className={cn('font-medium shrink-0', actionColor)}>{actionLabel}</span>
+        <span className="text-muted-foreground flex-1 truncate">
+          {title}
+          {wordCount > 0 && <span className="ml-1">（{wordCount} 字）</span>}
+        </span>
+        {hasReview && (
+          expanded
+            ? <ChevronDown className="size-3 text-muted-foreground" />
+            : <ChevronRight className="size-3 text-muted-foreground" />
+        )}
+      </button>
+
+      {expanded && record.reviewResult && (
+        <div className="px-2.5 pb-2.5 pt-1 border-t border-green-200/40 dark:border-green-900/20">
+          <ReviewCard review={record.reviewResult} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── 编辑审核确认历史卡 ────────────────────────────────────────────────────────
+
+function ReviewCompleted({ record, expanded, onToggle }: { record: CompletedIntervention; expanded: boolean; onToggle: () => void }) {
+  const isForce = record.action === 'force_finalize';
+  const hasReview = !!record.reviewResult;
+
+  const actionLabel = isForce ? '已强制定稿（忽略编辑意见）' : '已采纳编辑意见，重新写作';
+  const actionColor = isForce ? 'text-orange-500 dark:text-orange-400' : 'text-blue-500 dark:text-blue-400';
+
+  return (
+    <div className="rounded-md border border-green-200/60 bg-green-50/30 dark:border-green-900/30 dark:bg-green-950/10 overflow-hidden text-xs">
+      <button
+        type="button"
+        onClick={hasReview ? onToggle : undefined}
+        className={cn(
+          'w-full flex items-center gap-2 px-3 py-2 text-left',
+          hasReview && 'hover:bg-green-50/60 dark:hover:bg-green-950/20 transition-colors',
+        )}
+      >
+        <CheckCircle2 className="size-3.5 text-green-500 shrink-0" />
+        <span className={cn('font-medium flex-1', actionColor)}>{actionLabel}</span>
+        {hasReview && record.reviewResult && (
+          <span className="text-muted-foreground tabular-nums shrink-0">
+            {record.reviewResult.overallScore} / 100
+          </span>
+        )}
+        {hasReview && (
+          expanded
+            ? <ChevronDown className="size-3 text-muted-foreground" />
+            : <ChevronRight className="size-3 text-muted-foreground" />
+        )}
+      </button>
+
+      {expanded && record.reviewResult && (
+        <div className="px-2.5 pb-2.5 pt-1 space-y-1.5 border-t border-green-200/40 dark:border-green-900/20">
+          <ScoreBar label="事实准确性" score={record.reviewResult.factScore} />
+          <ScoreBar label="逻辑结构" score={record.reviewResult.logicScore} />
+          <ScoreBar label="语言文字" score={record.reviewResult.languageScore} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/DraftStreamingView.tsx b/frontend-web/src/open-canvas/components/ai-writing/DraftStreamingView.tsx
new file mode 100644
index 00000000..11fb4704
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/DraftStreamingView.tsx
@@ -0,0 +1,113 @@
+import { useEffect, useRef, useState } from 'react';
+import { Brain, ChevronDown, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { StreamingDraftSection } from '../../types/ai-writing';
+
+interface DraftStreamingViewProps {
+  title: string;
+  sections: StreamingDraftSection[];
+}
+
+function TypewriterCursor() {
+  return (
+    <span
+      aria-hidden
+      className="inline-block w-0.5 h-4 bg-foreground align-middle ml-0.5 animate-[blink_1s_step-end_infinite]"
+      style={{ verticalAlign: 'text-bottom' }}
+    />
+  );
+}
+
+function SectionThinking({ thinkingText, isDone }: { thinkingText: string; isDone: boolean }) {
+  const [open, setOpen] = useState(true);
+  const preRef = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    if (open && preRef.current) {
+      preRef.current.scrollTop = preRef.current.scrollHeight;
+    }
+  }, [thinkingText, open]);
+
+  if (!thinkingText) return null;
+
+  return (
+    <div className="mb-2 rounded-lg border border-amber-200 dark:border-amber-900 bg-amber-50/50 dark:bg-amber-950/20 overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center gap-1.5 px-2.5 py-1.5 bg-amber-100/40 dark:bg-amber-900/30 hover:bg-amber-100/70 dark:hover:bg-amber-900/50 transition-colors"
+      >
+        <Brain className="size-3 text-amber-500 shrink-0" />
+        <span className="text-[11px] font-medium text-amber-600 dark:text-amber-400">思考过程</span>
+        <span className="ml-auto text-amber-400">
+          {open ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+        </span>
+      </button>
+      {open && (
+        <pre
+          ref={preRef}
+          className="text-[10px] font-mono leading-relaxed px-2.5 py-2 text-amber-700/70 dark:text-amber-300/60 whitespace-pre-wrap max-h-32 overflow-y-auto italic"
+        >
+          {thinkingText}
+          {!isDone && (
+            <span className="inline-block w-0.5 h-3 bg-amber-400 ml-0.5 align-text-bottom animate-[blink_1s_step-end_infinite]" />
+          )}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+export function DraftStreamingView({ title, sections }: DraftStreamingViewProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }, [sections]);
+
+  const activeSectionIdx = sections.reduce(
+    (max, s) => (!s.isDone ? Math.max(max, s.sectionIndex) : max),
+    -1,
+  );
+
+  if (sections.length === 0) return null;
+
+  return (
+    <div className="px-4 pb-4">
+      <div className="rounded-xl border bg-card shadow-sm p-4 prose prose-sm dark:prose-invert max-w-none">
+        {title && (
+          <h1 className="text-base font-bold text-center mb-4 text-foreground">{title}</h1>
+        )}
+
+        {sections.map((sec) => (
+          <div key={sec.sectionIndex} className="mb-4">
+            <h2 className={cn(
+              'text-sm font-semibold mb-1.5',
+              sec.isDone ? 'text-foreground' : 'text-purple-500',
+            )}>
+              {sec.sectionTitle}
+            </h2>
+
+            {/* 该章节的思考过程（可折叠） */}
+            <SectionThinking thinkingText={sec.thinkingText} isDone={sec.isDone} />
+
+            {/* 正文内容 */}
+            <p className="text-xs leading-relaxed text-foreground/90 whitespace-pre-wrap m-0">
+              {sec.text}
+              {sec.sectionIndex === activeSectionIdx && !sec.isDone && <TypewriterCursor />}
+            </p>
+          </div>
+        ))}
+
+        <div ref={bottomRef} />
+      </div>
+
+      <style>{`
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50%       { opacity: 0; }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/InterventionCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/InterventionCard.tsx
new file mode 100644
index 00000000..65526f27
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/InterventionCard.tsx
@@ -0,0 +1,535 @@
+import { useState } from 'react';
+import {
+  PauseCircle, CheckCircle2, RotateCcw, Search,
+  RefreshCw, PenLine, ArrowRight, ShieldAlert, ClipboardEdit,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type {
+  AIMaterial, AIOutline, ReviewResult, ReviewIssue,
+  ProgressEvent, UserInterventionPayload,
+} from '../../types/ai-writing';
+import { MaterialsCard } from './MaterialsCard';
+import { MaterialsToolbar } from './MaterialsToolbar';
+import { OutlineCard } from './OutlineCard';
+import { ReviewCard } from './ReviewCard';
+
+interface InterventionCardProps {
+  pauseEvent: ProgressEvent;
+  materials: AIMaterial[];
+  outline: AIOutline | null;
+  reviewResult: ReviewResult | null;
+  draftTitle: string;
+  revisionCount: number;
+  onSubmit: (payload: UserInterventionPayload) => void;
+  disabled?: boolean;
+}
+
+export function InterventionCard({
+  pauseEvent, materials, outline, reviewResult,
+  draftTitle, revisionCount, onSubmit, disabled,
+}: InterventionCardProps) {
+  const pausePoint = pauseEvent.pausePoint;
+
+  if (pausePoint === 'material_confirm') {
+    return <MaterialConfirmCard materials={materials} onSubmit={onSubmit} disabled={disabled} />;
+  }
+
+  if (pausePoint === 'outline_confirm') {
+    return (
+      <OutlineConfirmCard
+        outline={outline ?? pauseEvent.outline ?? null}
+        onSubmit={onSubmit}
+        disabled={disabled}
+      />
+    );
+  }
+
+  if (pausePoint === 'draft_confirm') {
+    return (
+      <DraftConfirmCard
+        draftTitle={draftTitle}
+        revisionCount={revisionCount}
+        reviewResult={reviewResult}
+        onSubmit={onSubmit}
+        disabled={disabled}
+      />
+    );
+  }
+
+  if (pausePoint === 'review_confirm') {
+    return (
+      <ReviewConfirmCard
+        reviewResult={reviewResult ?? (pauseEvent.pauseContext?.reviewResult as ReviewResult | null) ?? null}
+        revisionCount={revisionCount}
+        onSubmit={onSubmit}
+        disabled={disabled}
+      />
+    );
+  }
+
+  return (
+    <div className="rounded-md border border-yellow-200 bg-yellow-50/50 dark:border-yellow-900/40 dark:bg-yellow-950/20 px-3 py-2.5 text-xs text-muted-foreground flex items-center gap-2">
+      <PauseCircle className="size-3.5 text-yellow-500 shrink-0" />
+      等待用户确认（{pausePoint}）…
+    </div>
+  );
+}
+
+// ── 工具函数 ──────────────────────────────────────────────────────────────────
+
+function makeDefaultSelection(issues: ReviewIssue[]): Set<number> {
+  return new Set(issues.map((_, i) => i));
+}
+
+function formatSelectedIssues(issues: ReviewIssue[], selectedIndices: Set<number>): string {
+  const selected = issues.filter((_, i) => selectedIndices.has(i));
+  if (selected.length === 0) return '';
+  return selected
+    .map((iss, n) => `${n + 1}. [${iss.category}] ${iss.issue}：${iss.suggestion}`)
+    .join('\n');
+}
+
+// ── PAUSE-1 素材确认 ──────────────────────────────────────────────────────────
+
+interface MaterialConfirmCardProps {
+  materials: AIMaterial[];
+  onSubmit: (payload: UserInterventionPayload) => void;
+  disabled?: boolean;
+}
+
+function MaterialConfirmCard({ materials, onSubmit, disabled }: MaterialConfirmCardProps) {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(
+    () => new Set(materials.map((m) => m.id)),
+  );
+  const [extraKeywords, setExtraKeywords] = useState<string[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleConfirm() {
+    setSubmitting(true);
+    await onSubmit({ action: 'confirm', approvedMaterialIds: [...selectedIds], extraKeywords });
+    setSubmitting(false);
+  }
+
+  async function handleReSearch() {
+    setSubmitting(true);
+    await onSubmit({ action: 're_search', approvedMaterialIds: [], extraKeywords });
+    setSubmitting(false);
+  }
+
+  const hasExtra = extraKeywords.length > 0;
+
+  // 空数据态：未检索到任何素材，提示用户重新搜索或在无素材情况下继续
+  if (materials.length === 0) {
+    return (
+      <div className="rounded-md border border-amber-200 bg-amber-50/50 dark:border-amber-900/40 dark:bg-amber-950/20 space-y-3 p-3">
+        <div className="flex items-start gap-2">
+          <ShieldAlert className="size-4 text-amber-500 shrink-0 mt-0.5" />
+          <div>
+            <p className="text-xs font-medium">未检索到任何素材</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              素材收集专家本次没有检索到相关数据。你可以补充关键词重新搜索，或在无素材的情况下直接继续写作（文章将仅依据写作意图生成）。
+            </p>
+          </div>
+        </div>
+
+        <MaterialsToolbar
+          materials={materials}
+          selectedIds={selectedIds}
+          onSelectAll={() => setSelectedIds(new Set())}
+          onDeselectAll={() => setSelectedIds(new Set())}
+          extraKeywords={extraKeywords}
+          onAddKeyword={(kw) => setExtraKeywords((prev) => [...prev, kw])}
+          onRemoveKeyword={(kw) => setExtraKeywords((prev) => prev.filter((k) => k !== kw))}
+        />
+
+        <div className="flex gap-2 pt-1">
+          <Button
+            type="button" size="sm" className="flex-1 h-8 text-xs gap-1.5"
+            onClick={handleReSearch} disabled={disabled || submitting}
+          >
+            {hasExtra
+              ? <><Search className="size-3.5" />追加搜索</>
+              : <><RotateCcw className="size-3.5" />重新搜索</>}
+          </Button>
+          <Button
+            type="button" variant="outline" size="sm" className="h-8 text-xs gap-1.5 shrink-0"
+            onClick={handleConfirm} disabled={disabled || submitting}
+          >
+            <ArrowRight className="size-3.5" />无数据继续写作
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border bg-background space-y-3 p-3">
+      <div className="flex items-start gap-2">
+        <PauseCircle className="size-4 text-yellow-500 shrink-0 mt-0.5" />
+        <div>
+          <p className="text-xs font-medium">需要您确认素材，才能继续</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            已搜集到 {materials.length} 条素材（默认全选）。您可以取消勾选不相关的素材，或补充关键词追加搜索。
+          </p>
+        </div>
+      </div>
+
+      <MaterialsCard materials={materials} selectedIds={selectedIds} onToggle={(id) => {
+        setSelectedIds((prev) => {
+          const next = new Set(prev);
+          next.has(id) ? next.delete(id) : next.add(id);
+          return next;
+        });
+      }} />
+
+      <MaterialsToolbar
+        materials={materials}
+        selectedIds={selectedIds}
+        onSelectAll={() => setSelectedIds(new Set(materials.map((m) => m.id)))}
+        onDeselectAll={() => setSelectedIds(new Set())}
+        extraKeywords={extraKeywords}
+        onAddKeyword={(kw) => setExtraKeywords((prev) => [...prev, kw])}
+        onRemoveKeyword={(kw) => setExtraKeywords((prev) => prev.filter((k) => k !== kw))}
+      />
+
+      <div className="flex gap-2 pt-1">
+        <Button
+          type="button" size="sm" className="flex-1 h-8 text-xs gap-1.5"
+          onClick={handleConfirm} disabled={disabled || submitting || selectedIds.size === 0}
+        >
+          <CheckCircle2 className="size-3.5" />确认素材，开始规划大纲
+        </Button>
+        <Button
+          type="button" variant="outline" size="sm" className="h-8 text-xs gap-1.5 shrink-0"
+          onClick={handleReSearch} disabled={disabled || submitting}
+        >
+          {hasExtra
+            ? <><Search className="size-3.5" />追加搜索</>
+            : <><RotateCcw className="size-3.5" />重新搜索</>}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// ── PAUSE-2 大纲确认 ──────────────────────────────────────────────────────────
+
+interface OutlineConfirmCardProps {
+  outline: AIOutline | null;
+  onSubmit: (payload: UserInterventionPayload) => void;
+  disabled?: boolean;
+}
+
+function OutlineConfirmCard({ outline: initialOutline, onSubmit, disabled }: OutlineConfirmCardProps) {
+  const [editedOutline, setEditedOutline] = useState<AIOutline | null>(initialOutline);
+  const [showReplan, setShowReplan] = useState(false);
+  const [feedback, setFeedback] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleConfirm() {
+    setSubmitting(true);
+    await onSubmit({
+      action: 'confirm',
+      editedOutline: editedOutline !== initialOutline ? editedOutline ?? undefined : undefined,
+    });
+    setSubmitting(false);
+  }
+
+  async function handleReplan() {
+    setSubmitting(true);
+    await onSubmit({ action: 're_outline', outlineFeedback: feedback.trim() });
+    setSubmitting(false);
+  }
+
+  return (
+    <div className="rounded-md border bg-background space-y-3 p-3">
+      <div className="flex items-start gap-2">
+        <PauseCircle className="size-4 text-yellow-500 shrink-0 mt-0.5" />
+        <div>
+          <p className="text-xs font-medium">请确认大纲后继续写作</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            可直接点击章节标题或要点进行编辑，或要求重新规划大纲。
+          </p>
+        </div>
+      </div>
+
+      {editedOutline
+        ? <OutlineCard outline={editedOutline} onChange={setEditedOutline} />
+        : <p className="text-xs text-muted-foreground text-center py-2">大纲加载中…</p>}
+
+      {showReplan && (
+        <div className="space-y-1.5">
+          <label className="text-xs text-muted-foreground">重新规划意见（可选）</label>
+          <textarea
+            rows={2} value={feedback} onChange={(e) => setFeedback(e.target.value)}
+            placeholder="描述大纲调整方向，例如：增加案例分析章节…"
+            className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-xs resize-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        </div>
+      )}
+
+      <div className="flex gap-2 pt-1">
+        <Button
+          type="button" size="sm" className="flex-1 h-8 text-xs gap-1.5"
+          onClick={handleConfirm} disabled={disabled || submitting || !editedOutline}
+        >
+          <CheckCircle2 className="size-3.5" />确认大纲，开始写作
+        </Button>
+        {showReplan ? (
+          <Button
+            type="button" variant="outline" size="sm" className="h-8 text-xs gap-1.5 shrink-0"
+            onClick={handleReplan} disabled={disabled || submitting}
+          >
+            <RefreshCw className="size-3.5" />提交重规划
+          </Button>
+        ) : (
+          <Button
+            type="button" variant="outline" size="sm" className="h-8 text-xs gap-1.5 shrink-0"
+            onClick={() => setShowReplan(true)} disabled={disabled || submitting}
+          >
+            <RotateCcw className="size-3.5" />重新规划…
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── PAUSE-3 草稿确认 ──────────────────────────────────────────────────────────
+
+interface DraftConfirmCardProps {
+  draftTitle: string;
+  revisionCount: number;
+  reviewResult: ReviewResult | null;
+  onSubmit: (payload: UserInterventionPayload) => void;
+  disabled?: boolean;
+}
+
+function DraftConfirmCard({ draftTitle, revisionCount, reviewResult, onSubmit, disabled }: DraftConfirmCardProps) {
+  const [notes, setNotes] = useState('');
+  const [showNotes, setShowNotes] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [selectedIssueIndices, setSelectedIssueIndices] = useState<Set<number>>(
+    () => makeDefaultSelection(reviewResult?.revisionNotes ?? []),
+  );
+
+  function toggleIssue(index: number) {
+    setSelectedIssueIndices((prev) => {
+      const next = new Set(prev);
+      next.has(index) ? next.delete(index) : next.add(index);
+      return next;
+    });
+  }
+
+  async function submit(action: string, extra?: Partial<UserInterventionPayload>) {
+    setSubmitting(true);
+    await onSubmit({ action, userRevisionNotes: notes.trim(), ...extra });
+    setSubmitting(false);
+  }
+
+  async function handleApplyReview() {
+    if (!reviewResult) return;
+    const formattedNotes = formatSelectedIssues(reviewResult.revisionNotes, selectedIssueIndices);
+    setSubmitting(true);
+    await onSubmit({
+      action: 'user_revise',
+      userRevisionNotes: formattedNotes,
+      selectedIssueIndices: [...selectedIssueIndices],
+    });
+    setSubmitting(false);
+  }
+
+  const hasReview = reviewResult != null && reviewResult.revisionNotes.length > 0;
+
+  return (
+    <div className="rounded-md border bg-background space-y-3 p-3">
+      <div className="flex items-start gap-2">
+        <PauseCircle className="size-4 text-yellow-500 shrink-0 mt-0.5" />
+        <div>
+          <p className="text-xs font-medium">草稿已完成，请确认后继续</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {draftTitle ? `《${draftTitle}》` : '草稿'}
+            {revisionCount > 0 ? `（第 ${revisionCount} 次修改稿）` : '（初稿）'}
+            · 右侧可预览完整内容
+          </p>
+        </div>
+      </div>
+
+      {/* 编辑审核结果（若已审核，支持勾选意见） */}
+      {reviewResult && (
+        <ReviewCard
+          review={reviewResult}
+          revisionCount={revisionCount}
+          selectedIndices={hasReview ? selectedIssueIndices : undefined}
+          onToggleIssue={hasReview ? toggleIssue : undefined}
+        />
+      )}
+
+      {/* 用户自定义修改意见 */}
+      {showNotes && (
+        <div className="space-y-1.5">
+          <label className="text-xs text-muted-foreground">您的修改意见</label>
+          <textarea
+            rows={2} value={notes} onChange={(e) => setNotes(e.target.value)}
+            placeholder="描述希望修改的内容，例如：第二段数据来源不清晰，结尾过于仓促…"
+            className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-xs resize-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col gap-1.5 pt-1">
+        <Button
+          type="button" size="sm" className="w-full h-8 text-xs gap-1.5"
+          onClick={() => submit('finalize')} disabled={disabled || submitting}
+        >
+          <CheckCircle2 className="size-3.5" />确认定稿
+        </Button>
+
+        {/* 按编辑审核意见修改（有审核结果时始终显示） */}
+        {hasReview && (
+          <Button
+            type="button" variant="outline" size="sm"
+            className="w-full h-8 text-xs gap-1.5 border-orange-200 text-orange-700 hover:bg-orange-50 dark:border-orange-800 dark:text-orange-400 dark:hover:bg-orange-950/30"
+            onClick={handleApplyReview}
+            disabled={disabled || submitting || selectedIssueIndices.size === 0}
+          >
+            <ClipboardEdit className="size-3.5" />
+            按编辑审核意见修改
+            {selectedIssueIndices.size < reviewResult!.revisionNotes.length && (
+              <span className="text-[10px] opacity-70">
+                （已选 {selectedIssueIndices.size}/{reviewResult!.revisionNotes.length}）
+              </span>
+            )}
+          </Button>
+        )}
+
+        <div className="flex gap-1.5">
+          {showNotes ? (
+            <Button
+              type="button" variant="outline" size="sm" className="flex-1 h-8 text-xs gap-1.5"
+              onClick={() => submit('user_revise')} disabled={disabled || submitting || !notes.trim()}
+            >
+              <PenLine className="size-3.5" />按我的意见修改
+            </Button>
+          ) : (
+            <Button
+              type="button" variant="outline" size="sm" className="flex-1 h-8 text-xs gap-1.5"
+              onClick={() => setShowNotes(true)} disabled={disabled || submitting}
+            >
+              <PenLine className="size-3.5" />给出修改意见…
+            </Button>
+          )}
+
+          <Button
+            type="button" variant="outline" size="sm" className="flex-1 h-8 text-xs gap-1.5"
+            onClick={() => submit('to_editor')} disabled={disabled || submitting}
+          >
+            <ArrowRight className="size-3.5" />让编辑继续审核
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── PAUSE-4 编辑打回确认 ──────────────────────────────────────────────────────
+
+interface ReviewConfirmCardProps {
+  reviewResult: ReviewResult | null;
+  revisionCount: number;
+  onSubmit: (payload: UserInterventionPayload) => void;
+  disabled?: boolean;
+}
+
+function ReviewConfirmCard({ reviewResult, revisionCount, onSubmit, disabled }: ReviewConfirmCardProps) {
+  const [extraNotes, setExtraNotes] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [selectedIssueIndices, setSelectedIssueIndices] = useState<Set<number>>(
+    () => makeDefaultSelection(reviewResult?.revisionNotes ?? []),
+  );
+
+  function toggleIssue(index: number) {
+    setSelectedIssueIndices((prev) => {
+      const next = new Set(prev);
+      next.has(index) ? next.delete(index) : next.add(index);
+      return next;
+    });
+  }
+
+  async function handleAccept() {
+    setSubmitting(true);
+    const issueNotes = reviewResult
+      ? formatSelectedIssues(reviewResult.revisionNotes, selectedIssueIndices)
+      : '';
+    const combined = [issueNotes, extraNotes.trim()].filter(Boolean).join('\n\n');
+    await onSubmit({
+      action: 'accept_review',
+      userRevisionNotes: combined || undefined,
+      selectedIssueIndices: [...selectedIssueIndices],
+    });
+    setSubmitting(false);
+  }
+
+  async function handleForce() {
+    setSubmitting(true);
+    await onSubmit({ action: 'force_finalize', overrideVerdict: true });
+    setSubmitting(false);
+  }
+
+  const hasIssues = (reviewResult?.revisionNotes.length ?? 0) > 0;
+
+  return (
+    <div className="rounded-md border bg-background space-y-3 p-3">
+      <div className="flex items-start gap-2">
+        <PauseCircle className="size-4 text-yellow-500 shrink-0 mt-0.5" />
+        <div>
+          <p className="text-xs font-medium">编辑认为文章需要修改</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            勾选您希望采纳的意见，再让作家重写；或忽略编辑意见强制定稿。
+          </p>
+        </div>
+      </div>
+
+      {reviewResult ? (
+        <ReviewCard
+          review={reviewResult}
+          revisionCount={revisionCount}
+          selectedIndices={hasIssues ? selectedIssueIndices : undefined}
+          onToggleIssue={hasIssues ? toggleIssue : undefined}
+        />
+      ) : (
+        <p className="text-xs text-muted-foreground text-center py-1">审核结果加载中…</p>
+      )}
+
+      <div className="space-y-1.5">
+        <label className="text-xs text-muted-foreground">补充修改指令（可选）</label>
+        <textarea
+          rows={2} value={extraNotes} onChange={(e) => setExtraNotes(e.target.value)}
+          placeholder="留空则只采纳已勾选意见；或在此补充您自己的修改方向…"
+          className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-xs resize-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+      </div>
+
+      <div className="flex gap-2 pt-1">
+        <Button
+          type="button" size="sm" className="flex-1 h-8 text-xs gap-1.5"
+          onClick={handleAccept}
+          disabled={disabled || submitting || (hasIssues && selectedIssueIndices.size === 0 && !extraNotes.trim())}
+        >
+          <ClipboardEdit className="size-3.5" />按编辑意见修改
+          {hasIssues && selectedIssueIndices.size < reviewResult!.revisionNotes.length && (
+            <span className="text-[10px] opacity-70">
+              （已选 {selectedIssueIndices.size}/{reviewResult!.revisionNotes.length}）
+            </span>
+          )}
+        </Button>
+        <Button
+          type="button" variant="outline" size="sm" className="h-8 text-xs gap-1.5 shrink-0 text-destructive hover:text-destructive"
+          onClick={handleForce} disabled={disabled || submitting}
+        >
+          <ShieldAlert className="size-3.5" />强制定稿
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/IssueList.tsx b/frontend-web/src/open-canvas/components/ai-writing/IssueList.tsx
new file mode 100644
index 00000000..e71bf5c8
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/IssueList.tsx
@@ -0,0 +1,110 @@
+import { cn } from '@/lib/utils';
+import type { ReviewIssue } from '../../types/ai-writing';
+
+interface IssueListProps {
+  issues: ReviewIssue[];
+  selectedIndices?: Set<number>;
+  onToggle?: (index: number) => void;
+}
+
+const CATEGORY_LABEL: Record<string, string> = {
+  fact: '事实',
+  logic: '逻辑',
+  language: '语言',
+};
+
+const CATEGORY_COLOR: Record<string, string> = {
+  fact: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
+  logic: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-400',
+  language: 'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-400',
+};
+
+export function IssueList({ issues, selectedIndices, onToggle }: IssueListProps) {
+  if (issues.length === 0) {
+    return <p className="text-xs text-muted-foreground text-center py-1">无需修改意见</p>;
+  }
+
+  const indexed = issues.map((issue, i) => ({ issue, index: i }));
+  const major = indexed.filter(({ issue }) => issue.severity === 'major');
+  const minor = indexed.filter(({ issue }) => issue.severity === 'minor');
+  const selectable = selectedIndices !== undefined && onToggle !== undefined;
+
+  return (
+    <div className="space-y-3">
+      {major.length > 0 && (
+        <IssueGroup
+          label="必须修改"
+          labelClass="text-red-500"
+          items={major}
+          selectable={selectable}
+          selectedIndices={selectedIndices}
+          onToggle={onToggle}
+        />
+      )}
+      {minor.length > 0 && (
+        <IssueGroup
+          label="建议修改"
+          labelClass="text-yellow-500"
+          items={minor}
+          selectable={selectable}
+          selectedIndices={selectedIndices}
+          onToggle={onToggle}
+        />
+      )}
+    </div>
+  );
+}
+
+interface IssueGroupProps {
+  label: string;
+  labelClass: string;
+  items: { issue: ReviewIssue; index: number }[];
+  selectable: boolean;
+  selectedIndices?: Set<number>;
+  onToggle?: (index: number) => void;
+}
+
+function IssueGroup({ label, labelClass, items, selectable, selectedIndices, onToggle }: IssueGroupProps) {
+  return (
+    <div className="space-y-1.5">
+      <p className={cn('text-xs font-semibold', labelClass)}>{label}</p>
+      {items.map(({ issue, index }) => {
+        const isSelected = !selectable || (selectedIndices?.has(index) ?? true);
+        return (
+          <div
+            key={index}
+            className={cn(
+              'rounded border bg-background px-2.5 py-2 space-y-1 text-xs transition-opacity',
+              selectable ? 'cursor-pointer' : '',
+              selectable && !isSelected ? 'opacity-40 border-border/30' : 'border-border/60',
+            )}
+            onClick={selectable ? () => onToggle?.(index) : undefined}
+          >
+            <div className="flex items-center gap-1.5">
+              {selectable && (
+                <input
+                  type="checkbox"
+                  checked={isSelected}
+                  onChange={() => onToggle?.(index)}
+                  onClick={(e) => e.stopPropagation()}
+                  className="size-3.5 shrink-0 accent-primary cursor-pointer"
+                />
+              )}
+              <span className={cn('rounded px-1.5 py-0.5 text-[10px] font-medium', CATEGORY_COLOR[issue.category] ?? 'bg-muted text-muted-foreground')}>
+                {CATEGORY_LABEL[issue.category] ?? issue.category}
+              </span>
+              <span className="text-muted-foreground truncate">{issue.location}</span>
+            </div>
+            <p className={cn('text-foreground leading-snug', selectable ? 'pl-5' : '')}>
+              {issue.issue}
+            </p>
+            <p className={cn('text-muted-foreground leading-snug', selectable ? 'pl-5' : '')}>
+              <span className="text-primary mr-1">→</span>
+              {issue.suggestion}
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/MaterialItem.tsx b/frontend-web/src/open-canvas/components/ai-writing/MaterialItem.tsx
new file mode 100644
index 00000000..ba30e5f3
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/MaterialItem.tsx
@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { ChevronRight, ChevronDown, ExternalLink } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { buildIntranetSourceUrl } from '@/core/config';
+import type { AIMaterial } from '../../types/ai-writing';
+
+interface MaterialItemProps {
+  material: AIMaterial;
+  checked: boolean;
+  onToggle: (id: string) => void;
+}
+
+function relevanceColor(score: number): string {
+  if (score >= 0.8) return 'bg-green-500';
+  if (score >= 0.5) return 'bg-orange-400';
+  return 'bg-red-400';
+}
+
+function relevanceLabel(score: number): string {
+  if (score >= 0.8) return '高相关';
+  if (score >= 0.5) return '中相关';
+  return '低相关';
+}
+
+export function MaterialItem({ material, checked, onToggle }: MaterialItemProps) {
+  const [expanded, setExpanded] = useState(false);
+  const pct = Math.round(material.relevanceScore * 100);
+
+  return (
+    <div
+      className={cn(
+        'rounded-md border text-xs transition-colors',
+        checked ? 'border-border bg-background' : 'border-border/50 bg-muted/30',
+      )}
+    >
+      {/* 头部行 */}
+      <div className="flex items-start gap-2 px-2.5 py-2">
+        {/* Checkbox */}
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={() => onToggle(material.id)}
+          className="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border-input accent-primary cursor-pointer"
+        />
+
+        {/* 标题 + 展开按钮 */}
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          className="flex flex-1 items-start gap-1.5 text-left"
+        >
+          <span className={cn('flex-1 font-medium leading-snug line-clamp-2', !checked && 'text-muted-foreground')}>
+            {material.title}
+          </span>
+          {expanded
+            ? <ChevronDown className="mt-0.5 size-3 shrink-0 text-muted-foreground" />
+            : <ChevronRight className="mt-0.5 size-3 shrink-0 text-muted-foreground" />}
+        </button>
+      </div>
+
+      {/* 元信息行 */}
+      <div className="flex items-center gap-2 px-2.5 pb-2 pl-8">
+        <span className="text-muted-foreground truncate max-w-[120px]">{material.source}</span>
+        {material.publishedAt && (
+          <>
+            <span className="text-muted-foreground/40">·</span>
+            <span className="text-muted-foreground shrink-0">{material.publishedAt}</span>
+          </>
+        )}
+        {/* 相关度色条 */}
+        <div className="flex flex-1 items-center gap-1 min-w-0">
+          <div className="flex-1 h-1 rounded-full bg-muted overflow-hidden min-w-[40px]">
+            <div
+              className={cn('h-full rounded-full transition-all', relevanceColor(material.relevanceScore))}
+              style={{ width: `${pct}%` }}
+            />
+          </div>
+          <span className={cn('shrink-0', relevanceColor(material.relevanceScore).replace('bg-', 'text-'))}>
+            {pct}%
+          </span>
+          <span className="text-muted-foreground/60 shrink-0">({relevanceLabel(material.relevanceScore)})</span>
+        </div>
+      </div>
+
+      {/* 展开内容 */}
+      {expanded && (
+        <div className="px-2.5 pb-2.5 pl-8 space-y-1.5 border-t">
+          <p className="text-muted-foreground leading-relaxed pt-2 line-clamp-6">
+            {material.content.slice(0, 300)}
+            {material.content.length > 300 && '…'}
+          </p>
+          {material.recUuid && (
+            <button
+              type="button"
+              onClick={() =>
+                window.open(buildIntranetSourceUrl(material.recUuid), '_blank', 'noopener,noreferrer')
+              }
+              className="inline-flex items-center gap-1 text-primary hover:underline"
+            >
+              查看原文
+              <ExternalLink className="size-2.5" />
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/MaterialsCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/MaterialsCard.tsx
new file mode 100644
index 00000000..b8e9ec9a
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/MaterialsCard.tsx
@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronRight, FileText } from 'lucide-react';
+import type { AIMaterial } from '../../types/ai-writing';
+import { MaterialItem } from './MaterialItem';
+
+interface MaterialsCardProps {
+  materials: AIMaterial[];
+  selectedIds: Set<string>;
+  onToggle: (id: string) => void;
+}
+
+export function MaterialsCard({ materials, selectedIds, onToggle }: MaterialsCardProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="rounded-md border bg-muted/20 overflow-hidden">
+      {/* 折叠头 */}
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="w-full flex items-center gap-2 px-3 py-2 text-xs font-medium hover:bg-muted/40 transition-colors text-left"
+      >
+        <FileText className="size-3.5 text-blue-500 shrink-0" />
+        <span className="flex-1">
+          素材列表
+          <span className="ml-1 text-muted-foreground font-normal">
+            （共 {materials.length} 条，已选 {selectedIds.size} 条）
+          </span>
+        </span>
+        {expanded
+          ? <ChevronDown className="size-3 text-muted-foreground" />
+          : <ChevronRight className="size-3 text-muted-foreground" />}
+      </button>
+
+      {/* 列表 */}
+      {expanded && (
+        <div className="px-2.5 pb-2.5 space-y-1.5 border-t">
+          {materials.length === 0 ? (
+            <p className="text-xs text-muted-foreground py-2 text-center">暂无素材</p>
+          ) : (
+            materials.map((m) => (
+              <MaterialItem
+                key={m.id}
+                material={m}
+                checked={selectedIds.has(m.id)}
+                onToggle={onToggle}
+              />
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx b/frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx
new file mode 100644
index 00000000..aa38973e
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/MaterialsToolbar.tsx
@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { AIMaterial } from '../../types/ai-writing';
+
+interface MaterialsToolbarProps {
+  materials: AIMaterial[];
+  selectedIds: Set<string>;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+  extraKeywords: string[];
+  onAddKeyword: (kw: string) => void;
+  onRemoveKeyword: (kw: string) => void;
+}
+
+export function MaterialsToolbar({
+  materials,
+  selectedIds,
+  onSelectAll,
+  onDeselectAll,
+  extraKeywords,
+  onAddKeyword,
+  onRemoveKeyword,
+}: MaterialsToolbarProps) {
+  const [kwInput, setKwInput] = useState('');
+  const allSelected = materials.length > 0 && selectedIds.size === materials.length;
+
+  function handleAddKeyword() {
+    const kw = kwInput.trim();
+    if (!kw || extraKeywords.includes(kw)) return;
+    onAddKeyword(kw);
+    setKwInput('');
+  }
+
+  return (
+    <div className="space-y-2">
+      {/* 全选/取消（无素材时隐藏） */}
+      {materials.length > 0 && (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">
+            已选 {selectedIds.size} / {materials.length} 条素材
+          </span>
+          <div className="flex-1" />
+          <button
+            type="button"
+            onClick={allSelected ? onDeselectAll : onSelectAll}
+            className="text-xs text-primary hover:underline"
+          >
+            {allSelected ? '取消全选' : '全选'}
+          </button>
+        </div>
+      )}
+
+      {/* 补充关键词 */}
+      <div className="space-y-1.5">
+        <label className="text-xs text-muted-foreground">补充搜索关键词（可选）</label>
+        <div className="flex gap-1.5">
+          <input
+            type="text"
+            value={kwInput}
+            onChange={(e) => setKwInput(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleAddKeyword()}
+            placeholder="输入关键词后按 Enter 或点击 +"
+            className="flex-1 h-7 rounded-md border border-input bg-background px-2.5 py-1 text-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-7 px-2"
+            onClick={handleAddKeyword}
+            disabled={!kwInput.trim()}
+          >
+            <Plus className="size-3" />
+          </Button>
+        </div>
+
+        {/* 已添加关键词 Tag 列表 */}
+        {extraKeywords.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {extraKeywords.map((kw) => (
+              <span
+                key={kw}
+                className="inline-flex items-center gap-1 rounded-full bg-primary/10 text-primary px-2 py-0.5 text-xs"
+              >
+                {kw}
+                <button
+                  type="button"
+                  onClick={() => onRemoveKeyword(kw)}
+                  className="hover:text-destructive leading-none"
+                >
+                  ×
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/OutlineCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/OutlineCard.tsx
new file mode 100644
index 00000000..08facb11
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/OutlineCard.tsx
@@ -0,0 +1,143 @@
+import { useState } from 'react';
+import { ListTree, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { AIOutline, OutlineSection as OutlineSectionType } from '../../types/ai-writing';
+import { OutlineSection } from './OutlineSection';
+
+interface OutlineCardProps {
+  outline: AIOutline;
+  onChange?: (updated: AIOutline) => void;
+  readOnly?: boolean;
+}
+
+export function OutlineCard({ outline, onChange, readOnly = false }: OutlineCardProps) {
+  const [collapsed, setCollapsed] = useState(false);
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState(outline.title);
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [overIndex, setOverIndex] = useState<number | null>(null);
+
+  const editable = !readOnly && !!onChange;
+
+  function commitTitle() {
+    setEditingTitle(false);
+    const trimmed = titleDraft.trim();
+    if (trimmed && trimmed !== outline.title) {
+      onChange?.({ ...outline, title: trimmed });
+    } else {
+      setTitleDraft(outline.title);
+    }
+  }
+
+  function updateSection(i: number, updated: OutlineSectionType) {
+    const sections = [...outline.sections];
+    sections[i] = updated;
+    onChange?.({ ...outline, sections });
+  }
+
+  function removeSection(i: number) {
+    onChange?.({ ...outline, sections: outline.sections.filter((_, idx) => idx !== i) });
+  }
+
+  function reorderSections(from: number, to: number) {
+    if (from === to) return;
+    const sections = [...outline.sections];
+    const [moved] = sections.splice(from, 1);
+    sections.splice(to, 0, moved);
+    onChange?.({ ...outline, sections });
+  }
+
+  function addSection() {
+    onChange?.({
+      ...outline,
+      sections: [...outline.sections, { sectionTitle: '', keyPoints: [], materialIds: [] }],
+    });
+  }
+
+  return (
+    <div className="rounded-md border bg-muted/20 overflow-hidden">
+      {/* 头部 */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b">
+        <ListTree className="size-3.5 text-purple-500 shrink-0" />
+        <span className="text-xs font-medium flex-1">文章大纲</span>
+        <button
+          type="button"
+          onClick={() => setCollapsed((v) => !v)}
+          className="text-xs text-muted-foreground hover:text-foreground"
+        >
+          {collapsed ? '展开' : '收起'}
+        </button>
+      </div>
+
+      {!collapsed && (
+        <div className="px-3 py-2.5 space-y-2">
+          {/* 文章标题 */}
+          <div className="flex items-center gap-1.5 text-xs">
+            <span className="text-muted-foreground shrink-0">标题：</span>
+            {editingTitle && editable ? (
+              <input
+                autoFocus
+                value={titleDraft}
+                onChange={(e) => setTitleDraft(e.target.value)}
+                onBlur={commitTitle}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') commitTitle();
+                  if (e.key === 'Escape') { setTitleDraft(outline.title); setEditingTitle(false); }
+                }}
+                className="flex-1 bg-transparent border-b border-primary outline-none font-semibold"
+              />
+            ) : (
+              <span
+                className={editable ? 'flex-1 font-semibold cursor-text hover:text-primary' : 'flex-1 font-semibold'}
+                onClick={() => editable && setEditingTitle(true)}
+              >
+                {outline.title || <span className="text-muted-foreground italic font-normal">（未设置标题）</span>}
+              </span>
+            )}
+          </div>
+
+          {/* 章节列表 */}
+          <div className="space-y-1.5">
+            {outline.sections.map((section, i) => (
+              <OutlineSection
+                key={i}
+                section={section}
+                index={i}
+                onChange={(updated) => updateSection(i, updated)}
+                onRemove={editable ? () => removeSection(i) : undefined}
+                readOnly={!editable}
+                isDragging={dragIndex === i}
+                isOver={overIndex === i && dragIndex !== null && dragIndex !== i}
+                onDragStart={() => setDragIndex(i)}
+                onDragEnter={() => setOverIndex(i)}
+                onDrop={() => {
+                  if (dragIndex !== null && dragIndex !== i) reorderSections(dragIndex, i);
+                  setDragIndex(null);
+                  setOverIndex(null);
+                }}
+                onDragEnd={() => {
+                  setDragIndex(null);
+                  setOverIndex(null);
+                }}
+              />
+            ))}
+          </div>
+
+          {/* 添加章节 */}
+          {editable && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="w-full h-7 text-xs gap-1.5 text-muted-foreground"
+              onClick={addSection}
+            >
+              <Plus className="size-3" />
+              添加章节
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/OutlineSection.tsx b/frontend-web/src/open-canvas/components/ai-writing/OutlineSection.tsx
new file mode 100644
index 00000000..747df029
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/OutlineSection.tsx
@@ -0,0 +1,148 @@
+import { useState } from 'react';
+import { ChevronRight, ChevronDown, Plus, X, GripVertical } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { OutlineSection as OutlineSectionType } from '../../types/ai-writing';
+
+interface OutlineSectionProps {
+  section: OutlineSectionType;
+  index: number;
+  onChange: (updated: OutlineSectionType) => void;
+  onRemove?: () => void;
+  readOnly?: boolean;
+  // Drag-and-drop
+  isDragging?: boolean;
+  isOver?: boolean;
+  onDragStart?: () => void;
+  onDragEnter?: () => void;
+  onDrop?: () => void;
+  onDragEnd?: () => void;
+}
+
+export function OutlineSection({
+  section, index, onChange, onRemove, readOnly,
+  isDragging, isOver, onDragStart, onDragEnter, onDrop, onDragEnd,
+}: OutlineSectionProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleDraft, setTitleDraft] = useState(section.sectionTitle);
+
+  function commitTitle() {
+    setEditingTitle(false);
+    const trimmed = titleDraft.trim();
+    if (trimmed && trimmed !== section.sectionTitle) {
+      onChange({ ...section, sectionTitle: trimmed });
+    } else {
+      setTitleDraft(section.sectionTitle);
+    }
+  }
+
+  function updateKeyPoint(i: number, value: string) {
+    const next = [...section.keyPoints];
+    next[i] = value;
+    onChange({ ...section, keyPoints: next });
+  }
+
+  function removeKeyPoint(i: number) {
+    onChange({ ...section, keyPoints: section.keyPoints.filter((_, idx) => idx !== i) });
+  }
+
+  function addKeyPoint() {
+    onChange({ ...section, keyPoints: [...section.keyPoints, ''] });
+  }
+
+  return (
+    <div
+      draggable={!readOnly}
+      onDragStart={(e) => { e.stopPropagation(); onDragStart?.(); }}
+      onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); onDragEnter?.(); }}
+      onDrop={(e) => { e.preventDefault(); e.stopPropagation(); onDrop?.(); }}
+      onDragEnd={(e) => { e.stopPropagation(); onDragEnd?.(); }}
+      className={cn(
+        'rounded border bg-background text-xs transition-all duration-150 select-none',
+        isDragging ? 'opacity-40 border-border/60' : isOver ? 'border-blue-400 ring-1 ring-blue-400/40' : 'border-border/60',
+      )}
+    >
+      {/* 章节头 */}
+      <div className="flex items-center gap-1.5 px-2.5 py-2">
+        {!readOnly && (
+          <GripVertical className="size-3 text-muted-foreground/40 shrink-0 cursor-grab active:cursor-grabbing" />
+        )}
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          className="shrink-0"
+        >
+          {expanded
+            ? <ChevronDown className="size-3.5 text-muted-foreground" />
+            : <ChevronRight className="size-3.5 text-muted-foreground" />}
+        </button>
+
+        <span className="text-muted-foreground/60 shrink-0 w-4 text-center">{index + 1}.</span>
+
+        {editingTitle && !readOnly ? (
+          <input
+            autoFocus
+            value={titleDraft}
+            onChange={(e) => setTitleDraft(e.target.value)}
+            onBlur={commitTitle}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') commitTitle();
+              if (e.key === 'Escape') { setTitleDraft(section.sectionTitle); setEditingTitle(false); }
+            }}
+            className="flex-1 bg-transparent border-b border-primary outline-none font-medium"
+          />
+        ) : (
+          <span
+            className={cn('flex-1 font-medium', !readOnly && 'cursor-text hover:text-primary')}
+            onClick={() => !readOnly && setEditingTitle(true)}
+          >
+            {section.sectionTitle || <span className="text-muted-foreground italic">（未命名）</span>}
+          </span>
+        )}
+
+        <span className="text-muted-foreground/50 shrink-0">{section.keyPoints.length} 要点</span>
+        {!readOnly && onRemove && (
+          <button type="button" onClick={onRemove} className="shrink-0 text-muted-foreground/40 hover:text-destructive">
+            <X className="size-3" />
+          </button>
+        )}
+      </div>
+
+      {/* 要点列表 */}
+      {expanded && (
+        <div className="px-8 pb-2.5 space-y-1 border-t">
+          {section.keyPoints.map((kp, i) => (
+            <div key={i} className="flex items-center gap-1.5 pt-1.5">
+              <span className="text-muted-foreground/40 shrink-0">•</span>
+              {readOnly ? (
+                <span className="flex-1 text-muted-foreground">{kp}</span>
+              ) : (
+                <input
+                  value={kp}
+                  onChange={(e) => updateKeyPoint(i, e.target.value)}
+                  placeholder="输入要点…"
+                  className="flex-1 bg-transparent border-b border-transparent hover:border-border focus:border-primary outline-none text-muted-foreground"
+                />
+              )}
+              {!readOnly && (
+                <button type="button" onClick={() => removeKeyPoint(i)} className="shrink-0 text-muted-foreground/30 hover:text-destructive">
+                  <X className="size-3" />
+                </button>
+              )}
+            </div>
+          ))}
+          {!readOnly && (
+            <button
+              type="button"
+              onClick={addKeyPoint}
+              className="flex items-center gap-1 text-muted-foreground/50 hover:text-primary pt-0.5"
+            >
+              <Plus className="size-3" />
+              添加要点
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/OutlineStreamingView.tsx b/frontend-web/src/open-canvas/components/ai-writing/OutlineStreamingView.tsx
new file mode 100644
index 00000000..4ac3de84
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/OutlineStreamingView.tsx
@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from 'react';
+import { FileText, ChevronDown, ChevronRight, Brain } from 'lucide-react';
+
+interface OutlineStreamingViewProps {
+  text: string;
+  thinkingText?: string;
+}
+
+export function OutlineStreamingView({ text, thinkingText }: OutlineStreamingViewProps) {
+  const preRef = useRef<HTMLPreElement>(null);
+  const thinkRef = useRef<HTMLPreElement>(null);
+  const [thinkOpen, setThinkOpen] = useState(true);
+
+  useEffect(() => {
+    if (preRef.current) {
+      preRef.current.scrollTop = preRef.current.scrollHeight;
+    }
+  }, [text]);
+
+  useEffect(() => {
+    if (thinkOpen && thinkRef.current) {
+      thinkRef.current.scrollTop = thinkRef.current.scrollHeight;
+    }
+  }, [thinkingText, thinkOpen]);
+
+  if (!text && !thinkingText) return null;
+
+  return (
+    <div className="px-4 pb-2 space-y-2">
+      {/* 思考过程区（仅在有思考内容时展示） */}
+      {thinkingText && (
+        <div className="rounded-xl border border-amber-200 dark:border-amber-900 bg-amber-50/50 dark:bg-amber-950/20 overflow-hidden shadow-sm">
+          <button
+            type="button"
+            onClick={() => setThinkOpen((v) => !v)}
+            className="w-full flex items-center gap-2 px-3 py-2 border-b border-amber-200/60 dark:border-amber-900/60 bg-amber-100/40 dark:bg-amber-900/30 hover:bg-amber-100/70 dark:hover:bg-amber-900/50 transition-colors"
+          >
+            <Brain className="size-3.5 text-amber-500 shrink-0" />
+            <span className="text-xs font-medium text-amber-600 dark:text-amber-400">
+              思考过程
+            </span>
+            <span className="ml-auto text-amber-400">
+              {thinkOpen
+                ? <ChevronDown className="size-3.5" />
+                : <ChevronRight className="size-3.5" />}
+            </span>
+          </button>
+          {thinkOpen && (
+            <pre
+              ref={thinkRef}
+              className="text-[11px] font-mono leading-relaxed p-3 text-amber-700/70 dark:text-amber-300/60 whitespace-pre-wrap max-h-40 overflow-y-auto italic"
+            >
+              {thinkingText}
+              {/* 思考仍在进行时显示光标 */}
+              {!text && (
+                <span className="inline-block w-0.5 h-3.5 bg-amber-400 ml-0.5 align-text-bottom animate-[blink_1s_step-end_infinite]" />
+              )}
+            </pre>
+          )}
+        </div>
+      )}
+
+      {/* 正文流式区 */}
+      {text && (
+        <div className="rounded-xl border border-purple-200 dark:border-purple-900 bg-purple-50/50 dark:bg-purple-950/20 overflow-hidden shadow-sm">
+          <div className="flex items-center gap-2 px-3 py-2 border-b border-purple-200/60 dark:border-purple-900/60 bg-purple-100/40 dark:bg-purple-900/30">
+            <FileText className="size-3.5 text-purple-500 shrink-0" />
+            <span className="text-xs font-medium text-purple-600 dark:text-purple-400">
+              作家正在规划大纲…
+            </span>
+            <span className="ml-auto inline-flex gap-1">
+              {[0, 1, 2].map((i) => (
+                <span
+                  key={i}
+                  className="size-1 rounded-full bg-purple-400 animate-bounce"
+                  style={{ animationDelay: `${i * 150}ms` }}
+                />
+              ))}
+            </span>
+          </div>
+          <pre
+            ref={preRef}
+            className="text-[11px] font-mono leading-relaxed p-3 text-muted-foreground whitespace-pre-wrap max-h-52 overflow-y-auto"
+          >
+            {text}
+            <span className="inline-block w-0.5 h-3.5 bg-purple-400 ml-0.5 align-text-bottom animate-[blink_1s_step-end_infinite]" />
+          </pre>
+        </div>
+      )}
+
+      <style>{`
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50%       { opacity: 0; }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/ReviewCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/ReviewCard.tsx
new file mode 100644
index 00000000..dcc5403a
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/ReviewCard.tsx
@@ -0,0 +1,74 @@
+import { cn } from '@/lib/utils';
+import type { ReviewResult } from '../../types/ai-writing';
+import { ScoreBar } from './ScoreBar';
+import { IssueList } from './IssueList';
+
+interface ReviewCardProps {
+  review: ReviewResult;
+  revisionCount?: number;
+  selectedIndices?: Set<number>;
+  onToggleIssue?: (index: number) => void;
+}
+
+export function ReviewCard({ review, revisionCount, selectedIndices, onToggleIssue }: ReviewCardProps) {
+  const isPassed = review.verdict === 'pass';
+
+  return (
+    <div className="rounded-md border bg-muted/20 overflow-hidden text-xs">
+      {/* 头部：综合评分 + 轮次 */}
+      <div className="flex items-center justify-between px-3 py-2 border-b">
+        <div className="flex items-center gap-2">
+          <span className="font-medium">编辑审核结果</span>
+          {revisionCount !== undefined && revisionCount > 0 && (
+            <span className="text-muted-foreground">（第 {revisionCount} 次修改）</span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <span
+            className={cn(
+              'rounded-full px-2 py-0.5 text-[10px] font-semibold',
+              isPassed
+                ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400'
+                : 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
+            )}
+          >
+            {isPassed ? '通过' : '打回'}
+          </span>
+          <span className="font-semibold tabular-nums">
+            {review.overallScore}
+            <span className="text-muted-foreground font-normal"> / 100</span>
+          </span>
+        </div>
+      </div>
+
+      {/* 分项评分 */}
+      <div className="px-3 py-2.5 space-y-2 border-b">
+        <ScoreBar label="事实准确性" score={review.factScore} />
+        <ScoreBar label="逻辑结构" score={review.logicScore} />
+        <ScoreBar label="语言文字" score={review.languageScore} />
+        <p className="text-muted-foreground/60 text-[10px]">
+          通过线：{review.passThreshold} 分
+        </p>
+      </div>
+
+      {/* 修改意见（支持勾选） */}
+      {review.revisionNotes.length > 0 && (
+        <div className="px-3 py-2.5">
+          <div className="flex items-center justify-between mb-2">
+            <p className="text-muted-foreground font-medium">修改意见</p>
+            {selectedIndices !== undefined && onToggleIssue && (
+              <p className="text-[10px] text-muted-foreground">
+                已选 {selectedIndices.size} / {review.revisionNotes.length}
+              </p>
+            )}
+          </div>
+          <IssueList
+            issues={review.revisionNotes}
+            selectedIndices={selectedIndices}
+            onToggle={onToggleIssue}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/ReviewStreamingView.tsx b/frontend-web/src/open-canvas/components/ai-writing/ReviewStreamingView.tsx
new file mode 100644
index 00000000..8019d069
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/ReviewStreamingView.tsx
@@ -0,0 +1,192 @@
+import { useEffect, useRef } from 'react';
+import { CheckCircle2, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { StreamingReviewItem, ReviewIssue } from '../../types/ai-writing';
+
+const CATEGORY_META: Record<
+  'fact' | 'logic' | 'language',
+  { label: string; order: number }
+> = {
+  fact:     { label: '事实准确性', order: 0 },
+  logic:    { label: '逻辑结构',   order: 1 },
+  language: { label: '语言文字',   order: 2 },
+};
+
+const CATEGORIES = (['fact', 'logic', 'language'] as const);
+
+function ScoreBar({ score }: { score: number }) {
+  const color =
+    score >= 80 ? 'bg-green-400' :
+    score >= 60 ? 'bg-amber-400' :
+                  'bg-red-400';
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+        <div
+          className={cn('h-full rounded-full transition-all duration-500', color)}
+          style={{ width: `${score}%` }}
+        />
+      </div>
+      <span className="text-xs font-semibold tabular-nums w-8 text-right">{score}</span>
+    </div>
+  );
+}
+
+function IssueRow({ issue }: { issue: ReviewIssue }) {
+  return (
+    <div className="text-[11px] leading-relaxed border-l-2 border-orange-200 dark:border-orange-800 pl-2 py-0.5">
+      <span className={cn(
+        'font-medium mr-1',
+        issue.severity === 'major' ? 'text-red-500' : 'text-amber-500',
+      )}>
+        {issue.severity === 'major' ? '严重' : '轻微'}
+      </span>
+      <span className="text-muted-foreground">{issue.issue}</span>
+      {issue.suggestion && (
+        <span className="text-orange-600 dark:text-orange-400"> → {issue.suggestion}</span>
+      )}
+    </div>
+  );
+}
+
+// 流式打字机文本块（审核进行中的分类显示）
+function StreamingText({ item }: { item: StreamingReviewItem }) {
+  const preRef = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    if (preRef.current) {
+      preRef.current.scrollTop = preRef.current.scrollHeight;
+    }
+  }, [item.streamingText, item.thinkingText]);
+
+  const hasContent = item.streamingText || item.thinkingText;
+  if (!hasContent) {
+    return (
+      <p className="text-[11px] text-muted-foreground pl-5 italic">正在审阅…</p>
+    );
+  }
+
+  return (
+    <pre
+      ref={preRef}
+      className="text-[11px] font-mono leading-relaxed mt-1 p-2 rounded bg-muted/40 text-muted-foreground whitespace-pre-wrap max-h-32 overflow-y-auto"
+    >
+      {item.thinkingText && (
+        <span className="italic text-amber-600/70 dark:text-amber-400/60">
+          {item.thinkingText}
+        </span>
+      )}
+      {item.streamingText}
+      <span className="inline-block w-0.5 h-3 bg-orange-400 ml-0.5 align-text-bottom animate-[blink_1s_step-end_infinite]" />
+    </pre>
+  );
+}
+
+interface ReviewStreamingViewProps {
+  items: StreamingReviewItem[];
+}
+
+export function ReviewStreamingView({ items }: ReviewStreamingViewProps) {
+  if (items.length === 0) return null;
+
+  const doneItems = items.filter((it) => it.isDone);
+  const allDone = doneItems.length === 3;
+  const overallScore =
+    doneItems.length > 0
+      ? Math.round(doneItems.reduce((s, it) => s + it.score, 0) / doneItems.length)
+      : 0;
+
+  return (
+    <div className="px-4 pb-2">
+      <div className="rounded-xl border border-orange-200 dark:border-orange-900 bg-orange-50/50 dark:bg-orange-950/20 overflow-hidden shadow-sm">
+        {/* 标题栏 */}
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-orange-200/60 dark:border-orange-900/60 bg-orange-100/40 dark:bg-orange-900/30">
+          <span className="text-xs font-medium text-orange-600 dark:text-orange-400">
+            编辑正在审核…
+          </span>
+          {!allDone && (
+            <span className="ml-auto inline-flex gap-1">
+              {[0, 1, 2].map((i) => (
+                <span
+                  key={i}
+                  className="size-1 rounded-full bg-orange-400 animate-bounce"
+                  style={{ animationDelay: `${i * 150}ms` }}
+                />
+              ))}
+            </span>
+          )}
+          {allDone && (
+            <span className="ml-auto text-xs text-orange-600 dark:text-orange-400 font-semibold tabular-nums">
+              综合 {overallScore}
+            </span>
+          )}
+        </div>
+
+        {/* 逐项审核结果 */}
+        <div className="divide-y divide-orange-100 dark:divide-orange-900/50">
+          {CATEGORIES.map((cat) => {
+            const meta = CATEGORY_META[cat];
+            const item = items.find((it) => it.category === cat);
+            const isDone = item?.isDone ?? false;
+            const isStreaming = item != null && !item.isDone;
+            const isPending = item == null;
+
+            return (
+              <div key={cat} className="px-3 py-2 space-y-1.5">
+                {/* 分类行 */}
+                <div className="flex items-center gap-2">
+                  {isDone ? (
+                    <CheckCircle2 className="size-3.5 text-green-500 shrink-0" />
+                  ) : isStreaming ? (
+                    <Loader2 className="size-3.5 text-orange-400 animate-spin shrink-0" />
+                  ) : (
+                    <span className="size-3.5 rounded-full border border-muted-foreground/30 shrink-0" />
+                  )}
+                  <span className={cn(
+                    'text-xs font-medium',
+                    isPending ? 'text-muted-foreground' : 'text-foreground',
+                  )}>
+                    {meta.label}
+                  </span>
+                </div>
+
+                {/* 审核进行中：流式打字机文本 */}
+                {isStreaming && item && <StreamingText item={item} />}
+
+                {/* 审核完成：得分 + 问题列表 */}
+                {isDone && item && (
+                  <>
+                    <ScoreBar score={item.score} />
+                    {item.issues.length > 0 ? (
+                      <div className="space-y-1 mt-1">
+                        {item.issues.slice(0, 3).map((iss, i) => (
+                          <IssueRow key={i} issue={iss} />
+                        ))}
+                        {item.issues.length > 3 && (
+                          <p className="text-[11px] text-muted-foreground pl-2">
+                            +{item.issues.length - 3} 条意见…
+                          </p>
+                        )}
+                      </div>
+                    ) : (
+                      <p className="text-[11px] text-green-600 dark:text-green-400 pl-5">
+                        无问题
+                      </p>
+                    )}
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50%       { opacity: 0; }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/RevisionSummaryCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/RevisionSummaryCard.tsx
new file mode 100644
index 00000000..0c9dca9a
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/RevisionSummaryCard.tsx
@@ -0,0 +1,79 @@
+import { CheckCircle2, XCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { RevisionSummary } from '../../types/ai-writing';
+
+interface RevisionSummaryCardProps {
+  summary: RevisionSummary;
+}
+
+const CATEGORY_LABEL: Record<string, string> = {
+  fact: '事实',
+  logic: '逻辑',
+  language: '语言',
+};
+
+export function RevisionSummaryCard({ summary }: RevisionSummaryCardProps) {
+  const { revisedIssues, skippedIssues, oldWordCount, newWordCount } = summary;
+  const wordDiff = newWordCount - oldWordCount;
+
+  return (
+    <div className="rounded-md border border-green-200 dark:border-green-900/50 bg-green-50/50 dark:bg-green-950/20 overflow-hidden text-xs">
+      {/* 头部 */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-green-200/60 dark:border-green-900/60 bg-green-100/40 dark:bg-green-900/30">
+        <span className="font-medium text-green-700 dark:text-green-400">修改完成</span>
+        <span className="text-muted-foreground tabular-nums">
+          {newWordCount.toLocaleString()} 字
+          {wordDiff !== 0 && (
+            <span className={cn('ml-1', wordDiff > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-500')}>
+              ({wordDiff > 0 ? '+' : ''}{wordDiff})
+            </span>
+          )}
+        </span>
+      </div>
+
+      <div className="px-3 py-2.5 space-y-2">
+        {/* 已修改 */}
+        {revisedIssues.length > 0 && (
+          <div className="space-y-1">
+            <p className="text-green-600 dark:text-green-400 font-medium flex items-center gap-1">
+              <CheckCircle2 className="size-3.5" />
+              已修改 {revisedIssues.length} 条意见
+            </p>
+            {revisedIssues.map((iss, i) => (
+              <div key={i} className="flex items-start gap-1.5 pl-5 text-muted-foreground leading-snug">
+                <span className={cn(
+                  'shrink-0 rounded px-1 py-0 text-[10px] font-medium mt-0.5',
+                  iss.category === 'fact' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400' :
+                  iss.category === 'logic' ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-400' :
+                  'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-400',
+                )}>
+                  {CATEGORY_LABEL[iss.category] ?? iss.category}
+                </span>
+                <span>{iss.issue}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* 已跳过 */}
+        {skippedIssues.length > 0 && (
+          <div className="space-y-1">
+            <p className="text-muted-foreground font-medium flex items-center gap-1">
+              <XCircle className="size-3.5" />
+              跳过 {skippedIssues.length} 条意见
+            </p>
+            {skippedIssues.map((iss, i) => (
+              <div key={i} className="flex items-start gap-1.5 pl-5 text-muted-foreground/60 leading-snug line-through">
+                <span>{iss.issue}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {revisedIssues.length === 0 && skippedIssues.length === 0 && (
+          <p className="text-muted-foreground text-center py-1">已完成修改</p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/ScoreBar.tsx b/frontend-web/src/open-canvas/components/ai-writing/ScoreBar.tsx
new file mode 100644
index 00000000..2e21998d
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/ScoreBar.tsx
@@ -0,0 +1,39 @@
+import { cn } from '@/lib/utils';
+
+interface ScoreBarProps {
+  label: string;
+  score: number;
+  className?: string;
+}
+
+export function ScoreBar({ label, score, className }: ScoreBarProps) {
+  const clipped = Math.min(100, Math.max(0, score));
+
+  const color =
+    clipped >= 80
+      ? 'bg-green-500'
+      : clipped >= 60
+        ? 'bg-yellow-500'
+        : 'bg-red-500';
+
+  const verdict =
+    clipped >= 80 ? '优秀' : clipped >= 60 ? '需改进' : '不合格';
+
+  return (
+    <div className={cn('space-y-1', className)}>
+      <div className="flex justify-between text-xs text-muted-foreground">
+        <span>{label}</span>
+        <span className="font-medium tabular-nums">
+          {clipped}
+          <span className="text-muted-foreground/60 ml-1">({verdict})</span>
+        </span>
+      </div>
+      <div className="h-1.5 w-full rounded-full bg-muted overflow-hidden">
+        <div
+          className={cn('h-full rounded-full transition-all duration-500', color)}
+          style={{ width: `${clipped}%` }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/TimelineStep.tsx b/frontend-web/src/open-canvas/components/ai-writing/TimelineStep.tsx
new file mode 100644
index 00000000..3ef0b7e1
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/TimelineStep.tsx
@@ -0,0 +1,106 @@
+import { AlertCircle, AlertTriangle, CheckCircle2, Circle, Loader2, PauseCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { ProgressEvent } from '../../types/ai-writing';
+
+type StepStatus = 'done' | 'running' | 'paused' | 'waiting' | 'error' | 'warning';
+
+interface TimelineStepProps {
+  event: ProgressEvent;
+  isLast?: boolean;
+  children?: React.ReactNode;
+}
+
+function statusOf(event: ProgressEvent, isLast: boolean): StepStatus {
+  if (event.type === 'error') return 'error';
+  if (event.type === 'notice') return 'warning';
+  if (event.type === 'await_user') return 'paused';
+  // step_start 只有在列表末尾（后续事件还未到达）时才显示转圈，否则已有后续事件说明该步骤已完成
+  if (event.type === 'step_start') return isLast ? 'running' : 'done';
+  return 'done';
+}
+
+const AGENT_COLOR: Record<string, string> = {
+  素材收集专家: 'text-blue-500',
+  作家: 'text-purple-500',
+  编辑: 'text-orange-500',
+  系统: 'text-muted-foreground',
+};
+
+export function TimelineStep({ event, isLast, children }: TimelineStepProps) {
+  const status = statusOf(event, isLast ?? true);
+  // notice=非致命告警（如 ES 波动、模型兜底），error=致命错误，两者都展示「标题 + 真实原因」
+  const isAlert = event.type === 'error' || event.type === 'notice';
+  const isError = event.type === 'error';
+
+  return (
+    <div className="flex gap-3">
+      {/* 竖线 + 图标 */}
+      <div className="flex flex-col items-center">
+        <StatusIcon status={status} />
+        {!isLast && <div className="w-px flex-1 bg-border mt-1" />}
+      </div>
+
+      {/* 内容 */}
+      <div className={cn('pb-4 flex-1 min-w-0', isLast && 'pb-0')}>
+        {event.agentName && (
+          <span
+            className={cn(
+              'text-xs font-semibold',
+              AGENT_COLOR[event.agentName] ?? 'text-muted-foreground',
+            )}
+          >
+            {event.agentName}
+          </span>
+        )}
+
+        {isAlert ? (
+          <div
+            className={cn(
+              'mt-1 rounded-md border px-2.5 py-1.5',
+              isError
+                ? 'border-red-200 bg-red-50/60 dark:border-red-900/40 dark:bg-red-950/20'
+                : 'border-amber-200 bg-amber-50/60 dark:border-amber-900/40 dark:bg-amber-950/20',
+            )}
+          >
+            <p
+              className={cn(
+                'text-xs font-medium',
+                isError
+                  ? 'text-red-600 dark:text-red-400'
+                  : 'text-amber-600 dark:text-amber-500',
+              )}
+            >
+              {event.title || event.message || (isError ? '出错了' : '提示')}
+            </p>
+            {event.detail && (
+              <p className="mt-0.5 text-[11px] leading-relaxed text-muted-foreground break-words">
+                {event.detail}
+              </p>
+            )}
+          </div>
+        ) : (
+          <span className="ml-1.5 text-xs text-muted-foreground">{event.message}</span>
+        )}
+
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function StatusIcon({ status }: { status: StepStatus }) {
+  switch (status) {
+    case 'done':
+      return <CheckCircle2 className="size-4 text-green-500 shrink-0 mt-0.5" />;
+    case 'running':
+      return <Loader2 className="size-4 text-blue-500 shrink-0 mt-0.5 animate-spin" />;
+    case 'paused':
+      return <PauseCircle className="size-4 text-yellow-500 shrink-0 mt-0.5" />;
+    case 'error':
+      return <AlertCircle className="size-4 text-red-500 shrink-0 mt-0.5" />;
+    case 'warning':
+      return <AlertTriangle className="size-4 text-amber-500 shrink-0 mt-0.5" />;
+    default:
+      return <Circle className="size-4 text-muted-foreground/40 shrink-0 mt-0.5" />;
+  }
+}
diff --git a/frontend-web/src/open-canvas/components/ai-writing/WritingSkeletonCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/WritingSkeletonCard.tsx
new file mode 100644
index 00000000..d68414f4
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/ai-writing/WritingSkeletonCard.tsx
@@ -0,0 +1,232 @@
+import { cn } from '@/lib/utils';
+import type { WritingStatus } from '../../types/ai-writing';
+
+interface WritingSkeletonCardProps {
+  status: WritingStatus;
+  /** 素材收集阶段的实时进度文案（仅 researching 阶段使用） */
+  researchProgress?: string;
+}
+
+// ── 基础骨架元素 ──────────────────────────────────────────────────────────────
+
+function SkeletonLine({ className }: { className?: string }) {
+  return (
+    <div className={cn('h-3 rounded-md bg-muted animate-pulse', className)} />
+  );
+}
+
+function ThinkingDots({ color = 'bg-blue-400' }: { color?: string }) {
+  return (
+    <span className="inline-flex gap-1 items-center">
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          className={cn('size-1.5 rounded-full animate-bounce', color)}
+          style={{ animationDelay: `${i * 150}ms` }}
+        />
+      ))}
+    </span>
+  );
+}
+
+// ── 素材收集骨架屏 ────────────────────────────────────────────────────────────
+
+function MaterialsSkeleton({ researchProgress }: { researchProgress?: string }) {
+  return (
+    <div className="space-y-3 p-4">
+      {/* 标题行：展示素材收集专家的实时进度 */}
+      <div className="flex items-center gap-2 text-xs text-blue-500 font-medium">
+        <ThinkingDots color="bg-blue-400" />
+        <span>{researchProgress || '素材收集专家搜索中…'}</span>
+      </div>
+
+      {/* 关键词标签占位 */}
+      <div className="flex gap-1.5 flex-wrap">
+        {[60, 80, 50].map((w, i) => (
+          <div
+            key={i}
+            className="h-5 rounded-full bg-blue-100/60 dark:bg-blue-900/30 animate-pulse"
+            style={{ width: `${w}px` }}
+          />
+        ))}
+      </div>
+
+      {/* 素材卡片占位 */}
+      {[0, 1, 2, 3].map((i) => (
+        <div key={i} className="rounded-lg border bg-muted/30 p-3 space-y-2">
+          {/* 标题 */}
+          <div className="flex items-start gap-2">
+            <SkeletonLine className={cn('flex-1 h-3.5', i % 3 === 0 ? 'w-4/5' : i % 3 === 1 ? 'w-3/4' : 'w-2/3')} />
+          </div>
+          {/* 来源 + 时间 + 相关度 */}
+          <div className="flex items-center gap-2">
+            <SkeletonLine className="w-20 h-2" />
+            <SkeletonLine className="w-16 h-2" />
+            <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+              <div
+                className="h-full rounded-full bg-blue-200/60 dark:bg-blue-700/40 animate-pulse"
+                style={{ width: `${55 + i * 8}%` }}
+              />
+            </div>
+          </div>
+          {/* 摘要行 */}
+          <SkeletonLine className="w-full h-2" />
+          <SkeletonLine className={cn('h-2', i % 2 === 0 ? 'w-5/6' : 'w-4/5')} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── 大纲规划骨架屏 ────────────────────────────────────────────────────────────
+
+function OutlineSkeleton() {
+  return (
+    <div className="space-y-3 p-4">
+      <div className="flex items-center gap-2 text-xs text-purple-500 font-medium">
+        <ThinkingDots color="bg-purple-400" />
+        <span>作家规划大纲中…</span>
+      </div>
+
+      {/* 文章标题占位 */}
+      <SkeletonLine className="w-3/5 h-4 mx-auto" />
+
+      {/* 章节列表 */}
+      {[0, 1, 2, 3].map((i) => (
+        <div key={i} className="flex items-start gap-2 pl-1">
+          <div className="mt-1 size-2 shrink-0 rounded-sm bg-purple-200/70 dark:bg-purple-800/40 animate-pulse" />
+          <div className="flex-1 space-y-1.5">
+            <SkeletonLine className={cn('h-3', i % 2 === 0 ? 'w-2/5' : 'w-1/2')} />
+            <SkeletonLine className="w-3/5 h-2" />
+            {i % 2 === 0 && <SkeletonLine className="w-2/5 h-2" />}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── 正文写作骨架屏 ────────────────────────────────────────────────────────────
+
+function DraftSkeleton() {
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex items-center gap-2 text-xs text-purple-500 font-medium">
+        <ThinkingDots color="bg-purple-400" />
+        <span>作家写作中…</span>
+      </div>
+
+      {/* 标题占位 */}
+      <SkeletonLine className="w-2/5 h-5 mx-auto" />
+
+      {/* 章节内容 */}
+      {[0, 1, 2].map((i) => (
+        <div key={i} className="space-y-1.5">
+          <SkeletonLine className="w-1/4 h-3.5" />
+          <SkeletonLine className="w-full h-2" />
+          <SkeletonLine className="w-full h-2" />
+          <SkeletonLine className={cn('h-2', i % 2 === 0 ? 'w-4/5' : 'w-11/12')} />
+          <SkeletonLine className="w-full h-2" />
+          <SkeletonLine className="w-3/4 h-2" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── 编辑审核骨架屏 ────────────────────────────────────────────────────────────
+
+function ReviewSkeleton() {
+  return (
+    <div className="space-y-3 p-4">
+      <div className="flex items-center gap-2 text-xs text-orange-500 font-medium">
+        <ThinkingDots color="bg-orange-400" />
+        <span>编辑审核中…</span>
+      </div>
+
+      {/* 综合评分占位 */}
+      <div className="flex items-center justify-between">
+        <SkeletonLine className="w-24 h-3" />
+        <SkeletonLine className="w-12 h-4" />
+      </div>
+
+      {/* 分项评分条 */}
+      {['事实准确度', '逻辑结构', '语言质量'].map((label, i) => (
+        <div key={label} className="space-y-1">
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-muted-foreground">{label}</span>
+            <SkeletonLine className="w-8 h-3" />
+          </div>
+          <div className="h-1.5 rounded-full bg-muted overflow-hidden">
+            <div
+              className="h-full rounded-full bg-orange-200/60 dark:bg-orange-700/40 animate-pulse"
+              style={{ width: `${55 + i * 10}%` }}
+            />
+          </div>
+        </div>
+      ))}
+
+      {/* 意见条目占位 */}
+      <div className="space-y-2 pt-1 border-t">
+        <SkeletonLine className="w-full h-2" />
+        <SkeletonLine className="w-5/6 h-2" />
+        <SkeletonLine className="w-full h-2" />
+        <SkeletonLine className="w-4/5 h-2" />
+      </div>
+    </div>
+  );
+}
+
+// ── 按意见修改骨架屏 ──────────────────────────────────────────────────────────
+
+function RevisingSkeleton() {
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex items-center gap-2 text-xs text-purple-500 font-medium">
+        <ThinkingDots color="bg-purple-400" />
+        <span>作家按意见修改中…</span>
+      </div>
+      <SkeletonLine className="w-2/5 h-5 mx-auto" />
+      {[0, 1, 2].map((i) => (
+        <div key={i} className="space-y-1.5">
+          <SkeletonLine className="w-1/4 h-3.5" />
+          <SkeletonLine className="w-full h-2" />
+          <SkeletonLine className={cn('h-2', i % 2 === 0 ? 'w-4/5' : 'w-full')} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── 状态映射 ──────────────────────────────────────────────────────────────────
+
+// researching / awaiting_material_confirm 由 WritingSkeletonCard 单独处理（需透传进度文案）
+const SKELETON_MAP: Partial<Record<WritingStatus, React.FC>> = {
+  // 实际运行状态
+  writing_outline:         OutlineSkeleton,
+  writing_draft:           DraftSkeleton,
+  reviewing:               ReviewSkeleton,
+  revising:                RevisingSkeleton,
+  // 过渡等待状态（用户提交后、后端事件到达前的空白期）
+  awaiting_outline_confirm:   OutlineSkeleton,     // 过渡到写作
+  awaiting_draft_confirm:     DraftSkeleton,       // 提交修改意见或编辑审核后
+  awaiting_review_confirm:    RevisingSkeleton,    // 采纳编辑意见后
+};
+
+export function WritingSkeletonCard({ status, researchProgress }: WritingSkeletonCardProps) {
+  // 素材收集阶段单独渲染，以便透传实时进度文案
+  if (status === 'researching' || status === 'awaiting_material_confirm') {
+    return (
+      <div className="rounded-xl border bg-card shadow-sm overflow-hidden">
+        <MaterialsSkeleton researchProgress={researchProgress} />
+      </div>
+    );
+  }
+  const Skeleton = SKELETON_MAP[status];
+  if (!Skeleton) return null;
+  return (
+    <div className="rounded-xl border bg-card shadow-sm overflow-hidden">
+      <Skeleton />
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/artifact/CanvasArtifactPanel.tsx b/frontend-web/src/open-canvas/components/artifact/CanvasArtifactPanel.tsx
index 82a1bd2e..fe99daa1 100644
--- a/frontend-web/src/open-canvas/components/artifact/CanvasArtifactPanel.tsx
+++ b/frontend-web/src/open-canvas/components/artifact/CanvasArtifactPanel.tsx
@@ -87,6 +87,20 @@ export function CanvasArtifactPanel() {
     );
   }
 
+  // While streaming but no partial content yet — show a loading placeholder
+  // so the template picker doesn't flash during generation.
+  if (isStreaming && !artifact) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center gap-3 text-muted-foreground">
+        <Loader2 className="w-6 h-6 animate-spin text-primary" />
+        <div className="text-center space-y-1">
+          <p className="text-sm font-medium text-foreground">AI 正在生成…</p>
+          <p className="text-xs">内容将在右侧显示</p>
+        </div>
+      </div>
+    );
+  }
+
   if (!artifact) {
     return (
       <div className="h-full bg-muted/10">
diff --git a/frontend-web/src/open-canvas/components/artifact/CodeArtifactRenderer.tsx b/frontend-web/src/open-canvas/components/artifact/CodeArtifactRenderer.tsx
index 349722cb..1d720d08 100644
--- a/frontend-web/src/open-canvas/components/artifact/CodeArtifactRenderer.tsx
+++ b/frontend-web/src/open-canvas/components/artifact/CodeArtifactRenderer.tsx
@@ -3,10 +3,9 @@ import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { python } from "@codemirror/lang-python";
 import type { Extension } from "@codemirror/state";
-import type { ViewUpdate } from "@codemirror/view";
 import { basicLightInit } from "@uiw/codemirror-theme-basic";
 import { monokaiInit } from "@uiw/codemirror-theme-monokai";
-import CodeMirror from "@uiw/react-codemirror";
+import CodeMirror, { type ViewUpdate } from "@uiw/react-codemirror";
 import { useTheme } from "next-themes";
 import { useCallback, useMemo } from "react";
 
diff --git a/frontend-web/src/open-canvas/components/artifact/TextArtifactRenderer.tsx b/frontend-web/src/open-canvas/components/artifact/TextArtifactRenderer.tsx
index c7d6b3d7..23bca574 100644
--- a/frontend-web/src/open-canvas/components/artifact/TextArtifactRenderer.tsx
+++ b/frontend-web/src/open-canvas/components/artifact/TextArtifactRenderer.tsx
@@ -1,18 +1,171 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ArrowDown } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
+import { Button } from "@/components/ui/button";
 import type { CanvasArtifactText } from "../../types/artifact";
-import { useCanvasSelection } from "../../hooks/useCanvasSelection";
+import { TiptapEditor } from "../../editor/TiptapEditor";
+import { useWritingEditor } from "../../hooks/useWritingEditor";
+import { useWritingRewrite } from "../../hooks/useWritingRewrite";
+import { WritingToolbar } from "./WritingToolbar";
+import { WritingBubbleMenu } from "./WritingBubbleMenu";
+import { WritingParagraphMenu } from "./WritingParagraphMenu";
+import { WritingAiMenu } from "./WritingAiMenu";
+import { WritingRewritePreview } from "./WritingRewritePreview";
+import { useCanvasGraphContext } from "../../contexts/CanvasGraphContext";
+import { useCanvasUIContext } from "../../contexts/CanvasUIContext";
+import { applyReplace, applyInsert } from "../../utils/apply-rewrite";
+import type { RewriteAction, RewriteTone } from "../../api/rewrite";
 
 interface TextArtifactRendererProps {
   content: CanvasArtifactText;
   isStreaming?: boolean;
 }
 
-export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRendererProps) {
-  const { handleTextPointerUp } = useCanvasSelection();
+interface PanelPos {
+  x: number;
+  y: number;
+}
 
-  if (!content.fullMarkdown) {
+/** Phase of the AI rewrite flow */
+type FlowPhase = "idle" | "menu" | "preview";
+
+interface LastAction {
+  action: RewriteAction;
+  tone?: RewriteTone;
+  customInstruction?: string;
+}
+
+export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRendererProps) {
+  const { artifact, setArtifact } = useCanvasGraphContext();
+  const { writingSelection } = useCanvasUIContext();
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [showScrollBtn, setShowScrollBtn] = useState(false);
+  const autoScrollRef = useRef(true);
+
+  // ── AI rewrite flow state ──────────────────────────────────────────────
+  const [phase, setPhase] = useState<FlowPhase>("idle");
+  const [panelPos, setPanelPos] = useState<PanelPos>({ x: 0, y: 0 });
+  const lastActionRef = useRef<LastAction | null>(null);
+
+  const handleEditorChange = useCallback(
+    (markdown: string) => {
+      if (!artifact) return;
+      setArtifact({
+        ...artifact,
+        contents: artifact.contents.map((c) =>
+          c.index === artifact.currentIndex && c.type === "text"
+            ? { ...c, fullMarkdown: markdown }
+            : c,
+        ),
+      });
+    },
+    [artifact, setArtifact],
+  );
+
+  const editor = useWritingEditor({
+    markdown: content.fullMarkdown,
+    onChange: handleEditorChange,
+    editable: !isStreaming,
+    placeholder: "开始写作…",
+  });
+
+  const { status, result, thinking, error, rewrite, rewriteFollowUp, reset } = useWritingRewrite(editor);
+
+  // ── Streaming auto-scroll ──────────────────────────────────────────────
+  useEffect(() => {
+    if (!isStreaming) {
+      autoScrollRef.current = true;
+      setShowScrollBtn(false);
+      return;
+    }
+    if (!autoScrollRef.current) return;
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [isStreaming, content.fullMarkdown]);
+
+  const handleScroll = useCallback(() => {
+    if (!isStreaming) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+    autoScrollRef.current = atBottom;
+    setShowScrollBtn(!atBottom);
+  }, [isStreaming]);
+
+  const handleScrollToBottom = useCallback(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+    autoScrollRef.current = true;
+    setShowScrollBtn(false);
+  }, []);
+
+  // ── AI rewrite flow handlers ───────────────────────────────────────────
+
+  /** Compute anchor position from current DOM selection */
+  const computePos = useCallback((): PanelPos => {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      const rect = sel.getRangeAt(0).getBoundingClientRect();
+      if (rect.width || rect.height) {
+        return { x: rect.left, y: rect.bottom + 6 };
+      }
+    }
+    return { x: window.innerWidth / 2 - 90, y: window.innerHeight / 2 };
+  }, []);
+
+  const openAiMenu = useCallback(() => {
+    reset();
+    setPanelPos(computePos());
+    setPhase("menu");
+  }, [reset, computePos]);
+
+  const closeAll = useCallback(() => {
+    editor?.commands.clearAiHighlight();
+    setPhase("idle");
+    reset();
+  }, [reset, editor]);
+
+  const handleAction = useCallback(
+    (action: RewriteAction, tone?: RewriteTone, customInstruction?: string) => {
+      lastActionRef.current = { action, tone, customInstruction };
+      rewrite(action, tone, customInstruction);
+      setPhase("preview");
+    },
+    [rewrite],
+  );
+
+  const handleRetry = useCallback(() => {
+    if (!lastActionRef.current) return;
+    const { action, tone, customInstruction } = lastActionRef.current;
+    rewrite(action, tone, customInstruction);
+  }, [rewrite]);
+
+  const handleFollowUp = useCallback(
+    (instruction: string) => {
+      if (!lastActionRef.current) return;
+      const { action, tone } = lastActionRef.current;
+      rewriteFollowUp(instruction, action, tone);
+    },
+    [rewriteFollowUp],
+  );
+
+  const handleReplace = useCallback(() => {
+    if (!editor || !writingSelection || !result) return;
+    applyReplace(editor, writingSelection, result);
+    closeAll();
+  }, [editor, writingSelection, result, closeAll]);
+
+  const handleInsert = useCallback(() => {
+    if (!editor || !writingSelection || !result) return;
+    applyInsert(editor, writingSelection, result);
+    closeAll();
+  }, [editor, writingSelection, result, closeAll]);
+
+  // ── Empty state ────────────────────────────────────────────────────────
+  if (!content.fullMarkdown && !isStreaming) {
     return (
       <div className="h-full flex items-center justify-center">
         <p className="text-sm text-muted-foreground">
@@ -22,125 +175,146 @@ export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRende
     );
   }
 
-  return (
-    <div
-      className="h-full overflow-y-auto"
-      onMouseUp={() => handleTextPointerUp(content.fullMarkdown)}
-    >
-      <div className="max-w-3xl mx-auto px-8 py-8">
-        <ReactMarkdown
-          remarkPlugins={[remarkGfm]}
-          components={{
-            h1: ({ children }) => (
-              <h1 className="text-2xl font-bold mb-4 mt-6 first:mt-0 text-foreground border-b border-border pb-2">
-                {children}
-              </h1>
-            ),
-            h2: ({ children }) => (
-              <h2 className="text-xl font-semibold mb-3 mt-6 text-foreground">
-                {children}
-              </h2>
-            ),
-            h3: ({ children }) => (
-              <h3 className="text-base font-semibold mb-2 mt-4 text-foreground">
-                {children}
-              </h3>
-            ),
-            h4: ({ children }) => (
-              <h4 className="text-sm font-semibold mb-2 mt-3 text-foreground">
-                {children}
-              </h4>
-            ),
-            p: ({ children }) => (
-              <p className="mb-4 leading-7 text-sm text-foreground/90">
-                {children}
-              </p>
-            ),
-            ul: ({ children }) => (
-              <ul className="mb-4 ml-5 list-disc space-y-1.5 text-sm text-foreground/90">
-                {children}
-              </ul>
-            ),
-            ol: ({ children }) => (
-              <ol className="mb-4 ml-5 list-decimal space-y-1.5 text-sm text-foreground/90">
-                {children}
-              </ol>
-            ),
-            li: ({ children }) => (
-              <li className="leading-7">{children}</li>
-            ),
-            blockquote: ({ children }) => (
-              <blockquote className="border-l-4 border-primary/30 pl-4 my-4 text-muted-foreground italic text-sm">
-                {children}
-              </blockquote>
-            ),
-            pre: ({ children }) => (
-              <pre className="mb-4 rounded-md bg-muted/60 overflow-x-auto">
-                {children}
-              </pre>
-            ),
-            code: ({ className, children }) => {
-              const isBlock = Boolean(className?.startsWith("language-"));
-              if (isBlock) {
-                return (
-                  <code className="block p-4 text-xs font-mono text-foreground leading-relaxed">
-                    {children}
-                  </code>
-                );
-              }
-              return (
-                <code className="bg-muted px-1.5 py-0.5 rounded text-xs font-mono text-foreground">
-                  {children}
-                </code>
-              );
-            },
-            table: ({ children }) => (
-              <div className="mb-4 overflow-x-auto rounded-md border border-border">
-                <table className="w-full text-sm border-collapse">
-                  {children}
-                </table>
-              </div>
-            ),
-            thead: ({ children }) => (
-              <thead className="bg-muted/50">{children}</thead>
-            ),
-            th: ({ children }) => (
-              <th className="px-4 py-2 text-left text-xs font-semibold text-foreground border-b border-border">
-                {children}
-              </th>
-            ),
-            td: ({ children }) => (
-              <td className="px-4 py-2 text-xs text-foreground/80 border-b border-border last:border-0">
-                {children}
-              </td>
-            ),
-            hr: () => <hr className="my-6 border-border" />,
-            a: ({ href, children }) => (
-              <a
-                href={href}
-                className="text-primary underline underline-offset-2 hover:text-primary/80 transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {children}
-              </a>
-            ),
-            strong: ({ children }) => (
-              <strong className="font-semibold text-foreground">
-                {children}
-              </strong>
-            ),
-            em: ({ children }) => (
-              <em className="italic text-foreground/80">{children}</em>
-            ),
-          }}
+  // ── Streaming mode ────────────────────────────────────────────────────
+  if (isStreaming) {
+    return (
+      <div className="relative h-full flex flex-col overflow-hidden">
+        <div
+          ref={scrollRef}
+          className="flex-1 overflow-y-auto"
+          onScroll={handleScroll}
         >
-          {content.fullMarkdown}
-        </ReactMarkdown>
-        {isStreaming && (
-          <span className="inline-block w-0.5 h-4 bg-primary animate-pulse align-middle ml-0.5" />
+          <div className="max-w-2xl mx-auto px-10 pt-10 pb-32">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                h1: ({ children }) => (
+                  <h1 className="text-[1.625rem] font-bold tracking-tight mb-3 mt-8 first:mt-0 text-foreground border-b border-border pb-2 leading-tight">
+                    {children}
+                  </h1>
+                ),
+                h2: ({ children }) => (
+                  <h2 className="text-[1.25rem] font-semibold tracking-tight mb-2.5 mt-7 text-foreground leading-snug">
+                    {children}
+                  </h2>
+                ),
+                h3: ({ children }) => (
+                  <h3 className="text-[1.0625rem] font-semibold tracking-tight mb-2 mt-5 text-foreground leading-snug">
+                    {children}
+                  </h3>
+                ),
+                p: ({ children }) => (
+                  <p className="mb-4 leading-[1.8] text-[15px] text-foreground indent-[2em]">
+                    {children}
+                  </p>
+                ),
+                ul: ({ children }) => (
+                  <ul className="mb-4 ml-6 list-disc space-y-1.5 text-[15px] text-foreground">
+                    {children}
+                  </ul>
+                ),
+                ol: ({ children }) => (
+                  <ol className="mb-4 ml-6 list-decimal space-y-1.5 text-[15px] text-foreground">
+                    {children}
+                  </ol>
+                ),
+                li: ({ children }) => <li className="leading-7">{children}</li>,
+                blockquote: ({ children }) => (
+                  <blockquote className="border-l-4 border-primary/30 pl-4 my-4 text-muted-foreground italic text-sm">
+                    {children}
+                  </blockquote>
+                ),
+                pre: ({ children }) => (
+                  <pre className="mb-4 rounded-md bg-muted/60 overflow-x-auto">
+                    {children}
+                  </pre>
+                ),
+                code: ({ className, children }) => {
+                  const isBlock = Boolean(className?.startsWith("language-"));
+                  return isBlock ? (
+                    <code className="block p-4 text-xs font-mono text-foreground leading-relaxed">
+                      {children}
+                    </code>
+                  ) : (
+                    <code className="bg-muted px-1.5 py-0.5 rounded text-xs font-mono text-foreground">
+                      {children}
+                    </code>
+                  );
+                },
+              }}
+            >
+              {content.fullMarkdown}
+            </ReactMarkdown>
+            <span className="inline-block w-0.5 h-4 bg-primary animate-pulse align-middle ml-0.5" />
+          </div>
+        </div>
+
+        {showScrollBtn && (
+          <div className="absolute bottom-4 left-0 right-0 flex justify-center z-10 pointer-events-none">
+            <Button
+              size="sm"
+              variant="secondary"
+              className="pointer-events-auto shadow-md gap-1.5"
+              onClick={handleScrollToBottom}
+            >
+              <ArrowDown className="w-3.5 h-3.5" />
+              回到底部
+            </Button>
+          </div>
         )}
       </div>
+    );
+  }
+
+  // ── Edit mode ─────────────────────────────────────────────────────────
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      <WritingToolbar editor={editor} />
+
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-2xl mx-auto px-10 pt-10">
+          {editor && (
+            <>
+              <WritingBubbleMenu editor={editor} onAiRewrite={openAiMenu} />
+              <WritingParagraphMenu editor={editor} onAiRewrite={openAiMenu} />
+            </>
+          )}
+          <TiptapEditor editor={editor} className="tiptap-writing-editor" />
+        </div>
+      </div>
+
+      {/* Phase: AI action menu */}
+      {phase === "menu" && (
+        <WritingAiMenu
+          pos={panelPos}
+          status={status}
+          error={error}
+          onAction={handleAction}
+          onAbort={reset}
+          onRetry={handleRetry}
+          onClose={closeAll}
+        />
+      )}
+
+      {/* Phase: result preview */}
+      {phase === "preview" && (
+        <WritingRewritePreview
+          pos={panelPos}
+          status={status}
+          originalText={writingSelection?.text ?? ""}
+          result={result}
+          thinking={thinking}
+          error={error}
+          action={lastActionRef.current?.action ?? "polish"}
+          tone={lastActionRef.current?.tone}
+          onReplace={handleReplace}
+          onInsert={handleInsert}
+          onRetry={handleRetry}
+          onAbort={reset}
+          onClose={closeAll}
+          onFollowUp={handleFollowUp}
+        />
+      )}
     </div>
   );
 }
diff --git a/frontend-web/src/open-canvas/components/artifact/WritingAiMenu.tsx b/frontend-web/src/open-canvas/components/artifact/WritingAiMenu.tsx
new file mode 100644
index 00000000..c3b4c587
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/artifact/WritingAiMenu.tsx
@@ -0,0 +1,288 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  Sparkles,
+  Wand2,
+  Expand,
+  Shrink,
+  Mic2,
+  AlertCircle,
+  RefreshCw,
+  ChevronRight,
+  X,
+  Square,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { RewriteAction, RewriteTone } from "../../api/rewrite";
+import type { RewriteStatus } from "../../hooks/useWritingRewrite";
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface MenuPos {
+  x: number;
+  y: number;
+}
+
+// ── Tone options ───────────────────────────────────────────────────────────────
+
+const TONE_OPTIONS: { value: RewriteTone; label: string }[] = [
+  { value: "professional", label: "更专业" },
+  { value: "casual",       label: "更口语化" },
+  { value: "readable",     label: "更易读" },
+  { value: "academic",     label: "更学术" },
+  { value: "expressive",   label: "更有文采" },
+];
+
+// ── Action rows ────────────────────────────────────────────────────────────────
+
+const ACTION_ROWS: {
+  action: RewriteAction;
+  label: string;
+  icon: React.ElementType;
+}[] = [
+  { action: "polish",  label: "润色",  icon: Wand2 },
+  { action: "expand",  label: "扩写",  icon: Expand },
+  { action: "shorten", label: "缩写",  icon: Shrink },
+  { action: "tone",    label: "改语气", icon: Mic2 },
+];
+
+// ── Main component ─────────────────────────────────────────────────────────────
+
+interface WritingAiMenuProps {
+  pos: MenuPos;
+  status: RewriteStatus;
+  error: string | null;
+  onAction: (action: RewriteAction, tone?: RewriteTone, customInstruction?: string) => void;
+  onAbort: () => void;
+  onRetry: () => void;
+  onClose: () => void;
+}
+
+export function WritingAiMenu({
+  pos,
+  status,
+  error,
+  onAction,
+  onAbort,
+  onRetry,
+  onClose,
+}: WritingAiMenuProps) {
+  const [toneOpen, setToneOpen] = useState(false);
+  const [instruction, setInstruction] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // autoFocus is unreliable when the menu opens during a mousedown event sequence;
+  // explicit focus via setTimeout(0) runs after the browser finishes that sequence.
+  useEffect(() => {
+    const id = setTimeout(() => inputRef.current?.focus(), 0);
+    return () => clearTimeout(id);
+  }, []);
+
+  const isLoading = status === "loading";
+  const isError   = status === "error";
+
+  // Measure actual height after render and compute safe position before browser paint
+  const menuWidth = 240;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [computedPos, setComputedPos] = useState<{ left: number; top: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const h = el.getBoundingClientRect().height;
+    const safeX = Math.min(Math.max(pos.x, 8), window.innerWidth - menuWidth - 8);
+    const spaceBelow = window.innerHeight - pos.y - 8;
+    const spaceAbove = pos.y - 8;
+    let safeY: number;
+    if (spaceBelow >= h) {
+      safeY = pos.y + 4;
+    } else if (spaceAbove >= h) {
+      safeY = pos.y - h - 4;
+    } else if (spaceBelow >= spaceAbove) {
+      safeY = Math.max(8, window.innerHeight - h - 8);
+    } else {
+      safeY = 8;
+    }
+    setComputedPos({ left: safeX, top: safeY });
+  }, [pos.x, pos.y]);
+
+  const fireAction = (action: RewriteAction, tone?: RewriteTone) => {
+    onAction(action, tone, instruction.trim() || undefined);
+  };
+
+  const handleInputEnter = () => {
+    const trimmed = instruction.trim();
+    onAction("polish", undefined, trimmed || undefined);
+  };
+
+  return createPortal(
+    <>
+      {/* Backdrop */}
+      <div className="fixed inset-0 z-[9990]" onMouseDown={onClose} />
+
+      <div
+        ref={containerRef}
+        style={{
+          position: "fixed",
+          left: computedPos?.left ?? pos.x,
+          top: computedPos?.top ?? (pos.y + 4),
+          width: menuWidth,
+          zIndex: 9999,
+          visibility: computedPos ? "visible" : "hidden",
+        }}
+        className="rounded-xl border bg-popover shadow-lg animate-in fade-in zoom-in-95 duration-100 overflow-hidden"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/30">
+          <span className="flex items-center gap-1.5 text-xs font-semibold text-foreground">
+            <Sparkles className="h-3.5 w-3.5 text-amber-500" />
+            AI 改写
+          </span>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded p-0.5 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        </div>
+
+        {/* ── Loading state ──────────────────────────────────────── */}
+        {isLoading && (
+          <div className="flex flex-col items-center gap-4 px-4 py-6">
+            {/* Bouncing dots */}
+            <div className="flex items-center gap-2">
+              {[0, 160, 320].map((delay) => (
+                <span
+                  key={delay}
+                  className="h-1.5 w-1.5 rounded-full bg-primary animate-bouncing"
+                  style={{ animationDelay: `${delay}ms` }}
+                />
+              ))}
+              <span className="ml-1 text-xs text-muted-foreground">AI 正在生成…</span>
+            </div>
+
+            {/* Stop button — breathing animation */}
+            <button
+              type="button"
+              onClick={onAbort}
+              className={cn(
+                "animate-breathe-stop",
+                "flex items-center gap-1.5 px-5 py-2 text-xs font-medium rounded-lg",
+                "border border-red-300/70 bg-red-50/60 text-red-600",
+                "dark:border-red-800/50 dark:bg-red-950/20 dark:text-red-400",
+                "hover:bg-red-100/90 dark:hover:bg-red-950/40 transition-colors",
+              )}
+            >
+              <Square className="h-3 w-3 fill-current" />
+              停止生成
+            </button>
+          </div>
+        )}
+
+        {/* ── Error state ─────────────────────────────────────────── */}
+        {isError && (
+          <div className="px-3 py-3 space-y-2">
+            <p className="flex items-center gap-1.5 text-xs text-destructive">
+              <AlertCircle className="h-3.5 w-3.5 shrink-0" />
+              {error ?? "改写失败"}
+            </p>
+            <button
+              type="button"
+              onClick={onRetry}
+              className="flex items-center gap-1.5 text-xs text-primary hover:underline"
+            >
+              <RefreshCw className="h-3 w-3" />
+              重试
+            </button>
+          </div>
+        )}
+
+        {/* ── Idle state: input + action list ─────────────────────── */}
+        {!isLoading && !isError && (
+          <>
+            {/* Custom instruction input */}
+            <div className="px-2.5 pt-2.5 pb-2">
+              <input
+                ref={inputRef}
+                type="text"
+                value={instruction}
+                onChange={(e) => setInstruction(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    handleInputEnter();
+                  }
+                }}
+                placeholder="告诉 AI 你想要什么…"
+                className={cn(
+                  "w-full text-xs rounded-md px-2.5 py-1.5 outline-none transition-colors",
+                  "bg-muted/50 border border-input focus:border-primary/60",
+                  "placeholder:text-muted-foreground/50",
+                )}
+              />
+            </div>
+
+            {/* Divider */}
+            <div className="border-t border-border/50 mx-1" />
+
+            {/* Preset actions */}
+            <div className="p-1 space-y-0.5">
+              {ACTION_ROWS.map(({ action, label, icon: Icon }) => {
+                const isTone = action === "tone";
+                const isTonesOpen = isTone && toneOpen;
+                return (
+                  <div key={action}>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (isTone) {
+                          setToneOpen((v) => !v);
+                        } else {
+                          fireAction(action);
+                        }
+                      }}
+                      className={cn(
+                        "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs rounded-md transition-colors text-left",
+                        "hover:bg-accent hover:text-accent-foreground",
+                        isTonesOpen && "bg-accent text-accent-foreground",
+                      )}
+                    >
+                      <Icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                      <span className="flex-1">{label}</span>
+                      {isTone && (
+                        <ChevronRight
+                          className={cn(
+                            "h-3.5 w-3.5 text-muted-foreground transition-transform duration-200",
+                            isTonesOpen && "rotate-90",
+                          )}
+                        />
+                      )}
+                    </button>
+
+                    {/* Tone sub-list */}
+                    {isTonesOpen && (
+                      <div className="ml-5 border-l pl-2 my-0.5 space-y-0.5">
+                        {TONE_OPTIONS.map(({ value, label: toneLabel }) => (
+                          <button
+                            key={value}
+                            type="button"
+                            onClick={() => fireAction("tone", value)}
+                            className="flex w-full items-center px-2 py-1.5 text-xs rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
+                          >
+                            {toneLabel}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        )}
+      </div>
+    </>,
+    document.body,
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/artifact/WritingBubbleMenu.tsx b/frontend-web/src/open-canvas/components/artifact/WritingBubbleMenu.tsx
new file mode 100644
index 00000000..36b28d27
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/artifact/WritingBubbleMenu.tsx
@@ -0,0 +1,220 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import type { Editor } from "@tiptap/react";
+import {
+  Sparkles,
+  Bold,
+  Italic,
+  Underline,
+  Heading1,
+  Copy,
+  Check,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useCanvasUIContext } from "../../contexts/CanvasUIContext";
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+interface MenuPosition {
+  x: number;
+  y: number;      // top of selection
+  bottom: number; // bottom of selection (used to flip menu below when near top)
+}
+
+// ── Sub-components ───────────────────────────────────────────────────────────
+
+interface BubbleButtonProps {
+  onClick: () => void;
+  active?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+function BubbleButton({ onClick, active, className, children }: BubbleButtonProps) {
+  return (
+    <button
+      type="button"
+      onMouseDown={(e) => {
+        e.preventDefault(); // keep editor focused
+        onClick();
+      }}
+      className={cn(
+        "inline-flex h-7 items-center gap-1 px-2 text-xs font-medium rounded transition-colors",
+        "hover:bg-black/8 dark:hover:bg-white/10",
+        active && "bg-black/10 dark:bg-white/15",
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function BubbleSep() {
+  return <div className="w-px h-4 bg-black/15 dark:bg-white/25 mx-0.5 shrink-0" />;
+}
+
+// ── Main component ───────────────────────────────────────────────────────────
+
+interface WritingBubbleMenuProps {
+  editor: Editor;
+  onAiRewrite: () => void;
+}
+
+export function WritingBubbleMenu({ editor, onAiRewrite }: WritingBubbleMenuProps) {
+  const { setWritingSelection } = useCanvasUIContext();
+  const [position, setPosition] = useState<MenuPosition | null>(null);
+  const [copied, setCopied] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [computedStyle, setComputedStyle] = useState<React.CSSProperties>({
+    position: "fixed", left: 0, top: 0, zIndex: 9999, visibility: "hidden",
+  });
+
+  useLayoutEffect(() => {
+    if (!position || !menuRef.current) return;
+    const { width: mw, height: mh } = menuRef.current.getBoundingClientRect();
+    // X: center on selection, clamp to viewport
+    const rawLeft = position.x - mw / 2;
+    const safeLeft = Math.max(8, Math.min(rawLeft, window.innerWidth - mw - 8));
+    // Y: prefer above; flip below if too close to top
+    let safeTop: number;
+    if (position.y - mh - 8 >= 8) {
+      safeTop = position.y - mh - 8;
+    } else {
+      safeTop = Math.min(position.bottom + 8, window.innerHeight - mh - 8);
+    }
+    setComputedStyle({ position: "fixed", left: safeLeft, top: safeTop, zIndex: 9999, visibility: "visible" });
+  }, [position]);
+
+  // Track selection → compute menu position
+  useEffect(() => {
+    const updatePosition = () => {
+      const { from, to, empty } = editor.state.selection;
+
+      if (empty || editor.isActive("codeBlock")) {
+        setPosition(null);
+        return;
+      }
+
+      // Use the native DOM selection for pixel coordinates
+      const domSel = window.getSelection();
+      if (!domSel || domSel.rangeCount === 0) {
+        setPosition(null);
+        return;
+      }
+
+      const range = domSel.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      if (!rect.width && !rect.height) {
+        setPosition(null);
+        return;
+      }
+
+      // Store selection for AI rewrite
+      const text = editor.state.doc.textBetween(from, to, "\n");
+      if (text.trim()) {
+        setWritingSelection({ from, to, text });
+      }
+
+      setPosition({
+        x: rect.left + rect.width / 2,
+        y: rect.top,
+        bottom: rect.bottom,
+      });
+    };
+
+    editor.on("selectionUpdate", updatePosition);
+    editor.on("blur", () => setPosition(null));
+
+    return () => {
+      editor.off("selectionUpdate", updatePosition);
+      editor.off("blur", () => setPosition(null));
+    };
+  }, [editor, setWritingSelection]);
+
+  const handleAiRewrite = useCallback(() => {
+    const { from, to, empty } = editor.state.selection;
+    if (!empty) {
+      editor.commands.setAiHighlight(from, to);
+    }
+    onAiRewrite();
+  }, [onAiRewrite, editor]);
+
+  const handleCopy = useCallback(() => {
+    const { from, to } = editor.state.selection;
+    const text = editor.state.doc.textBetween(from, to, "\n");
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, [editor]);
+
+  if (!position) return null;
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      style={computedStyle}
+      className="animate-in fade-in zoom-in-95 duration-100"
+    >
+      <div className="flex items-center gap-0 rounded-lg px-1 py-1 shadow-lg ring-1 ring-black/8 bg-popover text-foreground dark:bg-neutral-900 dark:ring-white/10">
+        {/* AI 改写 — primary */}
+        <BubbleButton
+          onClick={handleAiRewrite}
+          className="text-amber-500 hover:text-amber-600 font-semibold"
+        >
+          <Sparkles className="h-3.5 w-3.5" />
+          AI 改写
+        </BubbleButton>
+
+        <BubbleSep />
+
+        {/* Inline format */}
+        <BubbleButton
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          active={editor.isActive("bold")}
+        >
+          <Bold className="h-3.5 w-3.5" />
+        </BubbleButton>
+
+        <BubbleButton
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          active={editor.isActive("italic")}
+        >
+          <Italic className="h-3.5 w-3.5" />
+        </BubbleButton>
+
+        <BubbleButton
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+          active={editor.isActive("underline")}
+        >
+          <Underline className="h-3.5 w-3.5" />
+        </BubbleButton>
+
+        <BubbleSep />
+
+        {/* Heading */}
+        <BubbleButton
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 1 }).run()
+          }
+          active={editor.isActive("heading", { level: 1 })}
+        >
+          <Heading1 className="h-3.5 w-3.5" />
+        </BubbleButton>
+
+        <BubbleSep />
+
+        {/* Copy */}
+        <BubbleButton onClick={handleCopy}>
+          {copied ? (
+            <Check className="h-3.5 w-3.5 text-green-400" />
+          ) : (
+            <Copy className="h-3.5 w-3.5" />
+          )}
+        </BubbleButton>
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/artifact/WritingParagraphMenu.tsx b/frontend-web/src/open-canvas/components/artifact/WritingParagraphMenu.tsx
new file mode 100644
index 00000000..4c555949
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/artifact/WritingParagraphMenu.tsx
@@ -0,0 +1,163 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import type { Editor } from "@tiptap/react";
+import { Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useCanvasUIContext } from "../../contexts/CanvasUIContext";
+
+const REWRITABLE_TYPES = new Set(["paragraph", "heading", "blockquote"]);
+
+const BTN_SIZE = 24;
+const BTN_GAP = 6;   // gap between button right edge and text left edge
+// Extra zone around the button that still counts as "near" (bridges the gap)
+const HOVER_MARGIN = BTN_GAP + 8;
+// Delay before hiding the button (ms) — long enough to cross the gap at slow speed
+const HIDE_DELAY = 380;
+
+interface HoverState {
+  top: number;
+  left: number;
+  height: number;
+  nodeFrom: number;
+  nodeTo: number;
+  text: string;
+}
+
+interface WritingParagraphMenuProps {
+  editor: Editor;
+  onAiRewrite: () => void;
+}
+
+export function WritingParagraphMenu({ editor, onAiRewrite }: WritingParagraphMenuProps) {
+  const { setWritingSelection } = useCanvasUIContext();
+  const [hover, setHover] = useState<HoverState | null>(null);
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Keep a ref in sync so the document-level handler always reads fresh state
+  const hoverRef = useRef<HoverState | null>(null);
+  hoverRef.current = hover;
+
+  const clearHideTimer = useCallback(() => {
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current);
+      hideTimerRef.current = null;
+    }
+  }, []);
+
+  const scheduleHide = useCallback(() => {
+    clearHideTimer();
+    hideTimerRef.current = setTimeout(() => setHover(null), HIDE_DELAY);
+  }, [clearHideTimer]);
+
+  // Document-level mousemove: cancel hide when cursor is in the button's vicinity.
+  // This bridges the gap between the editor's text edge and the button.
+  useEffect(() => {
+    const handleDocMove = (e: MouseEvent) => {
+      const h = hoverRef.current;
+      if (!h) return;
+
+      const btnLeft = h.left - BTN_SIZE - BTN_GAP;
+      const btnTop  = h.top + h.height / 2 - BTN_SIZE / 2;
+
+      const inZone =
+        e.clientX >= btnLeft - HOVER_MARGIN &&
+        e.clientX <= h.left + HOVER_MARGIN &&  // extend slightly into text side
+        e.clientY >= btnTop  - HOVER_MARGIN &&
+        e.clientY <= btnTop  + BTN_SIZE + HOVER_MARGIN;
+
+      if (inZone) clearHideTimer();
+    };
+
+    document.addEventListener("mousemove", handleDocMove);
+    return () => document.removeEventListener("mousemove", handleDocMove);
+  }, [clearHideTimer]);
+
+  useEffect(() => {
+    const editorDom = editor.view.dom as HTMLElement;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const pos = editor.view.posAtCoords({ left: e.clientX, top: e.clientY });
+      if (!pos) { scheduleHide(); return; }
+
+      const $pos = editor.state.doc.resolve(pos.pos);
+      const depth = Math.min(1, $pos.depth);
+      if (depth === 0) { scheduleHide(); return; }
+
+      const nodeStart = $pos.before(depth);
+      const node = editor.state.doc.nodeAt(nodeStart);
+      if (!node || !REWRITABLE_TYPES.has(node.type.name)) {
+        scheduleHide();
+        return;
+      }
+
+      const text = node.textContent.trim();
+      if (!text) { scheduleHide(); return; }
+
+      const domNode = editor.view.nodeDOM(nodeStart);
+      if (!domNode || !(domNode instanceof HTMLElement)) {
+        scheduleHide();
+        return;
+      }
+
+      const rect = domNode.getBoundingClientRect();
+      clearHideTimer();
+      setHover({
+        top:      rect.top,
+        left:     rect.left,
+        height:   rect.height,
+        nodeFrom: nodeStart + 1,
+        nodeTo:   nodeStart + node.nodeSize - 1,
+        text,
+      });
+    };
+
+    editorDom.addEventListener("mousemove", handleMouseMove);
+    editorDom.addEventListener("mouseleave", scheduleHide);
+
+    return () => {
+      editorDom.removeEventListener("mousemove", handleMouseMove);
+      editorDom.removeEventListener("mouseleave", scheduleHide);
+      clearHideTimer();
+    };
+  }, [editor, clearHideTimer, scheduleHide]);
+
+  const handleClick = useCallback(() => {
+    if (!hover) return;
+    editor.chain().focus().setTextSelection({ from: hover.nodeFrom, to: hover.nodeTo }).run();
+    editor.commands.setAiHighlight(hover.nodeFrom, hover.nodeTo);
+    setWritingSelection({ from: hover.nodeFrom, to: hover.nodeTo, text: hover.text });
+    onAiRewrite();
+  }, [hover, editor, setWritingSelection, onAiRewrite]);
+
+  if (!hover) return null;
+
+  const btnTop  = hover.top  + hover.height / 2 - BTN_SIZE / 2;
+  const btnLeft = Math.max(4, hover.left - BTN_SIZE - BTN_GAP);
+
+  return createPortal(
+    <button
+      type="button"
+      style={{
+        position: "fixed",
+        top:    btnTop,
+        left:   btnLeft,
+        width:  BTN_SIZE,
+        height: BTN_SIZE,
+        zIndex: 9998,
+      }}
+      onMouseEnter={clearHideTimer}
+      onMouseLeave={scheduleHide}
+      onClick={handleClick}
+      className={cn(
+        "inline-flex items-center justify-center rounded-md",
+        "bg-background border border-border shadow-sm",
+        "text-muted-foreground hover:text-amber-500 hover:border-amber-400 hover:bg-amber-50 dark:hover:bg-amber-950/30",
+        "transition-all duration-150",
+        "animate-in fade-in zoom-in-90 duration-100",
+      )}
+      title="AI 改写此段落"
+    >
+      <Sparkles className="h-3.5 w-3.5" />
+    </button>,
+    document.body,
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/artifact/WritingRewritePreview.tsx b/frontend-web/src/open-canvas/components/artifact/WritingRewritePreview.tsx
new file mode 100644
index 00000000..02f24a58
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/artifact/WritingRewritePreview.tsx
@@ -0,0 +1,307 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  RefreshCw, X, ArrowRightLeft, ArrowDownToLine,
+  Loader2, ChevronDown, Brain, SendHorizontal, Square,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import type { RewriteAction, RewriteTone } from "../../api/rewrite";
+import type { RewriteStatus } from "../../hooks/useWritingRewrite";
+
+const ACTION_LABEL: Record<RewriteAction, string> = {
+  polish:  "润色",
+  expand:  "扩写",
+  shorten: "缩写",
+  tone:    "改语气",
+};
+
+const TONE_LABEL: Record<RewriteTone, string> = {
+  professional: "更专业",
+  casual:       "更口语化",
+  readable:     "更易读",
+  academic:     "更学术",
+  expressive:   "更有文采",
+};
+
+interface MenuPos { x: number; y: number }
+
+interface WritingRewritePreviewProps {
+  pos: MenuPos;
+  status: RewriteStatus;
+  originalText: string;
+  result: string | null;
+  thinking: string | null;
+  error: string | null;
+  action: RewriteAction;
+  tone?: RewriteTone;
+  onReplace: () => void;
+  onInsert: () => void;
+  onRetry: () => void;
+  onAbort: () => void;
+  onClose: () => void;
+  onFollowUp: (instruction: string) => void;
+}
+
+export function WritingRewritePreview({
+  pos,
+  status,
+  result,
+  thinking,
+  error,
+  action,
+  tone,
+  onReplace,
+  onInsert,
+  onRetry,
+  onAbort,
+  onClose,
+  onFollowUp,
+}: WritingRewritePreviewProps) {
+  const isLoading = status === "loading";
+  const isError   = status === "error";
+  const isSuccess = status === "success" && result !== null;
+  const hasResult = result !== null && result.length > 0;
+
+  // ── Follow-up input ─────────────────────────────────────────────────────
+  const [followUpInput, setFollowUpInput] = useState("");
+  const followUpInputRef = useRef<HTMLInputElement>(null);
+
+  // Auto-focus the follow-up input when generation finishes
+  useEffect(() => {
+    if (status === "success") {
+      setTimeout(() => followUpInputRef.current?.focus(), 50);
+    }
+  }, [status]);
+
+  const handleFollowUpSubmit = () => {
+    const instruction = followUpInput.trim();
+    if (!instruction || isLoading) return;
+    setFollowUpInput("");
+    onFollowUp(instruction);
+  };
+
+  // ── Thinking expand / collapse ──────────────────────────────────────────
+  const [thinkingOpen, setThinkingOpen] = useState(false);
+  const prevStatusRef = useRef<RewriteStatus>(status);
+
+  // Auto-expand when thinking content first streams in during loading
+  useEffect(() => {
+    if (isLoading && thinking) setThinkingOpen(true);
+  }, [isLoading, thinking]);
+
+  // Auto-collapse when generation finishes (loading → success/error)
+  useEffect(() => {
+    const prev = prevStatusRef.current;
+    prevStatusRef.current = status;
+    if (prev === "loading" && status !== "loading") {
+      setThinkingOpen(false);
+    }
+  }, [status]);
+
+  // ── Position ────────────────────────────────────────────────────────────
+  const panelWidth = 480;
+  const [computedPos, setComputedPos] = useState<{
+    left: number;
+    top?: number;
+    bottom?: number;
+    maxHeight: number;
+  } | null>(null);
+
+  useLayoutEffect(() => {
+    const MARGIN = 8;
+    const GAP = 6;
+    const MIN_HEIGHT = 160;
+    const safeX = Math.min(Math.max(pos.x, MARGIN), window.innerWidth - panelWidth - MARGIN);
+    const spaceBelow = window.innerHeight - pos.y - MARGIN;
+    const spaceAbove = pos.y - MARGIN;
+    if (spaceBelow >= spaceAbove) {
+      // More space below — anchor top at selection bottom, grow downward
+      setComputedPos({
+        left: safeX,
+        top: pos.y + GAP,
+        maxHeight: Math.max(MIN_HEIGHT, spaceBelow - GAP),
+      });
+    } else {
+      // More space above — anchor bottom at selection top, grow upward
+      setComputedPos({
+        left: safeX,
+        bottom: window.innerHeight - pos.y + GAP,
+        maxHeight: Math.max(MIN_HEIGHT, spaceAbove - GAP),
+      });
+    }
+  }, [pos.x, pos.y]);
+
+  const actionLabel = tone
+    ? `${ACTION_LABEL[action]} · ${TONE_LABEL[tone]}`
+    : ACTION_LABEL[action];
+
+  return createPortal(
+    <>
+      {/* Backdrop */}
+      <div className="fixed inset-0 z-[9990]" onMouseDown={onClose} />
+
+      <div
+        style={{
+          position: "fixed",
+          left: computedPos?.left ?? pos.x,
+          ...(computedPos?.bottom !== undefined
+            ? { bottom: computedPos.bottom }
+            : { top: computedPos?.top ?? (pos.y + 6) }),
+          maxHeight: computedPos?.maxHeight,
+          width: panelWidth,
+          zIndex: 9999,
+          visibility: computedPos ? "visible" : "hidden",
+        }}
+        className="flex flex-col rounded-xl border bg-popover shadow-xl animate-in fade-in zoom-in-95 duration-100 overflow-hidden"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/40">
+          <span className="text-xs font-semibold text-foreground">{actionLabel}</span>
+          <div className="flex items-center gap-1">
+            {isLoading && (
+              <button
+                type="button"
+                onClick={onAbort}
+                className="rounded p-1 hover:bg-red-100 dark:hover:bg-red-950/40 text-red-500 hover:text-red-600 transition-colors"
+                title="停止生成"
+              >
+                <Square className="h-3.5 w-3.5 fill-current" />
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={onRetry}
+              disabled={isLoading}
+              className="rounded p-1 hover:bg-accent text-muted-foreground hover:text-foreground disabled:opacity-40 transition-colors"
+              title="重试"
+            >
+              <RefreshCw className="h-3.5 w-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded p-1 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="p-3 space-y-2 overflow-y-auto flex-1 min-h-0">
+
+          {/* Thinking — collapsible with animation */}
+          {thinking && (
+            <div className="rounded-md border border-amber-200/60 bg-amber-50/40 dark:border-amber-800/40 dark:bg-amber-950/20 overflow-hidden">
+              {/* Toggle button */}
+              <button
+                type="button"
+                onClick={() => setThinkingOpen((v) => !v)}
+                className="flex w-full items-center gap-1.5 px-3 py-1.5 text-[10px] font-medium text-amber-700 dark:text-amber-400 hover:bg-amber-100/40 dark:hover:bg-amber-900/20 transition-colors"
+              >
+                <Brain className="h-3 w-3 shrink-0" />
+                <span className="flex-1 text-left">思考过程</span>
+                {isLoading && (
+                  <span className="text-[9px] text-amber-600/70 dark:text-amber-500/60 mr-1">
+                    思考中…
+                  </span>
+                )}
+                <ChevronDown
+                  className={cn(
+                    "h-3 w-3 transition-transform duration-300",
+                    thinkingOpen && "rotate-180",
+                  )}
+                />
+              </button>
+
+              {/* Animated content — grid-rows trick for smooth height transition */}
+              <div
+                style={{ gridTemplateRows: thinkingOpen ? "1fr" : "0fr" }}
+                className="grid transition-[grid-template-rows] duration-300 ease-in-out"
+              >
+                <div className="overflow-hidden">
+                  <div className="px-3 pb-2.5 pt-1.5 text-[11px] text-amber-800/80 dark:text-amber-300/70 leading-relaxed whitespace-pre-wrap border-t border-amber-200/40 dark:border-amber-800/30 max-h-44 overflow-y-auto">
+                    {thinking}
+                    {isLoading && (
+                      <span className="inline-block w-0.5 h-3 bg-amber-500 animate-pulse align-middle ml-0.5" />
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Result area */}
+          {/* Loading — no text yet */}
+          {isLoading && !hasResult && (
+            <div className="flex items-center gap-2 rounded-md border border-dashed px-3 py-3.5 text-xs text-muted-foreground">
+              <Loader2 className="h-3.5 w-3.5 animate-spin shrink-0" />
+              AI 正在生成…
+            </div>
+          )}
+
+          {/* Error */}
+          {isError && (
+            <div className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive leading-relaxed">
+              {error ?? "改写失败，请重试"}
+            </div>
+          )}
+
+          {/* Result text — show while streaming and after success */}
+          {hasResult && (
+            <div className="rounded-md border border-primary/30 bg-primary/5 px-3 py-2 text-xs text-foreground leading-relaxed whitespace-pre-wrap">
+              {result}
+              {isLoading && (
+                <span className="inline-block w-0.5 h-3.5 bg-primary animate-pulse align-middle ml-0.5" />
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer actions — only after success */}
+        {isSuccess && (
+          <div className="flex items-center gap-2 px-3 py-2 border-t bg-muted/20">
+            <Button size="sm" className="flex-1 h-7 text-xs gap-1.5" onClick={onReplace}>
+              <ArrowRightLeft className="h-3 w-3" />
+              替换原文
+            </Button>
+            <Button size="sm" variant="outline" className="flex-1 h-7 text-xs gap-1.5" onClick={onInsert}>
+              <ArrowDownToLine className="h-3 w-3" />
+              插入后面
+            </Button>
+          </div>
+        )}
+
+        {/* Follow-up chat input — shown after success */}
+        {isSuccess && (
+          <div className="flex items-center gap-2 px-3 py-2 border-t bg-background">
+            <input
+              ref={followUpInputRef}
+              type="text"
+              value={followUpInput}
+              onChange={(e) => setFollowUpInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  handleFollowUpSubmit();
+                }
+              }}
+              placeholder="继续优化，如：更简洁一些、语气更正式…"
+              className="flex-1 text-xs bg-muted/50 rounded-md px-2.5 py-1.5 outline-none border border-input focus:border-primary/50 transition-colors placeholder:text-muted-foreground/50"
+            />
+            <button
+              type="button"
+              onClick={handleFollowUpSubmit}
+              disabled={!followUpInput.trim()}
+              className="shrink-0 rounded-md p-1.5 bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 transition-colors"
+            >
+              <SendHorizontal className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
+    </>,
+    document.body,
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/artifact/WritingToolbar.tsx b/frontend-web/src/open-canvas/components/artifact/WritingToolbar.tsx
new file mode 100644
index 00000000..7eaaca0c
--- /dev/null
+++ b/frontend-web/src/open-canvas/components/artifact/WritingToolbar.tsx
@@ -0,0 +1,182 @@
+import type { Editor } from "@tiptap/react";
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  Quote,
+  Code,
+  Pilcrow,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { CanvasModelSelector } from "../selectors/CanvasModelSelector";
+
+interface ToolbarButtonProps {
+  onClick: () => void;
+  active?: boolean;
+  disabled?: boolean;
+  tooltip: string;
+  children: React.ReactNode;
+}
+
+function ToolbarButton({ onClick, active, disabled, tooltip, children }: ToolbarButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onMouseDown={(e) => {
+            e.preventDefault(); // prevent editor losing focus
+            onClick();
+          }}
+          disabled={disabled}
+          className={cn(
+            "inline-flex h-7 w-7 items-center justify-center rounded-md text-sm transition-colors",
+            "hover:bg-accent hover:text-accent-foreground",
+            "disabled:pointer-events-none disabled:opacity-40",
+            active && "bg-accent text-accent-foreground font-semibold",
+          )}
+        >
+          {children}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="text-xs">
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+interface WritingToolbarProps {
+  editor: Editor | null;
+}
+
+export function WritingToolbar({ editor }: WritingToolbarProps) {
+  if (!editor) return null;
+
+  return (
+    <div className="flex items-center gap-0.5 px-3 py-1.5 border-b bg-background/80 backdrop-blur-sm shrink-0 flex-wrap">
+      {/* Block type */}
+      <ToolbarButton
+        tooltip="正文"
+        active={editor.isActive("paragraph")}
+        onClick={() => editor.chain().focus().setParagraph().run()}
+      >
+        <Pilcrow className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      <ToolbarButton
+        tooltip="一级标题"
+        active={editor.isActive("heading", { level: 1 })}
+        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+      >
+        <Heading1 className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      <ToolbarButton
+        tooltip="二级标题"
+        active={editor.isActive("heading", { level: 2 })}
+        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+      >
+        <Heading2 className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      <ToolbarButton
+        tooltip="三级标题"
+        active={editor.isActive("heading", { level: 3 })}
+        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+      >
+        <Heading3 className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      <Separator orientation="vertical" className="mx-1 h-4" />
+
+      {/* Lists */}
+      <ToolbarButton
+        tooltip="无序列表"
+        active={editor.isActive("bulletList")}
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+      >
+        <List className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      <ToolbarButton
+        tooltip="有序列表"
+        active={editor.isActive("orderedList")}
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+      >
+        <ListOrdered className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      <Separator orientation="vertical" className="mx-1 h-4" />
+
+      {/* Blocks */}
+      <ToolbarButton
+        tooltip="引用"
+        active={editor.isActive("blockquote")}
+        onClick={() => editor.chain().focus().toggleBlockquote().run()}
+      >
+        <Quote className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      <ToolbarButton
+        tooltip="代码块"
+        active={editor.isActive("codeBlock")}
+        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+      >
+        <Code className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      <Separator orientation="vertical" className="mx-1 h-4" />
+
+      {/* Inline marks */}
+      <ToolbarButton
+        tooltip="加粗 (Ctrl+B)"
+        active={editor.isActive("bold")}
+        onClick={() => editor.chain().focus().toggleBold().run()}
+      >
+        <Bold className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      <ToolbarButton
+        tooltip="斜体 (Ctrl+I)"
+        active={editor.isActive("italic")}
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+      >
+        <Italic className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      <ToolbarButton
+        tooltip="下划线 (Ctrl+U)"
+        active={editor.isActive("underline")}
+        onClick={() => editor.chain().focus().toggleUnderline().run()}
+      >
+        <Underline className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      <ToolbarButton
+        tooltip="删除线"
+        active={editor.isActive("strike")}
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+      >
+        <Strikethrough className="h-3.5 w-3.5" />
+      </ToolbarButton>
+
+      {/* Model selector — pushed to the right */}
+      <div className="ml-auto">
+        <CanvasModelSelector />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/components/chat/CanvasChatPanel.tsx b/frontend-web/src/open-canvas/components/chat/CanvasChatPanel.tsx
index d6664cb7..9a1e3ab4 100644
--- a/frontend-web/src/open-canvas/components/chat/CanvasChatPanel.tsx
+++ b/frontend-web/src/open-canvas/components/chat/CanvasChatPanel.tsx
@@ -1,16 +1,47 @@
-import { Loader2, SendHorizonal, Sparkles, User, X } from "lucide-react";
-import { useEffect, useRef, useState, type KeyboardEvent } from "react";
+import type { BaseStream } from "@langchain/langgraph-sdk/react";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  GraduationCapIcon,
+  LightbulbIcon,
+  RocketIcon,
+  SendHorizonal,
+  Sparkles,
+  Square,
+  X,
+  ZapIcon,
+} from "lucide-react";
+import { useCallback, useMemo, useState, type KeyboardEvent } from "react";
 
+import {
+  ModelSelector,
+  ModelSelectorContent,
+  ModelSelectorInput,
+  ModelSelectorItem,
+  ModelSelectorList,
+  ModelSelectorName,
+  ModelSelectorTrigger,
+} from "@/components/ai-elements/model-selector";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Textarea } from "@/components/ui/textarea";
-import { MarkdownContent } from "@/components/workspace/messages/markdown-content";
-import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
+import { MessageList } from "@/components/workspace/messages";
+import { useModels } from "@/core/models/hooks";
+import type { AgentThreadState } from "@/core/threads";
+import { cn } from "@/lib/utils";
 
 import { useCanvasGraphContext } from "../../contexts/CanvasGraphContext";
+import { useCanvasStreamContext } from "../../contexts/CanvasStreamContext";
+import { useCanvasThreadContext } from "../../contexts/CanvasThreadContext";
 import { useCanvasSelection } from "../../hooks/useCanvasSelection";
-import { useCanvasStream } from "../../hooks/useCanvasStream";
-import type { CanvasMessage } from "../../types/thread";
 import { getCurrentArtifactContent, isCodeArtifact } from "../../utils/artifact";
 import {
   buildMessageWithSelection,
@@ -22,174 +53,15 @@ import {
 // Types
 // ---------------------------------------------------------------------------
 
-type ClarificationOption = {
-  id: string;
-  label: string;
-  description?: string;
+type CanvasMode = "flash" | "thinking" | "pro" | "ultra";
+
+const MODE_LABELS: Record<CanvasMode, string> = {
+  flash: "快速",
+  thinking: "推理",
+  pro: "深入",
+  ultra: "超级",
 };
 
-type ClarificationPayload = {
-  question?: string;
-  context?: string | null;
-  options?: ClarificationOption[];
-  allow_custom?: boolean;
-};
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function stripThinkBlocks(text: string): string {
-  return text.replace(/<think>[\s\S]*?<\/think>/g, "").trim();
-}
-
-function getClarificationPayload(msg: CanvasMessage): ClarificationPayload | null {
-  const c = msg.additional_kwargs?.clarification;
-  if (typeof c !== "object" || c === null) return null;
-  return c as ClarificationPayload;
-}
-
-function getTextContent(msg: CanvasMessage): string {
-  return typeof msg.content === "string"
-    ? msg.content
-    : JSON.stringify(msg.content);
-}
-
-// ---------------------------------------------------------------------------
-// ClarificationCard
-// ---------------------------------------------------------------------------
-
-function ClarificationCard({
-  message,
-  disabled,
-  onSubmit,
-}: {
-  message: CanvasMessage;
-  disabled: boolean;
-  onSubmit: (answer: string) => void;
-}) {
-  const payload = getClarificationPayload(message)!;
-  const [customAnswer, setCustomAnswer] = useState("");
-  const [submitted, setSubmitted] = useState(false);
-
-  const options = (payload.options ?? []).filter(
-    (o) => typeof o.label === "string" && o.label.trim(),
-  );
-
-  const busy = disabled || submitted;
-
-  function submitAnswer(answer: string) {
-    const trimmed = answer.trim();
-    if (!trimmed || busy) return;
-    setSubmitted(true);
-    onSubmit(trimmed);
-  }
-
-  const fallback = stripThinkBlocks(getTextContent(message));
-
-  return (
-    <div className="border-border bg-card text-card-foreground w-full rounded-lg border p-4 shadow-sm">
-      <div className="space-y-2">
-        <div className="text-muted-foreground text-xs font-medium">需要你的确认</div>
-        {payload.context ? (
-          <p className="text-muted-foreground text-sm leading-6">{payload.context}</p>
-        ) : null}
-        <div className="text-sm leading-6 font-medium">
-          {payload.question || fallback}
-        </div>
-      </div>
-
-      {options.length > 0 ? (
-        <div className="mt-4 grid gap-2">
-          {options.map((option) => (
-            <Button
-              key={option.id || option.label}
-              type="button"
-              variant="outline"
-              className="h-auto justify-start whitespace-normal px-3 py-2 text-left"
-              disabled={busy}
-              onClick={() => submitAnswer(`我选择：${option.label}`)}
-            >
-              <span className="flex min-w-0 flex-col items-start gap-1">
-                <span className="text-sm">{option.label}</span>
-                {option.description ? (
-                  <span className="text-muted-foreground text-xs font-normal leading-5">
-                    {option.description}
-                  </span>
-                ) : null}
-              </span>
-            </Button>
-          ))}
-        </div>
-      ) : null}
-
-      {payload.allow_custom !== false ? (
-        <div className="mt-4 flex flex-col gap-2">
-          <Textarea
-            value={customAnswer}
-            onChange={(e) => setCustomAnswer(e.currentTarget.value)}
-            placeholder="如果以上选项都不合适，可以在这里输入你的回答"
-            disabled={busy}
-            className="min-h-20 resize-none text-sm"
-          />
-          <div className="flex justify-end">
-            <Button
-              type="button"
-              size="sm"
-              disabled={busy || !customAnswer.trim()}
-              onClick={() => submitAnswer(customAnswer)}
-            >
-              <SendHorizonal className="h-4 w-4" />
-              发送回答
-            </Button>
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// AiMessageContent — renders a single AI message bubble
-// ---------------------------------------------------------------------------
-
-function AiMessageContent({
-  message,
-  isActiveStream,
-  isStreaming,
-  onClarificationSubmit,
-}: {
-  message: CanvasMessage;
-  isActiveStream: boolean;
-  isStreaming: boolean;
-  onClarificationSubmit: (answer: string) => void;
-}) {
-  const rehypePlugins = useRehypeSplitWordsIntoSpans(isActiveStream);
-  const clarification = getClarificationPayload(message);
-
-  if (clarification) {
-    return (
-      <ClarificationCard
-        message={message}
-        disabled={isStreaming}
-        onSubmit={onClarificationSubmit}
-      />
-    );
-  }
-
-  const displayText = stripThinkBlocks(getTextContent(message));
-  if (!displayText) return null;
-
-  return (
-    <MarkdownContent
-      content={displayText}
-      isLoading={isActiveStream}
-      rehypePlugins={rehypePlugins}
-      className="text-sm"
-    />
-  );
-}
-
 // ---------------------------------------------------------------------------
 // ChatWelcome
 // ---------------------------------------------------------------------------
@@ -212,20 +84,47 @@ function ChatWelcome() {
   );
 }
 
+// ---------------------------------------------------------------------------
+// ModeIcon
+// ---------------------------------------------------------------------------
+
+function ModeIcon({
+  mode,
+  className,
+}: {
+  mode: CanvasMode;
+  className?: string;
+}) {
+  if (mode === "flash") return <ZapIcon className={className} />;
+  if (mode === "thinking") return <LightbulbIcon className={className} />;
+  if (mode === "pro") return <GraduationCapIcon className={className} />;
+  return <RocketIcon className={cn(className, "text-[#dabb5e]")} />;
+}
+
 // ---------------------------------------------------------------------------
 // CanvasChatPanel
 // ---------------------------------------------------------------------------
 
 export function CanvasChatPanel() {
-  const { messages, isStreaming, artifact } = useCanvasGraphContext();
-  const { sendMessage } = useCanvasStream();
+  const { artifact } = useCanvasGraphContext();
+  const { thread, sendMessage, threadId } = useCanvasStreamContext();
+  const { modelName, setModelName } = useCanvasThreadContext();
   const { selection, clearSelection } = useCanvasSelection();
-  const [input, setInput] = useState("");
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const bottomRef = useRef<HTMLDivElement>(null);
+  const { models } = useModels();
+
+  const [input, setInput] = useState("");
+  const [mode, setMode] = useState<CanvasMode>("pro");
+  const [modelDialogOpen, setModelDialogOpen] = useState(false);
 
-  const hasMessages = messages.length > 0;
   const hasSelection = hasActiveSelection(selection);
+  const isStreaming = thread.isLoading;
+  const hasMessages = thread.messages.length > 0;
+
+  const selectedModel = useMemo(
+    () => models.find((m) => m.name === modelName) ?? models[0],
+    [models, modelName],
+  );
+  const supportsThinking = selectedModel?.supports_thinking ?? false;
 
   // Resolve selected code snippet when artifact is a code artifact
   const currentContent = getCurrentArtifactContent(artifact);
@@ -252,14 +151,13 @@ export function CanvasChatPanel() {
     return null;
   })();
 
-  // Scroll to bottom whenever messages change or streaming state updates
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, isStreaming]);
-
   async function handleSend() {
+    if (isStreaming) {
+      await thread.stop();
+      return;
+    }
     const text = input.trim();
-    if (!text || isStreaming) return;
+    if (!text) return;
     setInput("");
 
     const finalText = hasSelection
@@ -267,7 +165,7 @@ export function CanvasChatPanel() {
       : text;
 
     clearSelection();
-    await sendMessage(finalText);
+    await sendMessage(finalText, { mode });
   }
 
   function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
@@ -277,136 +175,232 @@ export function CanvasChatPanel() {
     }
   }
 
-  // Index of the last AI message — used to decide which message gets streaming animation
-  const lastAiIndex = (() => {
-    for (let i = messages.length - 1; i >= 0; i--) {
-      if (messages[i]!.type !== "human") return i;
-    }
-    return -1;
-  })();
+  const handleClarificationSubmit = useCallback(
+    async (answer: string) => {
+      await sendMessage(answer, { mode });
+    },
+    [sendMessage, mode],
+  );
 
-  // Whether the last AI message has any visible text (not just think blocks / empty)
-  const lastAiHasVisibleContent = (() => {
-    if (lastAiIndex < 0) return false;
-    const msg = messages[lastAiIndex]!;
-    if (getClarificationPayload(msg)) return true;
-    return stripThinkBlocks(getTextContent(msg)).trim().length > 0;
-  })();
+  const handleModelSelect = useCallback(
+    (name: string) => {
+      setModelName(name);
+      setModelDialogOpen(false);
+      // If selected model doesn't support thinking, fall back to flash
+      const model = models.find((m) => m.name === name);
+      if (!model?.supports_thinking && mode === "thinking") {
+        setMode("flash");
+      }
+    },
+    [models, mode, setModelName],
+  );
+
+  // MessageList expects BaseStream<AgentThreadState>. The canvas stream returns
+  // BaseStream<CanvasThreadValues> — structurally compatible for message rendering
+  // since MessageList only reads thread.messages, isLoading, and isThreadLoading.
+  const threadForList = thread as unknown as BaseStream<AgentThreadState>;
 
   return (
     <div className="h-full flex flex-col bg-background">
       {/* Message list */}
       <div className="flex-1 overflow-y-auto min-h-0">
-        {hasMessages ? (
-          <div className="p-4 space-y-4">
-            {messages.map((msg, i) => {
-              const isHuman = msg.type === "human";
-
-              return (
-                <div
-                  key={msg.id ?? i}
-                  className={`flex gap-2 ${isHuman ? "justify-end" : "justify-start"}`}
-                >
-                  {!isHuman && (
-                    <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
-                      <Sparkles className="w-3 h-3 text-primary" />
-                    </div>
-                  )}
-
-                  {isHuman ? (
-                    <div className="max-w-[80%] rounded-lg px-3 py-2 text-sm bg-primary text-primary-foreground">
-                      {getTextContent(msg)}
-                    </div>
-                  ) : (
-                    <div className="max-w-[85%] min-w-0">
-                      <AiMessageContent
-                        message={msg}
-                        isActiveStream={isStreaming && i === lastAiIndex}
-                        isStreaming={isStreaming}
-                        onClarificationSubmit={(answer) => void sendMessage(answer)}
-                      />
-                    </div>
-                  )}
-
-                  {isHuman && (
-                    <div className="w-6 h-6 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5">
-                      <User className="w-3 h-3" />
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-
-            {isStreaming && !lastAiHasVisibleContent && (
-              <div className="flex gap-2 justify-start">
-                <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
-                  <Sparkles className="w-3 h-3 text-primary" />
-                </div>
-                <div className="bg-muted rounded-lg px-3 py-2 flex items-center gap-2">
-                  <Loader2 className="w-3 h-3 animate-spin text-muted-foreground" />
-                  <span className="text-xs text-muted-foreground">正在生成…</span>
-                </div>
-              </div>
-            )}
-
-            <div ref={bottomRef} />
-          </div>
+        {hasMessages || isStreaming || thread.isThreadLoading ? (
+          <MessageList
+            className="size-full"
+            threadId={threadId ?? "canvas"}
+            thread={threadForList}
+            paddingBottom={0}
+            onClarificationSubmit={handleClarificationSubmit}
+          />
         ) : (
           <ChatWelcome />
         )}
       </div>
 
-      {/* Selection badge */}
-      {hasSelection && selectionPreview && (
-        <div className="px-3 pt-2 shrink-0">
-          <Badge
-            variant="secondary"
-            className="flex items-center gap-1.5 max-w-full text-xs font-normal py-1 px-2 h-auto"
-          >
-            <span className="shrink-0 text-muted-foreground">
-              {selection.textSelection ? "选中文本:" : "选中代码:"}
-            </span>
-            <span className="truncate min-w-0 font-mono">{selectionPreview}</span>
-            <button
-              onClick={clearSelection}
-              className="shrink-0 ml-auto hover:text-foreground text-muted-foreground transition-colors"
-              aria-label="清除选区"
-            >
-              <X className="w-3 h-3" />
-            </button>
-          </Badge>
-        </div>
-      )}
-
       {/* Input area */}
-      <div className="border-t p-3 shrink-0">
-        <div className="flex gap-2 items-end">
+      <div className="p-3 shrink-0">
+        <div className="rounded-2xl border border-border/70 bg-background shadow-[0_2px_12px_-4px_rgba(0,0,0,0.08)] overflow-hidden transition-shadow focus-within:shadow-[0_2px_16px_-4px_rgba(0,0,0,0.14)] dark:shadow-none dark:focus-within:ring-1 dark:focus-within:ring-border">
+          {/* Selection badge */}
+          {hasSelection && selectionPreview && (
+            <div className="px-3 pt-2.5">
+              <Badge
+                variant="secondary"
+                className="flex items-center gap-1.5 max-w-full text-xs font-normal py-1 px-2 h-auto"
+              >
+                <span className="shrink-0 text-muted-foreground">
+                  {selection.textSelection ? "选中文本:" : "选中代码:"}
+                </span>
+                <span className="truncate min-w-0 font-mono">{selectionPreview}</span>
+                <button
+                  onClick={clearSelection}
+                  className="shrink-0 ml-auto hover:text-foreground text-muted-foreground transition-colors"
+                  aria-label="清除选区"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              </Badge>
+            </div>
+          )}
+
+          {/* Textarea */}
           <Textarea
-            ref={textareaRef}
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder={
               hasSelection
                 ? "针对选中内容发出指令…"
-                : "发送消息以开始… (Enter 发送，Shift+Enter 换行)"
+                : "发消息…"
             }
-            className="min-h-[40px] max-h-[160px] resize-none text-sm"
-            rows={1}
+            className="border-0 shadow-none rounded-none resize-none text-sm min-h-[60px] max-h-[160px] focus-visible:ring-0 px-3 pt-3 pb-2"
+            rows={2}
             disabled={isStreaming}
           />
-          <Button
-            size="icon"
-            className="h-9 w-9 shrink-0"
-            disabled={!input.trim() || isStreaming}
-            onClick={() => void handleSend()}
-          >
-            {isStreaming ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <SendHorizonal className="h-4 w-4" />
+
+          {/* Toolbar */}
+          <div className="flex items-center gap-1 px-2 pb-2 pt-1 border-t border-border/40">
+            {/* Mode selector */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 gap-1 rounded-full px-2.5 text-xs font-normal text-muted-foreground hover:text-foreground hover:bg-muted/60"
+                >
+                  <ModeIcon mode={mode} className="h-3 w-3" />
+                  <span>{MODE_LABELS[mode]}</span>
+                  <ChevronDownIcon className="h-3 w-3 opacity-60" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="w-52">
+                <DropdownMenuLabel className="text-xs text-muted-foreground">
+                  推理模式
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className={cn(
+                    "gap-2 text-sm",
+                    mode === "flash" ? "text-foreground" : "text-muted-foreground",
+                  )}
+                  onClick={() => setMode("flash")}
+                >
+                  <ZapIcon className="h-3.5 w-3.5" />
+                  <div className="flex flex-col flex-1">
+                    <span className="font-medium">快速</span>
+                    <span className="text-xs opacity-70">低延迟，即时响应</span>
+                  </div>
+                  {mode === "flash" && <CheckIcon className="h-3.5 w-3.5 ml-auto" />}
+                </DropdownMenuItem>
+                {supportsThinking && (
+                  <DropdownMenuItem
+                    className={cn(
+                      "gap-2 text-sm",
+                      mode === "thinking" ? "text-foreground" : "text-muted-foreground",
+                    )}
+                    onClick={() => setMode("thinking")}
+                  >
+                    <LightbulbIcon className="h-3.5 w-3.5" />
+                    <div className="flex flex-col flex-1">
+                      <span className="font-medium">推理</span>
+                      <span className="text-xs opacity-70">思维链推导</span>
+                    </div>
+                    {mode === "thinking" && <CheckIcon className="h-3.5 w-3.5 ml-auto" />}
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem
+                  className={cn(
+                    "gap-2 text-sm",
+                    mode === "pro" ? "text-foreground" : "text-muted-foreground",
+                  )}
+                  onClick={() => setMode("pro")}
+                >
+                  <GraduationCapIcon className="h-3.5 w-3.5" />
+                  <div className="flex flex-col flex-1">
+                    <span className="font-medium">深入</span>
+                    <span className="text-xs opacity-70">深度分析与研究</span>
+                  </div>
+                  {mode === "pro" && <CheckIcon className="h-3.5 w-3.5 ml-auto" />}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className={cn(
+                    "gap-2 text-sm",
+                    mode === "ultra" ? "text-foreground" : "text-muted-foreground",
+                  )}
+                  onClick={() => setMode("ultra")}
+                >
+                  <RocketIcon className={cn("h-3.5 w-3.5", mode === "ultra" && "text-[#dabb5e]")} />
+                  <div className="flex flex-col flex-1">
+                    <span className={cn("font-medium", mode === "ultra" && "text-[#dabb5e]")}>超级</span>
+                    <span className="text-xs opacity-70">全力以赴，最强推理</span>
+                  </div>
+                  {mode === "ultra" && <CheckIcon className="h-3.5 w-3.5 ml-auto text-[#dabb5e]" />}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            {/* Model selector */}
+            {models.length > 0 && (
+              <ModelSelector open={modelDialogOpen} onOpenChange={setModelDialogOpen}>
+                <ModelSelectorTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 gap-1 rounded-full px-2.5 text-xs font-normal text-muted-foreground hover:text-foreground hover:bg-muted/60 max-w-[120px]"
+                  >
+                    <ModelSelectorName className="truncate text-xs font-normal">
+                      {selectedModel?.display_name ?? "选择模型"}
+                    </ModelSelectorName>
+                    <ChevronDownIcon className="h-3 w-3 shrink-0 opacity-60" />
+                  </Button>
+                </ModelSelectorTrigger>
+                <ModelSelectorContent title="选择模型">
+                  <ModelSelectorInput placeholder="搜索模型…" />
+                  <ModelSelectorList>
+                    {models.map((m) => (
+                      <ModelSelectorItem
+                        key={m.name}
+                        value={m.name}
+                        onSelect={() => handleModelSelect(m.name)}
+                      >
+                        <div className="flex min-w-0 flex-1 flex-col">
+                          <ModelSelectorName>{m.display_name}</ModelSelectorName>
+                          <span className="text-muted-foreground truncate text-[10px]">
+                            {m.model}
+                          </span>
+                        </div>
+                        {m.name === modelName ? (
+                          <CheckIcon className="ml-auto size-4" />
+                        ) : (
+                          <div className="ml-auto size-4" />
+                        )}
+                      </ModelSelectorItem>
+                    ))}
+                  </ModelSelectorList>
+                </ModelSelectorContent>
+              </ModelSelector>
             )}
-          </Button>
+
+            {/* Spacer */}
+            <div className="flex-1" />
+
+            {/* Send / Stop button */}
+            <Button
+              size="icon"
+              variant={isStreaming ? "secondary" : "default"}
+              className={cn(
+                "h-7 w-7 shrink-0 rounded-full",
+                isStreaming && "text-muted-foreground",
+              )}
+              onClick={() => void handleSend()}
+              disabled={!isStreaming && !input.trim()}
+            >
+              {isStreaming ? (
+                <Square className="h-3 w-3 fill-current" />
+              ) : (
+                <SendHorizonal className="h-3.5 w-3.5" />
+              )}
+            </Button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend-web/src/open-canvas/components/layout/CanvasResizableLayout.tsx b/frontend-web/src/open-canvas/components/layout/CanvasResizableLayout.tsx
index 78f8213a..c70b3871 100644
--- a/frontend-web/src/open-canvas/components/layout/CanvasResizableLayout.tsx
+++ b/frontend-web/src/open-canvas/components/layout/CanvasResizableLayout.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { GroupImperativeHandle } from "react-resizable-panels";
 
 import {
@@ -6,17 +6,23 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
+import { cn } from "@/lib/utils";
 
 import { useCanvasUIContext } from "../../contexts/CanvasUIContext";
+import { CanvasStreamProvider } from "../../contexts/CanvasStreamContext";
 import { CanvasChatPanel } from "../chat/CanvasChatPanel";
 import { CanvasArtifactPanel } from "../artifact/CanvasArtifactPanel";
+import { AIWritingPanel } from "../ai-writing/AIWritingPanel";
 
 const LAYOUT_COLLAPSED = { chat: 0, artifact: 100 };
 const LAYOUT_DEFAULT = { chat: 35, artifact: 65 };
 
+type LeftMode = "chat" | "writing";
+
 export function CanvasResizableLayout() {
   const { isChatCollapsed } = useCanvasUIContext();
   const layoutRef = useRef<GroupImperativeHandle>(null);
+  const [leftMode, setLeftMode] = useState<LeftMode>("chat");
 
   useEffect(() => {
     layoutRef.current?.setLayout(
@@ -25,6 +31,7 @@ export function CanvasResizableLayout() {
   }, [isChatCollapsed]);
 
   return (
+    <CanvasStreamProvider>
     <div className="flex-1 min-h-0 overflow-hidden">
       <ResizablePanelGroup
         orientation="horizontal"
@@ -37,9 +44,29 @@ export function CanvasResizableLayout() {
           minSize={0}
           collapsible
           collapsedSize={0}
-          className="overflow-hidden"
+          className="overflow-hidden flex flex-col"
         >
-          <CanvasChatPanel />
+          {/* 模式切换标签栏 */}
+          <div className="flex shrink-0 border-b bg-muted/30">
+            {(["chat", "writing"] as LeftMode[]).map((mode) => (
+              <button
+                key={mode}
+                onClick={() => setLeftMode(mode)}
+                className={cn(
+                  "flex-1 py-1.5 text-xs font-medium transition-colors",
+                  leftMode === mode
+                    ? "border-b-2 border-primary text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {mode === "chat" ? "对话" : "AI 写作"}
+              </button>
+            ))}
+          </div>
+
+          <div className="flex-1 min-h-0 overflow-hidden">
+            {leftMode === "chat" ? <CanvasChatPanel /> : <AIWritingPanel />}
+          </div>
         </ResizablePanel>
 
         <ResizableHandle withHandle />
@@ -54,5 +81,6 @@ export function CanvasResizableLayout() {
         </ResizablePanel>
       </ResizablePanelGroup>
     </div>
+    </CanvasStreamProvider>
   );
 }
diff --git a/frontend-web/src/open-canvas/components/layout/CanvasShell.tsx b/frontend-web/src/open-canvas/components/layout/CanvasShell.tsx
index 93a42020..5eeb92e4 100644
--- a/frontend-web/src/open-canvas/components/layout/CanvasShell.tsx
+++ b/frontend-web/src/open-canvas/components/layout/CanvasShell.tsx
@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { getCanvasThread } from "../../api/threads";
 import { useCanvasGraphContext } from "../../contexts/CanvasGraphContext";
 import { useCanvasThreadContext } from "../../contexts/CanvasThreadContext";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { CanvasHeader } from "./CanvasHeader";
 import { CanvasResizableLayout } from "./CanvasResizableLayout";
 
@@ -42,9 +43,11 @@ export function CanvasShell() {
   }, [threadId, setMessages, setArtifact, setThreadId]);
 
   return (
-    <div className="h-full flex flex-col overflow-hidden bg-background">
-      <CanvasHeader />
-      <CanvasResizableLayout />
-    </div>
+    <TooltipProvider delayDuration={300}>
+      <div className="h-full flex flex-col overflow-hidden bg-background">
+        <CanvasHeader />
+        <CanvasResizableLayout />
+      </div>
+    </TooltipProvider>
   );
 }
diff --git a/frontend-web/src/open-canvas/contexts/CanvasStreamContext.tsx b/frontend-web/src/open-canvas/contexts/CanvasStreamContext.tsx
new file mode 100644
index 00000000..8353c6e5
--- /dev/null
+++ b/frontend-web/src/open-canvas/contexts/CanvasStreamContext.tsx
@@ -0,0 +1,24 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { useCanvasThreadStream } from "../hooks/useCanvasThreadStream";
+
+type CanvasStreamContextValue = ReturnType<typeof useCanvasThreadStream>;
+
+const CanvasStreamContext = createContext<CanvasStreamContextValue | null>(null);
+
+export function CanvasStreamProvider({ children }: { children: ReactNode }) {
+  const value = useCanvasThreadStream();
+  return (
+    <CanvasStreamContext.Provider value={value}>
+      {children}
+    </CanvasStreamContext.Provider>
+  );
+}
+
+export function useCanvasStreamContext() {
+  const ctx = useContext(CanvasStreamContext);
+  if (!ctx)
+    throw new Error(
+      "useCanvasStreamContext must be used within CanvasStreamProvider",
+    );
+  return ctx;
+}
diff --git a/frontend-web/src/open-canvas/contexts/CanvasUIContext.tsx b/frontend-web/src/open-canvas/contexts/CanvasUIContext.tsx
index d66f35b6..6f08bcdc 100644
--- a/frontend-web/src/open-canvas/contexts/CanvasUIContext.tsx
+++ b/frontend-web/src/open-canvas/contexts/CanvasUIContext.tsx
@@ -10,6 +10,7 @@ import type {
   CanvasCodeSelection,
   CanvasSelectionState,
   CanvasTextSelection,
+  WritingSelection,
 } from "../types/selection";
 
 export interface CanvasUIContextValue {
@@ -17,6 +18,8 @@ export interface CanvasUIContextValue {
   isEditing: boolean;
   isWebSearchOpen: boolean;
   selection: CanvasSelectionState;
+  /** Tiptap editor selection for AI rewrite flow */
+  writingSelection: WritingSelection | null;
   setIsChatCollapsed: (v: boolean) => void;
   setIsEditing: (v: boolean) => void;
   setIsWebSearchOpen: (v: boolean) => void;
@@ -25,6 +28,7 @@ export interface CanvasUIContextValue {
   /** Set code selection; clears any existing text selection. */
   setCodeSelection: (s: CanvasCodeSelection | null) => void;
   clearSelection: () => void;
+  setWritingSelection: (s: WritingSelection | null) => void;
 }
 
 const EMPTY_SELECTION: CanvasSelectionState = {
@@ -40,6 +44,8 @@ export function CanvasUIProvider({ children }: { children: ReactNode }) {
   const [isWebSearchOpen, setIsWebSearchOpen] = useState(false);
   const [selection, setSelection] =
     useState<CanvasSelectionState>(EMPTY_SELECTION);
+  const [writingSelection, setWritingSelection] =
+    useState<WritingSelection | null>(null);
 
   const setTextSelection = useCallback((s: CanvasTextSelection | null) => {
     setSelection({ textSelection: s, codeSelection: null });
@@ -56,12 +62,14 @@ export function CanvasUIProvider({ children }: { children: ReactNode }) {
         isEditing,
         isWebSearchOpen,
         selection,
+        writingSelection,
         setIsChatCollapsed,
         setIsEditing,
         setIsWebSearchOpen,
         setTextSelection,
         setCodeSelection,
         clearSelection: () => setSelection(EMPTY_SELECTION),
+        setWritingSelection,
       }}
     >
       {children}
diff --git a/frontend-web/src/open-canvas/editor/AiHighlightExtension.ts b/frontend-web/src/open-canvas/editor/AiHighlightExtension.ts
new file mode 100644
index 00000000..3f79f340
--- /dev/null
+++ b/frontend-web/src/open-canvas/editor/AiHighlightExtension.ts
@@ -0,0 +1,79 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+interface HighlightRange {
+  from: number;
+  to: number;
+}
+
+const aiHighlightKey = new PluginKey<HighlightRange | null>("aiHighlight");
+
+// Augment Tiptap's Commands interface so TS knows about our custom commands
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    aiHighlight: {
+      setAiHighlight: (from: number, to: number) => ReturnType;
+      clearAiHighlight: () => ReturnType;
+    };
+  }
+}
+
+export const AiHighlightExtension = Extension.create({
+  name: "aiHighlight",
+
+  addCommands() {
+    return {
+      setAiHighlight:
+        (from: number, to: number) =>
+        ({ dispatch, tr }) => {
+          if (dispatch) dispatch(tr.setMeta(aiHighlightKey, { from, to }));
+          return true;
+        },
+      clearAiHighlight:
+        () =>
+        ({ dispatch, tr }) => {
+          if (dispatch) dispatch(tr.setMeta(aiHighlightKey, null));
+          return true;
+        },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin<HighlightRange | null>({
+        key: aiHighlightKey,
+
+        state: {
+          init: () => null,
+          apply(tr, prev) {
+            const meta = tr.getMeta(aiHighlightKey);
+            // explicit set / clear via command
+            if (meta !== undefined) return meta as HighlightRange | null;
+            // map positions through doc changes so highlight survives edits
+            if (tr.docChanged && prev) {
+              return {
+                from: tr.mapping.map(prev.from),
+                to:   tr.mapping.map(prev.to),
+              };
+            }
+            return prev;
+          },
+        },
+
+        props: {
+          decorations(state) {
+            const range = aiHighlightKey.getState(state);
+            if (!range) return DecorationSet.empty;
+            const { from, to } = range;
+            const docSize = state.doc.content.size;
+            if (from >= to || from < 0 || to > docSize) return DecorationSet.empty;
+            return DecorationSet.create(state.doc, [
+              Decoration.inline(from, to, { class: "ai-rewrite-highlight" }),
+            ]);
+          },
+        },
+      }),
+    ];
+  },
+});
diff --git a/frontend-web/src/open-canvas/editor/TiptapEditor.tsx b/frontend-web/src/open-canvas/editor/TiptapEditor.tsx
new file mode 100644
index 00000000..de7b53d7
--- /dev/null
+++ b/frontend-web/src/open-canvas/editor/TiptapEditor.tsx
@@ -0,0 +1,11 @@
+import type { Editor } from "@tiptap/react";
+import { EditorContent } from "@tiptap/react";
+
+interface TiptapEditorProps {
+  editor: Editor | null;
+  className?: string;
+}
+
+export function TiptapEditor({ editor, className }: TiptapEditorProps) {
+  return <EditorContent editor={editor} className={className} />;
+}
diff --git a/frontend-web/src/open-canvas/editor/TiptapExtensions.ts b/frontend-web/src/open-canvas/editor/TiptapExtensions.ts
new file mode 100644
index 00000000..69e56948
--- /dev/null
+++ b/frontend-web/src/open-canvas/editor/TiptapExtensions.ts
@@ -0,0 +1,23 @@
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "tiptap-markdown";
+import { AiHighlightExtension } from "./AiHighlightExtension";
+
+export const buildExtensions = (placeholder = "开始写作…") => [
+  StarterKit.configure({
+    // Disable hard break so Enter creates new paragraph
+    hardBreak: false,
+  }),
+  Underline,
+  Placeholder.configure({
+    placeholder,
+    emptyEditorClass: "is-editor-empty",
+  }),
+  Markdown.configure({
+    html: false,
+    transformCopiedText: true,
+    transformPastedText: true,
+  }),
+  AiHighlightExtension,
+];
diff --git a/frontend-web/src/open-canvas/hooks/useAIWriting.ts b/frontend-web/src/open-canvas/hooks/useAIWriting.ts
new file mode 100644
index 00000000..fee1737a
--- /dev/null
+++ b/frontend-web/src/open-canvas/hooks/useAIWriting.ts
@@ -0,0 +1,422 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { useCanvasGraphContext } from '../contexts/CanvasGraphContext';
+import { startWritingSession, subscribeToProgress, resumeWriting as resumeWritingApi } from '../api/ai-writing';
+import { saveAIWritingTranscript } from '../api/ai-writing-sessions';
+import { countWords } from '../utils/wordCount';
+import type {
+  AIWritingRequest,
+  AIWritingState,
+  AIMaterial,
+  AIOutline,
+  CompletedIntervention,
+  ProgressEvent,
+  ReviewResult,
+  StreamingDraftSection,
+  StreamingReviewItem,
+  UserInterventionPayload,
+  WritingStatus,
+} from '../types/ai-writing';
+
+const INITIAL_STATE: AIWritingState = {
+  sessionId: null,
+  status: 'idle',
+  isPaused: false,
+  progressEvents: [],
+  materials: [],
+  outline: null,
+  currentDraftMarkdown: '',
+  currentDraftTitle: '',
+  reviewResult: null,
+  revisionCount: 0,
+  currentPause: null,
+  completedInterventions: [],
+  error: null,
+  streamingDraftTitle: '',
+  streamingDraftSections: [],
+  outlineStreamingText: '',
+  outlineThinkingText: '',
+  researchProgress: '',
+  streamingReviewItems: [],
+  revisionSummary: null,
+  pendingRevisionContext: null,
+};
+
+export function useAIWriting() {
+  const { setArtifact } = useCanvasGraphContext();
+  const [state, setState] = useState<AIWritingState>(INITIAL_STATE);
+  const abortRef = useRef<AbortController | null>(null);
+  const unsubRef = useRef<(() => void) | null>(null);
+
+  const handleEvent = useCallback(
+    (event: ProgressEvent) => {
+      setState((prev) => {
+        const base: AIWritingState = {
+          ...prev,
+          progressEvents: [...prev.progressEvents, event],
+        };
+
+        switch (event.type) {
+          case 'step_start':
+            // 兜底：编辑节点完成时若没有流式事件，也切到审核态
+            if (event.agentName === '编辑' && prev.status !== 'reviewing') {
+              return { ...base, status: 'reviewing' };
+            }
+            return base;
+
+          case 'step_done':
+            return base;
+
+          case 'research_progress':
+            // 素材收集专家实时进度：仅更新最新提示文案
+            return { ...base, researchProgress: event.message ?? '' };
+
+          case 'resumed':
+            return { ...base, currentPause: null };
+
+          case 'materials_ready':
+            // 仅缓存素材数据，不弹干预卡（等 await_user 事件再弹）；进度文案已完成可清空
+            return {
+              ...base,
+              materials: (event.materials ?? []) as AIMaterial[],
+              researchProgress: '',
+            };
+
+          case 'outline_chunk': {
+            const chunkText    = (event as unknown as { text: string }).text ?? '';
+            const isThinking   = (event as unknown as { is_thinking: boolean }).is_thinking ?? false;
+            return {
+              ...prev,
+              status: 'writing_outline',
+              outlineStreamingText:  isThinking ? prev.outlineStreamingText  : prev.outlineStreamingText  + chunkText,
+              outlineThinkingText:   isThinking ? prev.outlineThinkingText   + chunkText : prev.outlineThinkingText,
+            };
+          }
+
+          case 'outline_ready':
+            // 仅缓存大纲数据，不弹干预卡（等 await_user 事件再弹）；清空流式文本
+            return {
+              ...base,
+              outline: (event.outline ?? null) as AIOutline | null,
+              outlineStreamingText: '',
+              outlineThinkingText: '',
+            };
+
+          case 'draft_chunk': {
+            const idx        = (event as unknown as { sectionIndex: number }).sectionIndex ?? 0;
+            const title      = (event as unknown as { sectionTitle: string }).sectionTitle ?? '';
+            const text       = (event as unknown as { text: string }).text ?? '';
+            const isThinking = (event as unknown as { is_thinking: boolean }).is_thinking ?? false;
+            const done       = (event as unknown as { isSectionDone: boolean }).isSectionDone ?? false;
+            const sections   = prev.streamingDraftSections.map((s) => ({ ...s }));
+            const existing   = sections.find((s) => s.sectionIndex === idx);
+            if (existing) {
+              if (isThinking) existing.thinkingText += text;
+              else            existing.text         += text;
+              existing.isDone = done;
+            } else {
+              sections.push({
+                sectionIndex:  idx,
+                sectionTitle:  title,
+                text:          isThinking ? '' : text,
+                thinkingText:  isThinking ? text : '',
+                isDone:        done,
+              });
+            }
+            return {
+              ...prev,
+              status: 'writing_draft',
+              streamingDraftSections: sections,
+              streamingDraftTitle: prev.streamingDraftTitle || prev.outline?.title || '',
+            };
+          }
+
+          case 'review_chunk': {
+            const category   = (event as unknown as { category: StreamingReviewItem['category'] }).category;
+            const text       = (event as unknown as { text: string }).text ?? '';
+            const isThinking = (event as unknown as { is_thinking: boolean }).is_thinking ?? false;
+            // 首个 chunk 且非审核态 → 新一轮审核，清空上一轮残留
+            const isNewCycle = prev.status !== 'reviewing';
+            const items = (isNewCycle ? [] : prev.streamingReviewItems).map((it) => ({ ...it }));
+            let item = items.find((it) => it.category === category);
+            if (!item) {
+              item = {
+                category, isDone: false,
+                streamingText: '', thinkingText: '',
+                score: 0, issues: [],
+              };
+              items.push(item);
+            }
+            if (isThinking) item.thinkingText  += text;
+            else            item.streamingText += text;
+            return { ...prev, status: 'reviewing', streamingReviewItems: items };
+          }
+
+          case 'review_item_done': {
+            const category = event.reviewItemCategory ?? 'fact';
+            const items = prev.streamingReviewItems.map((it) => ({ ...it }));
+            const item = items.find((it) => it.category === category);
+            if (item) {
+              item.isDone = true;
+              item.score = event.reviewItemScore ?? 80;
+              item.issues = event.reviewItemIssues ?? [];
+            } else {
+              // 兜底：没收到任何 chunk 直接来 done
+              items.push({
+                category, isDone: true,
+                streamingText: '', thinkingText: '',
+                score: event.reviewItemScore ?? 80,
+                issues: event.reviewItemIssues ?? [],
+              });
+            }
+            return { ...prev, status: 'reviewing', streamingReviewItems: items };
+          }
+
+          case 'draft_ready': {
+            const newMarkdown = event.draftMarkdown ?? '';
+            const newWordCount = countWords(newMarkdown);
+            const summary = prev.pendingRevisionContext
+              ? {
+                  revisedIssues: prev.pendingRevisionContext.submittedIssues,
+                  skippedIssues: prev.pendingRevisionContext.skippedIssues,
+                  oldWordCount: prev.pendingRevisionContext.oldWordCount,
+                  newWordCount,
+                }
+              : null;
+            return {
+              ...base,
+              currentDraftMarkdown: newMarkdown,
+              currentDraftTitle: event.draftTitle ?? '',
+              revisionCount: event.revisionCount ?? 0,
+              streamingDraftSections: [],
+              streamingDraftTitle: '',
+              revisionSummary: summary,
+              pendingRevisionContext: null,
+            };
+          }
+
+          case 'review_ready':
+            return {
+              ...base,
+              reviewResult: (event.reviewResult ?? null) as ReviewResult | null,
+            };
+
+          case 'await_user': {
+            const pp = event.pausePoint;
+            // Skip duplicate on SSE reconnect: backend re-injects the saved await_user event
+            // when queue is empty. If we already have this pause set, nothing needs to change.
+            if (prev.currentPause?.pausePoint === pp) return prev;
+            const pauseStatus = pp
+              ? (`awaiting_${pp}` as AIWritingState['status'])
+              : prev.status;
+            // 若 await_user 里携带了素材/大纲/审核数据，一并更新（兜底 materials_ready 丢失的情况）
+            const extra: Partial<AIWritingState> = {};
+            if (pp === 'material_confirm' && event.materials?.length) {
+              extra.materials = event.materials as AIMaterial[];
+            }
+            if (pp === 'outline_confirm' && event.outline) {
+              extra.outline = event.outline as AIOutline;
+            }
+            return { ...base, ...extra, status: pauseStatus, currentPause: event };
+          }
+
+          case 'done':
+            return { ...base, status: 'done', currentPause: null };
+
+          case 'error': {
+            // error 事件携带 title（如「模型错误」）+ detail（真实原因），拼成底部状态栏文案
+            const msg = event.detail
+              ? `${event.title ?? '出错了'}：${event.detail}`
+              : (event.message ?? '未知错误');
+            return { ...base, status: 'error', error: msg };
+          }
+
+          // notice：非致命告警（ES 波动 / 模型兜底），仅追加到时间线，不改变写作状态
+          case 'notice':
+            return base;
+
+          default:
+            return base;
+        }
+      });
+
+      // 草稿实时同步到右侧 Artifact 面板
+      if (event.type === 'draft_ready' && event.draftMarkdown) {
+        setArtifact({
+          currentIndex: 0,
+          contents: [
+            {
+              index: 0,
+              type: 'text',
+              title: event.draftTitle ?? '草稿',
+              fullMarkdown: event.draftMarkdown,
+            },
+          ],
+        });
+      }
+    },
+    [setArtifact],
+  );
+
+  const startWriting = useCallback(
+    async (request: AIWritingRequest) => {
+      if (
+        state.status !== 'idle' &&
+        state.status !== 'done' &&
+        state.status !== 'error'
+      )
+        return;
+
+      abortRef.current?.abort();
+      abortRef.current = new AbortController();
+      setState({ ...INITIAL_STATE, status: 'researching' });
+
+      try {
+        const sessionId = await startWritingSession(request);
+        setState((prev) => ({ ...prev, sessionId }));
+        unsubRef.current = subscribeToProgress(
+          sessionId,
+          handleEvent,
+          abortRef.current.signal,
+        );
+      } catch (err) {
+        setState((prev) => ({
+          ...prev,
+          status: 'error',
+          error: String(err),
+        }));
+      }
+    },
+    [state.status, handleEvent],
+  );
+
+  const submitIntervention = useCallback(
+    async (payload: UserInterventionPayload) => {
+      if (!state.sessionId || !state.currentPause) return;
+
+      // 若处于暂停状态，先重连 SSE 再提交，实现"干预即续接"
+      if (state.isPaused) {
+        abortRef.current?.abort();
+        abortRef.current = new AbortController();
+        unsubRef.current = subscribeToProgress(
+          state.sessionId,
+          handleEvent,
+          abortRef.current.signal,
+        );
+        setState((prev) => ({ ...prev, isPaused: false }));
+      }
+
+      const pausePoint = state.currentPause.pausePoint;
+      const record: CompletedIntervention = {
+        pausePoint: pausePoint as CompletedIntervention['pausePoint'],
+        action: payload.action,
+      };
+      if (pausePoint === 'material_confirm') {
+        record.materials = state.materials;
+      } else if (pausePoint === 'outline_confirm') {
+        record.outline = state.outline ?? undefined;
+      } else if (pausePoint === 'draft_confirm') {
+        record.draftTitle = state.currentDraftTitle;
+        record.draftWordCount = countWords(state.currentDraftMarkdown);
+        record.reviewResult = state.reviewResult ?? undefined;
+      } else if (pausePoint === 'review_confirm') {
+        record.reviewResult = state.reviewResult ?? undefined;
+      }
+
+      // 提交编辑意见修改时，记录本次选中/跳过的意见用于后续生成摘要
+      let pendingRevisionContext: AIWritingState['pendingRevisionContext'] = null;
+      const isApplyingReview =
+        payload.selectedIssueIndices !== undefined &&
+        state.reviewResult != null;
+      if (isApplyingReview && state.reviewResult) {
+        const allIssues = state.reviewResult.revisionNotes;
+        const selectedSet = new Set(payload.selectedIssueIndices!);
+        const submittedIssues = allIssues.filter((_, i) => selectedSet.has(i));
+        const skippedIssues = allIssues.filter((_, i) => !selectedSet.has(i));
+        pendingRevisionContext = {
+          submittedIssues,
+          skippedIssues,
+          oldWordCount: countWords(state.currentDraftMarkdown),
+        };
+      }
+
+      // Optimistic next-status so the correct skeleton shows immediately after
+      // the user clicks confirm, without waiting for the first SSE chunk.
+      let nextStatus: WritingStatus = state.status;
+      if (pausePoint === 'material_confirm') {
+        nextStatus = payload.action === 're_search' ? 'researching' : 'writing_outline';
+      } else if (pausePoint === 'outline_confirm') {
+        nextStatus = payload.action === 're_outline' ? 'writing_outline' : 'writing_draft';
+      } else if (pausePoint === 'draft_confirm') {
+        if (payload.action === 'finalize')       nextStatus = 'done';
+        else if (payload.action === 'to_editor') nextStatus = 'reviewing';
+        else                                     nextStatus = 'revising'; // user_revise
+      } else if (pausePoint === 'review_confirm') {
+        nextStatus = payload.action === 'force_finalize' ? 'done' : 'revising'; // accept_review
+      }
+
+      try {
+        await resumeWritingApi(state.sessionId, payload);
+        setState((prev) => ({
+          ...prev,
+          currentPause: null,
+          status: nextStatus,
+          // Clear stale streaming state so new-cycle detection in chunk handlers works correctly
+          ...(nextStatus === 'researching' ? { researchProgress: '' } : {}),
+          ...(nextStatus === 'writing_outline' ? { outlineStreamingText: '', outlineThinkingText: '' } : {}),
+          ...(nextStatus === 'writing_draft'   ? { streamingDraftSections: [], streamingDraftTitle: '' } : {}),
+          ...(nextStatus === 'reviewing'        ? { streamingReviewItems: [] } : {}),
+          ...(nextStatus === 'revising'         ? { streamingDraftSections: [], streamingDraftTitle: '' } : {}),
+          completedInterventions: [...prev.completedInterventions, record],
+          ...(pendingRevisionContext ? { pendingRevisionContext } : {}),
+        }));
+      } catch (err) {
+        setState((prev) => ({ ...prev, error: String(err) }));
+      }
+    },
+    [state.sessionId, state.currentPause, state.isPaused, state.materials, state.outline,
+     state.currentDraftTitle, state.currentDraftMarkdown, state.reviewResult, handleEvent],
+  );
+
+  const pauseWriting = useCallback(() => {
+    abortRef.current?.abort();
+    unsubRef.current?.();
+    setState((prev) => ({ ...prev, isPaused: true }));
+  }, []);
+
+  const resumeWriting = useCallback(() => {
+    if (!state.sessionId) return;
+    abortRef.current?.abort();
+    abortRef.current = new AbortController();
+    unsubRef.current = subscribeToProgress(
+      state.sessionId,
+      handleEvent,
+      abortRef.current.signal,
+    );
+    setState((prev) => ({ ...prev, isPaused: false }));
+  }, [state.sessionId, handleEvent]);
+
+  const reset = useCallback(() => {
+    abortRef.current?.abort();
+    unsubRef.current?.();
+    setArtifact(null);
+    setState(INITIAL_STATE);
+  }, [setArtifact]);
+
+  useEffect(() => () => { abortRef.current?.abort(); }, []);
+
+  // 在暂停点 / 完成 / 出错时，把完整对话时间线持久化到后端，供历史回显出与实时一致的内容
+  useEffect(() => {
+    const s = state.status;
+    const savable = s === 'done' || s === 'error' || s.startsWith('awaiting_');
+    if (!state.sessionId || !savable || state.progressEvents.length === 0) return;
+    saveAIWritingTranscript(state.sessionId, {
+      progressEvents: state.progressEvents,
+      completedInterventions: state.completedInterventions,
+    }).catch(() => {});
+    // 仅在状态进入可保存阶段时触发；events/interventions 取闭包最新值，无需进 deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.status, state.sessionId]);
+
+  return { state, startWriting, submitIntervention, pauseWriting, resumeWriting, reset };
+}
diff --git a/frontend-web/src/open-canvas/hooks/useAIWritingSessions.ts b/frontend-web/src/open-canvas/hooks/useAIWritingSessions.ts
new file mode 100644
index 00000000..ffa7ae6d
--- /dev/null
+++ b/frontend-web/src/open-canvas/hooks/useAIWritingSessions.ts
@@ -0,0 +1,45 @@
+import { useCallback, useState } from 'react';
+
+import {
+  listAIWritingSessions,
+  renameAIWritingSession,
+  deleteAIWritingSession,
+} from '../api/ai-writing-sessions';
+import type { AIWritingSessionSummary } from '../api/ai-writing-sessions';
+
+export function useAIWritingSessions() {
+  const [sessions, setSessions] = useState<AIWritingSessionSummary[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await listAIWritingSessions();
+      setSessions(data);
+    } catch {
+      // silently ignore — history is non-critical
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const rename = useCallback(async (id: string, title: string) => {
+    try {
+      const updated = await renameAIWritingSession(id, title);
+      setSessions((prev) => prev.map((s) => (s.id === id ? updated : s)));
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const remove = useCallback(async (id: string) => {
+    try {
+      await deleteAIWritingSession(id);
+      setSessions((prev) => prev.filter((s) => s.id !== id));
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  return { sessions, loading, refresh, rename, remove };
+}
diff --git a/frontend-web/src/open-canvas/hooks/useArticleTypes.ts b/frontend-web/src/open-canvas/hooks/useArticleTypes.ts
new file mode 100644
index 00000000..7b105fdc
--- /dev/null
+++ b/frontend-web/src/open-canvas/hooks/useArticleTypes.ts
@@ -0,0 +1,49 @@
+import { useCallback, useState } from 'react';
+
+import {
+  listArticleTypes,
+  createArticleType,
+  updateArticleType,
+  deleteArticleType,
+} from '../api/ai-writing-article-types';
+import type { ArticleType, CreateArticleTypeRequest, UpdateArticleTypeRequest } from '../api/ai-writing-article-types';
+
+export function useArticleTypes() {
+  const [articleTypes, setArticleTypes] = useState<ArticleType[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await listArticleTypes();
+      setArticleTypes(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const create = useCallback(async (data: CreateArticleTypeRequest): Promise<ArticleType> => {
+    const created = await createArticleType(data);
+    setArticleTypes((prev) => [...prev, created].sort((a, b) => a.sort_order - b.sort_order));
+    return created;
+  }, []);
+
+  const update = useCallback(async (id: string, data: UpdateArticleTypeRequest): Promise<ArticleType> => {
+    const updated = await updateArticleType(id, data);
+    setArticleTypes((prev) =>
+      prev.map((t) => (t.id === id ? updated : t)).sort((a, b) => a.sort_order - b.sort_order),
+    );
+    return updated;
+  }, []);
+
+  const remove = useCallback(async (id: string): Promise<void> => {
+    await deleteArticleType(id);
+    setArticleTypes((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return { articleTypes, loading, error, refresh, create, update, remove };
+}
diff --git a/frontend-web/src/open-canvas/hooks/useCanvasQuickActions.ts b/frontend-web/src/open-canvas/hooks/useCanvasQuickActions.ts
index 3457f016..11d3beef 100644
--- a/frontend-web/src/open-canvas/hooks/useCanvasQuickActions.ts
+++ b/frontend-web/src/open-canvas/hooks/useCanvasQuickActions.ts
@@ -1,13 +1,13 @@
 import { useCallback } from "react";
 
 import { useCanvasGraphContext } from "../contexts/CanvasGraphContext";
+import { useCanvasStreamContext } from "../contexts/CanvasStreamContext";
 import type { QuickActionId } from "../types/quick-action";
 import { getCurrentArtifactContent } from "../utils/artifact";
 import { buildQuickActionMessage } from "../utils/quick-actions";
-import { useCanvasStream } from "./useCanvasStream";
 
 export function useCanvasQuickActions() {
-  const { sendMessage } = useCanvasStream();
+  const { sendMessage } = useCanvasStreamContext();
   const { artifact } = useCanvasGraphContext();
 
   const triggerQuickAction = useCallback(
@@ -15,7 +15,7 @@ export function useCanvasQuickActions() {
       const content = getCurrentArtifactContent(artifact);
       if (!content) return;
 
-      const message = buildQuickActionMessage(actionId);
+      const message = buildQuickActionMessage(actionId, content);
       await sendMessage(message, { quick_action_id: actionId });
     },
     [sendMessage, artifact],
diff --git a/frontend-web/src/open-canvas/hooks/useCanvasThreadStream.ts b/frontend-web/src/open-canvas/hooks/useCanvasThreadStream.ts
new file mode 100644
index 00000000..52576708
--- /dev/null
+++ b/frontend-web/src/open-canvas/hooks/useCanvasThreadStream.ts
@@ -0,0 +1,254 @@
+// Canvas-specific variant of useThreadStream (core/threads/hooks.ts).
+// Copied and adapted for canvas_agent so canvas writing-mode interactions
+// can be customized independently from the main lead_agent flow.
+
+import type { AIMessage, Message } from "@langchain/langgraph-sdk";
+import { useStream } from "@langchain/langgraph-sdk/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+
+import { getCanvasAPIClient } from "@/core/api/canvas-client";
+import { useUpdateSubtask } from "@/core/tasks/context";
+
+import { CANVAS_AGENT_ID, CANVAS_THREAD_METADATA } from "../constants";
+import { useCanvasGraphContext } from "../contexts/CanvasGraphContext";
+import { useCanvasThreadContext } from "../contexts/CanvasThreadContext";
+import type { StreamingArtifactPartial } from "../api/runs";
+import type { CanvasArtifact } from "../types/artifact";
+import type { CanvasThreadValues } from "../types/thread";
+import { getCurrentArtifactContent } from "../utils/artifact";
+
+function getStreamErrorMessage(error: unknown): string {
+  if (typeof error === "string" && error.trim()) return error;
+  if (error instanceof Error && error.message.trim()) return error.message;
+  if (typeof error === "object" && error !== null) {
+    const message = Reflect.get(error, "message");
+    if (typeof message === "string" && message.trim()) return message;
+  }
+  return "Request failed.";
+}
+
+/**
+ * Canvas-specific stream hook — a direct copy of the main agent's useThreadStream,
+ * configured for canvas_agent. Modify sendMessage here to inject canvas-specific
+ * context (writing_artifact_path, canvas_mode, highlighted text, etc.).
+ */
+export function useCanvasThreadStream() {
+  const navigate = useNavigate();
+  const { threadId, setThreadId, modelName } = useCanvasThreadContext();
+  const { artifact, setArtifact, setIsStreaming, setStreamingArtifact } = useCanvasGraphContext();
+  const updateSubtask = useUpdateSubtask();
+
+  const [optimisticMessages, setOptimisticMessages] = useState<Message[]>([]);
+  const sendInFlightRef = useRef(false);
+  const prevMsgCountRef = useRef(0);
+
+  const [onStreamThreadId, setOnStreamThreadId] = useState<string | null>(
+    () => threadId,
+  );
+  const threadIdRef = useRef<string | null>(threadId ?? null);
+
+  useEffect(() => {
+    const normalized = threadId ?? null;
+    setOnStreamThreadId(normalized);
+    threadIdRef.current = normalized;
+    if (!normalized) {
+      sendInFlightRef.current = false;
+      prevMsgCountRef.current = 0;
+      setOptimisticMessages([]);
+    }
+  }, [threadId]);
+
+  const thread = useStream<CanvasThreadValues>({
+    client: getCanvasAPIClient(),
+    assistantId: CANVAS_AGENT_ID,
+    threadId: onStreamThreadId,
+    fetchStateHistory: { limit: 1 },
+    onCreated(meta) {
+      setOnStreamThreadId(meta.thread_id);
+      threadIdRef.current = meta.thread_id;
+      setThreadId(meta.thread_id);
+      navigate(`/page/canvas/${meta.thread_id}`, { replace: true });
+      void getCanvasAPIClient()
+        .threads.update(meta.thread_id, { metadata: CANVAS_THREAD_METADATA })
+        .catch(() => {});
+    },
+    onUpdateEvent(data) {
+      const updates: Array<Partial<CanvasThreadValues> | null> = Object.values(
+        data || {},
+      );
+      for (const update of updates) {
+        if (update?.artifact) {
+          setArtifact(update.artifact as CanvasArtifact);
+        }
+      }
+    },
+    onCustomEvent(event: unknown) {
+      if (
+        typeof event === "object" &&
+        event !== null &&
+        "type" in event &&
+        (event as { type: unknown }).type === "task_running"
+      ) {
+        const e = event as {
+          type: "task_running";
+          task_id: string;
+          message: AIMessage;
+        };
+        updateSubtask({ id: e.task_id, latestMessage: e.message });
+        return;
+      }
+      if (
+        typeof event === "object" &&
+        event !== null &&
+        "type" in event &&
+        (event as { type: unknown }).type === "llm_retry" &&
+        "message" in event &&
+        typeof (event as { message: unknown }).message === "string"
+      ) {
+        toast((event as { message: string }).message);
+      }
+    },
+    onError(error) {
+      setOptimisticMessages([]);
+      toast.error(getStreamErrorMessage(error));
+    },
+  });
+
+  // Keep CanvasGraphContext.isStreaming in sync so the artifact panel and
+  // quick-action bar can react to streaming state.
+  useEffect(() => {
+    setIsStreaming(thread.isLoading);
+  }, [thread.isLoading, setIsStreaming]);
+
+  // Detect update_artifact tool calls from streaming messages to populate
+  // streamingArtifact so the right panel shows content before the final
+  // state update fires via onUpdateEvent.
+  useEffect(() => {
+    if (!thread.isLoading) {
+      setStreamingArtifact(null);
+      return;
+    }
+    const msgs = thread.messages;
+    for (let i = msgs.length - 1; i >= 0; i--) {
+      const msg = msgs[i];
+      if (msg.type !== "ai") continue;
+      const toolCalls = (msg as AIMessage).tool_calls;
+      if (!toolCalls?.length) continue;
+      const call = toolCalls.find((tc) => tc.name === "update_artifact");
+      if (!call?.args) continue;
+      const args = call.args as Record<string, unknown>;
+      const partial: StreamingArtifactPartial = {
+        type: args.type as "text" | "code" | undefined,
+        title: typeof args.title === "string" ? args.title : undefined,
+        content: typeof args.content === "string" ? args.content : undefined,
+        language: typeof args.language === "string" ? args.language : undefined,
+      };
+      if (partial.title !== undefined || partial.content !== undefined) {
+        setStreamingArtifact(partial);
+        return;
+      }
+    }
+  }, [thread.messages, thread.isLoading, setStreamingArtifact]);
+
+  // Clear optimistic messages once the server stream begins delivering real ones.
+  useEffect(() => {
+    if (
+      optimisticMessages.length > 0 &&
+      thread.messages.length > prevMsgCountRef.current
+    ) {
+      setOptimisticMessages([]);
+    }
+  }, [thread.messages.length, optimisticMessages.length]);
+
+  /**
+   * Canvas writing-mode sendMessage — copied from ChatPage's handleSubmit flow.
+   * Modify here to inject writing_artifact_path, canvas_mode, highlighted
+   * text/code, or any other canvas-specific context the agent needs.
+   */
+  const sendMessage = useCallback(
+    async (text: string, extraContext?: Record<string, unknown>) => {
+      const trimmed = text.trim();
+      if (!trimmed || sendInFlightRef.current) return;
+      sendInFlightRef.current = true;
+
+      prevMsgCountRef.current = thread.messages.length;
+      setOptimisticMessages([
+        {
+          type: "human",
+          id: `opt-human-${Date.now()}`,
+          content: [{ type: "text", text: trimmed }],
+          additional_kwargs: {},
+        },
+      ]);
+
+      // Inject current artifact content into the human message so the LLM can see
+      // what to edit. create_agent only passes state.messages to the LLM — state.artifact
+      // is NOT automatically visible. Skip injection when the caller already embedded
+      // the artifact (e.g. quick actions build the full message themselves).
+      const currentContent = artifact ? getCurrentArtifactContent(artifact) : null;
+      const artifactContext = currentContent
+        ? {
+            canvas_artifact_title: currentContent.title,
+            canvas_artifact_type: currentContent.type,
+          }
+        : {};
+
+      const messageText =
+        currentContent && !trimmed.includes("<artifact")
+          ? (() => {
+              const body =
+                currentContent.type === "code"
+                  ? currentContent.code
+                  : currentContent.fullMarkdown;
+              const tag =
+                currentContent.type === "code"
+                  ? `language="${currentContent.language}"`
+                  : "";
+              return `${trimmed}\n\n<artifact ${tag}>\n${body}\n</artifact>`;
+            })()
+          : trimmed;
+
+      try {
+        await thread.submit(
+          {
+            messages: [
+              { type: "human", content: [{ type: "text", text: messageText }] },
+            ],
+          },
+          {
+            threadId: threadIdRef.current ?? undefined,
+            streamSubgraphs: true,
+            streamResumable: true,
+            config: {
+              recursion_limit: 1000,
+              ...(modelName ? { configurable: { model_name: modelName } } : {}),
+            },
+            context: {
+              ...extraContext,
+              ...artifactContext,
+              thread_id: threadIdRef.current ?? "",
+              writing_mode: true,
+            },
+          },
+        );
+      } catch {
+        setOptimisticMessages([]);
+      } finally {
+        sendInFlightRef.current = false;
+      }
+    },
+    [thread, modelName, artifact],
+  );
+
+  const mergedThread =
+    optimisticMessages.length > 0
+      ? ({
+          ...thread,
+          messages: [...thread.messages, ...optimisticMessages],
+        } as typeof thread)
+      : thread;
+
+  return { thread: mergedThread, sendMessage, threadId };
+}
diff --git a/frontend-web/src/open-canvas/hooks/useWritingEditor.ts b/frontend-web/src/open-canvas/hooks/useWritingEditor.ts
new file mode 100644
index 00000000..f15f666c
--- /dev/null
+++ b/frontend-web/src/open-canvas/hooks/useWritingEditor.ts
@@ -0,0 +1,53 @@
+import { useEffect, useRef } from "react";
+import { useEditor } from "@tiptap/react";
+import { buildExtensions } from "../editor/TiptapExtensions";
+
+interface UseWritingEditorOptions {
+  markdown: string;
+  onChange?: (markdown: string) => void;
+  editable?: boolean;
+  placeholder?: string;
+}
+
+export function useWritingEditor({
+  markdown,
+  onChange,
+  editable = true,
+  placeholder,
+}: UseWritingEditorOptions) {
+  const prevMarkdownRef = useRef<string>(markdown);
+
+  const editor = useEditor({
+    extensions: buildExtensions(placeholder),
+    editable,
+    content: markdown,
+    onUpdate({ editor }) {
+      if (!onChange) return;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const md = (editor as any).storage?.markdown?.getMarkdown?.() ?? editor.getText();
+      onChange(md);
+    },
+  });
+
+  // Sync external markdown changes (e.g. after streaming completes)
+  useEffect(() => {
+    if (!editor) return;
+    if (markdown === prevMarkdownRef.current) return;
+    prevMarkdownRef.current = markdown;
+
+    const { from, to } = editor.state.selection;
+    editor.commands.setContent(markdown, { emitUpdate: false });
+    const docSize = editor.state.doc.content.size;
+    if (from <= docSize && to <= docSize) {
+      editor.commands.setTextSelection({ from, to });
+    }
+  }, [editor, markdown]);
+
+  // Sync editable flag
+  useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(editable);
+  }, [editor, editable]);
+
+  return editor;
+}
diff --git a/frontend-web/src/open-canvas/hooks/useWritingRewrite.ts b/frontend-web/src/open-canvas/hooks/useWritingRewrite.ts
new file mode 100644
index 00000000..de8a303d
--- /dev/null
+++ b/frontend-web/src/open-canvas/hooks/useWritingRewrite.ts
@@ -0,0 +1,206 @@
+import { useCallback, useRef, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import {
+  streamRewrite,
+  type RewriteAction,
+  type RewriteRequest,
+  type RewriteTone,
+} from "../api/rewrite";
+import { useCanvasUIContext } from "../contexts/CanvasUIContext";
+import { useCanvasThreadContext } from "../contexts/CanvasThreadContext";
+
+export type RewriteStatus = "idle" | "loading" | "success" | "error";
+
+// ── <think>…</think> tag stripper ────────────────────────────────────────────
+// Handles tags split across multiple streaming chunks.
+class ThinkTagParser {
+  private buf = "";
+  private inside = false;
+
+  push(chunk: string): { thinking: string; text: string } {
+    this.buf += chunk;
+    let thinking = "";
+    let text = "";
+
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      if (!this.inside) {
+        const idx = this.buf.indexOf("<think>");
+        if (idx !== -1) {
+          text += this.buf.slice(0, idx);
+          this.buf = this.buf.slice(idx + 7);
+          this.inside = true;
+        } else {
+          // hold last 6 chars to guard against a partial opening tag
+          const safe = Math.max(0, this.buf.length - 6);
+          text += this.buf.slice(0, safe);
+          this.buf = this.buf.slice(safe);
+          break;
+        }
+      } else {
+        const idx = this.buf.indexOf("</think>");
+        if (idx !== -1) {
+          thinking += this.buf.slice(0, idx);
+          this.buf = this.buf.slice(idx + 8);
+          this.inside = false;
+        } else {
+          // hold last 7 chars to guard against a partial closing tag
+          const safe = Math.max(0, this.buf.length - 7);
+          thinking += this.buf.slice(0, safe);
+          this.buf = this.buf.slice(safe);
+          break;
+        }
+      }
+    }
+
+    return { thinking, text };
+  }
+
+  flush(): { thinking: string; text: string } {
+    const out = {
+      thinking: this.inside ? this.buf : "",
+      text: this.inside ? "" : this.buf,
+    };
+    this.buf = "";
+    return out;
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function useWritingRewrite(editor: Editor | null) {
+  const { writingSelection } = useCanvasUIContext();
+  const { threadId, modelName } = useCanvasThreadContext();
+
+  const [status, setStatus] = useState<RewriteStatus>("idle");
+  const [result, setResult] = useState<string | null>(null);
+  const [thinking, setThinking] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const abortRef = useRef<AbortController | null>(null);
+
+  // Shared streaming runner — state setters from useState are stable references
+  const runStream = useCallback(
+    async (req: RewriteRequest, abort: AbortController) => {
+      const parser = new ThinkTagParser();
+      const applyParsed = (parsed: { thinking: string; text: string }) => {
+        if (parsed.thinking) setThinking((p) => (p ?? "") + parsed.thinking);
+        if (parsed.text) setResult((p) => (p ?? "") + parsed.text);
+      };
+      try {
+        let terminated = false;
+        for await (const event of streamRewrite(req, abort.signal)) {
+          if (abort.signal.aborted) break;
+          if (event.type === "thinking") {
+            setThinking((p) => (p ?? "") + event.chunk);
+          } else if (event.type === "text") {
+            applyParsed(parser.push(event.chunk));
+          } else if (event.type === "done") {
+            applyParsed(parser.flush());
+            setStatus("success");
+            terminated = true;
+            break;
+          } else if (event.type === "error") {
+            setError(event.message ?? "改写失败，请重试");
+            setStatus("error");
+            terminated = true;
+            break;
+          }
+        }
+        if (!terminated && !abort.signal.aborted) {
+          applyParsed(parser.flush());
+          setStatus("success");
+        }
+      } catch (e) {
+        if (abort.signal.aborted) return;
+        setError(e instanceof Error ? e.message : "改写失败，请重试");
+        setStatus("error");
+      }
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const rewrite = useCallback(
+    async (action: RewriteAction, tone?: RewriteTone, customInstruction?: string) => {
+      if (!writingSelection || !editor) return;
+
+      abortRef.current?.abort();
+      const abort = new AbortController();
+      abortRef.current = abort;
+
+      const { from, to, text } = writingSelection;
+      const docText = editor.state.doc.textContent;
+      const docSize = editor.state.doc.content.size;
+
+      const req: RewriteRequest = {
+        threadId,
+        selection: { from, to, text },
+        action,
+        tone,
+        modelName: modelName ?? undefined,
+        surroundingContext: {
+          before: docText.substring(Math.max(0, from - 400), from),
+          after: docText.substring(to, Math.min(docSize, to + 400)),
+        },
+        customInstruction: customInstruction || undefined,
+      };
+
+      setStatus("loading");
+      setResult(null);
+      setThinking(null);
+      setError(null);
+      await runStream(req, abort);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [writingSelection, modelName, editor, runStream],
+  );
+
+  const rewriteFollowUp = useCallback(
+    async (instruction: string, action: RewriteAction, tone?: RewriteTone) => {
+      if (!writingSelection || !editor) return;
+      const prevResult = result;
+      if (!prevResult) return;
+
+      abortRef.current?.abort();
+      const abort = new AbortController();
+      abortRef.current = abort;
+
+      const { from, to, text } = writingSelection;
+      const docText = editor.state.doc.textContent;
+      const docSize = editor.state.doc.content.size;
+
+      const req: RewriteRequest = {
+        threadId,
+        selection: { from, to, text },
+        action,
+        tone,
+        modelName: modelName ?? undefined,
+        surroundingContext: {
+          before: docText.substring(Math.max(0, from - 400), from),
+          after: docText.substring(to, Math.min(docSize, to + 400)),
+        },
+        followUpInstruction: instruction,
+        previousResult: prevResult,
+      };
+
+      setStatus("loading");
+      setResult(null);
+      setThinking(null);
+      setError(null);
+      await runStream(req, abort);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [writingSelection, modelName, editor, result, runStream],
+  );
+
+  const reset = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setStatus("idle");
+    setResult(null);
+    setThinking(null);
+    setError(null);
+  }, []);
+
+  return { status, result, thinking, error, rewrite, rewriteFollowUp, reset };
+}
diff --git a/frontend-web/src/open-canvas/pages/AIWritingPage.tsx b/frontend-web/src/open-canvas/pages/AIWritingPage.tsx
new file mode 100644
index 00000000..d2ebe25c
--- /dev/null
+++ b/frontend-web/src/open-canvas/pages/AIWritingPage.tsx
@@ -0,0 +1,74 @@
+import { useRef } from 'react';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import type { GroupImperativeHandle } from 'react-resizable-panels';
+
+import { CanvasThreadProvider } from '../contexts/CanvasThreadContext';
+import { CanvasGraphProvider } from '../contexts/CanvasGraphContext';
+import { CanvasUIProvider } from '../contexts/CanvasUIContext';
+import { AIWritingPageHeader } from '../components/ai-writing/AIWritingPageHeader';
+import { AIWritingPanel } from '../components/ai-writing/AIWritingPanel';
+import { AIWritingDraftPanel } from '../components/ai-writing/AIWritingDraftPanel';
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable';
+
+// Panel IDs used as keys in the v4 Layout map
+const WRITING_ID = 'aw-writing';
+const DRAFT_ID   = 'aw-draft';
+
+// Match the original canvas page proportions (chat=35, artifact=65)
+const DEFAULT_LAYOUT = { [WRITING_ID]: 35, [DRAFT_ID]: 65 };
+
+export default function AIWritingPage() {
+  const layoutRef = useRef<GroupImperativeHandle>(null);
+
+  return (
+    <CanvasThreadProvider>
+    <CanvasGraphProvider>
+      <CanvasUIProvider>
+      <TooltipProvider delayDuration={300}>
+        <div className="h-full flex flex-col overflow-hidden bg-background">
+          <AIWritingPageHeader />
+
+          <div className="flex-1 min-h-0 overflow-hidden">
+            <ResizablePanelGroup
+              orientation="horizontal"
+              groupRef={layoutRef}
+              defaultLayout={DEFAULT_LAYOUT}
+              className="h-full"
+            >
+              {/* 左侧：AI 写作面板，与原画布页左侧等宽 */}
+              <ResizablePanel
+                id={WRITING_ID}
+                defaultSize={35}
+                minSize={20}
+                className="overflow-hidden flex flex-col"
+              >
+                {/* 与原布局保持相同的 flex-1 min-h-0 包裹，确保内部 h-full 正确解析 */}
+                <div className="flex-1 min-h-0 overflow-hidden">
+                  <AIWritingPanel />
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle />
+
+              {/* 右侧：草稿预览面板 */}
+              <ResizablePanel
+                id={DRAFT_ID}
+                defaultSize={65}
+                minSize={40}
+                className="overflow-hidden"
+              >
+                <AIWritingDraftPanel />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+        </div>
+      </TooltipProvider>
+      </CanvasUIProvider>
+    </CanvasGraphProvider>
+    </CanvasThreadProvider>
+  );
+}
diff --git a/frontend-web/src/open-canvas/pages/ArticleTypesConfigPage.tsx b/frontend-web/src/open-canvas/pages/ArticleTypesConfigPage.tsx
new file mode 100644
index 00000000..3b55508f
--- /dev/null
+++ b/frontend-web/src/open-canvas/pages/ArticleTypesConfigPage.tsx
@@ -0,0 +1,431 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, FileText, Pencil, Plus, Settings2, Trash2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+import { useArticleTypes } from '../hooks/useArticleTypes';
+import type { ArticleType, CreateArticleTypeRequest, UpdateArticleTypeRequest } from '../api/ai-writing-article-types';
+
+// ── 样式常量 ──────────────────────────────────────────────────────────────────
+
+const INPUT_CLASS =
+  'flex h-8 w-full rounded-md border border-input bg-background px-3 py-1 text-xs shadow-sm ' +
+  'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 ' +
+  'focus-visible:ring-ring disabled:opacity-50 disabled:bg-muted';
+
+const TEXTAREA_CLASS =
+  'flex w-full rounded-md border border-input bg-background px-3 py-2 text-xs shadow-sm ' +
+  'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 ' +
+  'focus-visible:ring-ring resize-none';
+
+// ── 表单状态类型 ───────────────────────────────────────────────────────────────
+
+interface FormState {
+  key: string;
+  label: string;
+  description: string;
+  prompt_hint: string;
+  default_word_count: string;
+  sort_order: string;
+}
+
+const EMPTY_FORM: FormState = {
+  key: '',
+  label: '',
+  description: '',
+  prompt_hint: '',
+  default_word_count: '800',
+  sort_order: '0',
+};
+
+// ── 主页面 ────────────────────────────────────────────────────────────────────
+
+export default function ArticleTypesConfigPage() {
+  const navigate = useNavigate();
+  const { articleTypes, loading, error, refresh, create, update, remove } = useArticleTypes();
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [form, setForm] = useState<FormState>(EMPTY_FORM);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  // ── 对话框操作 ──────────────────────────────────────────────────────────────
+
+  function openCreate() {
+    setEditingId(null);
+    setForm(EMPTY_FORM);
+    setFormError(null);
+    setDialogOpen(true);
+  }
+
+  function openEdit(t: ArticleType) {
+    setEditingId(t.id);
+    setForm({
+      key: t.key,
+      label: t.label,
+      description: t.description ?? '',
+      prompt_hint: t.prompt_hint ?? '',
+      default_word_count: String(t.default_word_count),
+      sort_order: String(t.sort_order),
+    });
+    setFormError(null);
+    setDialogOpen(true);
+  }
+
+  function setField<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((f) => ({ ...f, [key]: value }));
+  }
+
+  async function handleSave() {
+    const trimmedKey = form.key.trim();
+    const trimmedLabel = form.label.trim();
+    const wordCount = parseInt(form.default_word_count, 10);
+
+    if (!trimmedKey) { setFormError('标识不能为空'); return; }
+    if (!trimmedLabel) { setFormError('名称不能为空'); return; }
+    if (isNaN(wordCount) || wordCount < 100) { setFormError('默认字数不能小于 100'); return; }
+
+    setSaving(true);
+    setFormError(null);
+    try {
+      if (editingId) {
+        const req: UpdateArticleTypeRequest = {
+          label: trimmedLabel,
+          description: form.description.trim() || null,
+          prompt_hint: form.prompt_hint.trim() || null,
+          default_word_count: wordCount,
+          sort_order: parseInt(form.sort_order, 10) || 0,
+        };
+        await update(editingId, req);
+      } else {
+        const req: CreateArticleTypeRequest = {
+          key: trimmedKey,
+          label: trimmedLabel,
+          description: form.description.trim() || undefined,
+          prompt_hint: form.prompt_hint.trim() || undefined,
+          default_word_count: wordCount,
+          sort_order: parseInt(form.sort_order, 10) || 0,
+        };
+        await create(req);
+      }
+      setDialogOpen(false);
+    } catch (e) {
+      setFormError(e instanceof Error ? e.message : '保存失败');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  // ── 删除操作 ────────────────────────────────────────────────────────────────
+
+  async function handleDelete() {
+    if (!deleteTargetId) return;
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      await remove(deleteTargetId);
+      setDeleteTargetId(null);
+    } catch (e) {
+      setDeleteError(e instanceof Error ? e.message : '删除失败');
+    } finally {
+      setDeleting(false);
+    }
+  }
+
+  // ── 渲染 ────────────────────────────────────────────────────────────────────
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden bg-background">
+      {/* 页面头部 */}
+      <div className="h-11 border-b flex items-center px-3 gap-2 shrink-0 bg-background">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 shrink-0"
+          onClick={() => navigate(-1)}
+          title="返回"
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+        <Separator orientation="vertical" className="h-4" />
+        <Settings2 className="h-4 w-4 text-primary shrink-0" />
+        <span className="text-sm font-semibold flex-1">文章类型配置</span>
+        <Button size="sm" className="h-7 px-3 text-xs gap-1.5" onClick={openCreate}>
+          <Plus className="size-3.5" />
+          新增类型
+        </Button>
+      </div>
+
+      {/* 内容区 */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {loading && (
+          <p className="text-sm text-muted-foreground text-center py-12">加载中…</p>
+        )}
+        {!loading && error && (
+          <p className="text-sm text-destructive text-center py-12">{error}</p>
+        )}
+        {!loading && !error && articleTypes.length === 0 && (
+          <div className="text-center py-12 space-y-2">
+            <Settings2 className="h-8 w-8 mx-auto text-muted-foreground/40" />
+            <p className="text-sm text-muted-foreground">暂无文章类型</p>
+            <p className="text-xs text-muted-foreground">点击右上角"新增类型"创建第一个文章类型</p>
+          </div>
+        )}
+        {!loading && articleTypes.length > 0 && (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            {articleTypes.map((t) => (
+              <ArticleTypeCard
+                key={t.id}
+                type={t}
+                onEdit={() => openEdit(t)}
+                onDelete={() => { setDeleteError(null); setDeleteTargetId(t.id); }}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 新增 / 编辑对话框 */}
+      <Dialog open={dialogOpen} onOpenChange={(open) => { if (!saving) setDialogOpen(open); }}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{editingId ? '编辑文章类型' : '新增文章类型'}</DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-3 py-1">
+            <FormField label="标识 (key)" required>
+              <input
+                className={INPUT_CLASS}
+                placeholder="如 news、analysis（传给 AI 的唯一标识，仅限字母数字下划线）"
+                value={form.key}
+                onChange={(e) => setField('key', e.target.value)}
+                disabled={!!editingId}
+              />
+              {editingId && (
+                <p className="text-[11px] text-muted-foreground mt-0.5">标识创建后不可修改</p>
+              )}
+            </FormField>
+
+            <FormField label="名称" required>
+              <input
+                className={INPUT_CLASS}
+                placeholder="如 新闻资讯、深度特稿"
+                value={form.label}
+                onChange={(e) => setField('label', e.target.value)}
+              />
+            </FormField>
+
+            <FormField label="说明">
+              <input
+                className={INPUT_CLASS}
+                placeholder="简短描述，帮助用户了解该类型的适用场景"
+                value={form.description}
+                onChange={(e) => setField('description', e.target.value)}
+              />
+            </FormField>
+
+            <FormField label="写作风格提示词">
+              <textarea
+                className={TEXTAREA_CLASS}
+                rows={3}
+                placeholder="传入 AI 的写作风格说明，如：以新闻报道风格写作，注重 5W1H 要素，语言简洁客观…"
+                value={form.prompt_hint}
+                onChange={(e) => setField('prompt_hint', e.target.value)}
+              />
+            </FormField>
+
+            <div className="grid grid-cols-2 gap-3">
+              <FormField label="默认字数（字）" required>
+                <input
+                  type="number"
+                  min={100}
+                  step={100}
+                  className={INPUT_CLASS}
+                  value={form.default_word_count}
+                  onChange={(e) => setField('default_word_count', e.target.value)}
+                />
+              </FormField>
+              <FormField label="排序权重">
+                <input
+                  type="number"
+                  min={0}
+                  className={INPUT_CLASS}
+                  placeholder="0"
+                  value={form.sort_order}
+                  onChange={(e) => setField('sort_order', e.target.value)}
+                />
+              </FormField>
+            </div>
+
+            {formError && (
+              <p className="text-xs text-destructive">{formError}</p>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setDialogOpen(false)}
+              disabled={saving}
+            >
+              取消
+            </Button>
+            <Button size="sm" onClick={handleSave} disabled={saving}>
+              {saving ? '保存中…' : '保存'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 删除确认对话框 */}
+      <Dialog
+        open={deleteTargetId !== null}
+        onOpenChange={(open) => { if (!deleting && !open) setDeleteTargetId(null); }}
+      >
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>确认删除</DialogTitle>
+          </DialogHeader>
+          <div className="py-2 space-y-2">
+            <p className="text-sm text-muted-foreground">
+              删除后不可恢复。已使用该类型创建的历史写作不受影响，但新写作将无法选择此类型。
+            </p>
+            {deleteError && (
+              <p className="text-xs text-destructive">{deleteError}</p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setDeleteTargetId(null)}
+              disabled={deleting}
+            >
+              取消
+            </Button>
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
+              {deleting ? '删除中…' : '确认删除'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+// ── 文章类型卡片 ──────────────────────────────────────────────────────────────
+
+function ArticleTypeCard({
+  type,
+  onEdit,
+  onDelete,
+}: {
+  type: ArticleType;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  return (
+    <div className="rounded-lg border bg-card p-4 flex flex-col gap-2.5 hover:border-primary/30 transition-colors">
+      {/* 标题行 */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-sm font-semibold">{type.label}</span>
+            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-mono bg-muted text-muted-foreground border">
+              {type.key}
+            </span>
+          </div>
+          {type.description && (
+            <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{type.description}</p>
+          )}
+        </div>
+        <div className="flex items-center gap-0.5 shrink-0">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={onEdit}
+            title="编辑"
+          >
+            <Pencil className="h-3 w-3" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 text-destructive/70 hover:text-destructive"
+            onClick={onDelete}
+            title="删除"
+          >
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 写作提示词预览 */}
+      {type.prompt_hint && (
+        <div className="rounded-md bg-muted/50 px-2.5 py-2">
+          <p className="text-[11px] text-muted-foreground leading-relaxed line-clamp-2">
+            {type.prompt_hint}
+          </p>
+        </div>
+      )}
+
+      {/* 底部元信息 */}
+      <div className="flex items-center gap-3 pt-0.5 border-t">
+        <span className="text-[11px] text-muted-foreground flex items-center gap-1 pt-2">
+          <FileText className="h-3 w-3" />
+          默认 {type.default_word_count} 字
+        </span>
+        <span className="text-[11px] text-muted-foreground pt-2">
+          排序 {type.sort_order}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// ── 表单字段包装 ──────────────────────────────────────────────────────────────
+
+function FormField({
+  label,
+  required,
+  children,
+}: {
+  label: string;
+  required?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-1">
+      <label className="text-xs font-medium text-muted-foreground">
+        {label}
+        {required && <span className="text-destructive ml-0.5">*</span>}
+      </label>
+      {children}
+    </div>
+  );
+}
diff --git a/frontend-web/src/open-canvas/pages/CanvasHomePage.tsx b/frontend-web/src/open-canvas/pages/CanvasHomePage.tsx
index 35970cc5..ea95f610 100644
--- a/frontend-web/src/open-canvas/pages/CanvasHomePage.tsx
+++ b/frontend-web/src/open-canvas/pages/CanvasHomePage.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { FileText, Code2, Sparkles, Loader2 } from "lucide-react";
+import { FileText, Code2, Sparkles, Loader2, PenLine } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { createCanvasThread } from "../api/threads";
@@ -86,6 +86,23 @@ export default function CanvasHomePage() {
           ))}
         </div>
 
+        {/* AI 智能写作入口 */}
+        <button
+          onClick={() => navigate('ai-writing')}
+          className="group w-full flex items-center gap-4 rounded-xl border border-orange-200 dark:border-orange-900/50 bg-orange-50/50 dark:bg-orange-950/20 p-5 text-left transition-all hover:border-orange-400/60 hover:shadow-md hover:bg-orange-50 dark:hover:bg-orange-950/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-orange-400"
+        >
+          <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-orange-100 dark:bg-orange-900/40 shrink-0 group-hover:bg-orange-200/80 dark:group-hover:bg-orange-800/40 transition-colors">
+            <PenLine className="w-5 h-5 text-orange-500 dark:text-orange-400" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <p className="font-semibold text-sm text-orange-700 dark:text-orange-300">AI 智能写作</p>
+            <p className="text-xs text-orange-600/70 dark:text-orange-400/60 leading-relaxed mt-0.5">
+              多智能体协作——搜集素材、规划大纲、起草正文、编辑审核，全流程自动完成
+            </p>
+          </div>
+          <span className="text-orange-400/60 shrink-0 text-xs">→</span>
+        </button>
+
         <div className="text-center">
           <Button
             variant="ghost"
diff --git a/frontend-web/src/open-canvas/routes/OpenCanvasRoutes.tsx b/frontend-web/src/open-canvas/routes/OpenCanvasRoutes.tsx
index c0c8e838..6c2b281f 100644
--- a/frontend-web/src/open-canvas/routes/OpenCanvasRoutes.tsx
+++ b/frontend-web/src/open-canvas/routes/OpenCanvasRoutes.tsx
@@ -2,11 +2,15 @@ import { Route, Routes } from "react-router-dom";
 
 import CanvasHomePage from "../pages/CanvasHomePage";
 import CanvasThreadPage from "../pages/CanvasThreadPage";
+import AIWritingPage from "../pages/AIWritingPage";
+import ArticleTypesConfigPage from "../pages/ArticleTypesConfigPage";
 
 export default function OpenCanvasRoutes() {
   return (
     <Routes>
       <Route index element={<CanvasHomePage />} />
+      <Route path="ai-writing" element={<AIWritingPage />} />
+      <Route path="article-types" element={<ArticleTypesConfigPage />} />
       <Route path=":thread_id" element={<CanvasThreadPage />} />
     </Routes>
   );
diff --git a/frontend-web/src/open-canvas/types/ai-writing.ts b/frontend-web/src/open-canvas/types/ai-writing.ts
new file mode 100644
index 00000000..38ed5564
--- /dev/null
+++ b/frontend-web/src/open-canvas/types/ai-writing.ts
@@ -0,0 +1,221 @@
+// ── 素材 ─────────────────────────────────────────────────────────────────────
+
+export interface AIMaterial {
+  id: string;
+  title: string;
+  content: string;
+  source: string;
+  publishedAt: string;
+  relevanceScore: number;
+  sourceType: 'internet' | 'intranet';
+  url?: string;
+  recUuid?: string;
+}
+
+// ── 大纲 ─────────────────────────────────────────────────────────────────────
+
+export interface OutlineSection {
+  sectionTitle: string;
+  keyPoints: string[];
+  materialIds: string[];
+}
+
+export interface AIOutline {
+  title: string;
+  sections: OutlineSection[];
+}
+
+// ── 编辑审核 ──────────────────────────────────────────────────────────────────
+
+export interface ReviewIssue {
+  category: 'fact' | 'logic' | 'language';
+  severity: 'major' | 'minor';
+  location: string;
+  issue: string;
+  suggestion: string;
+}
+
+export interface ReviewResult {
+  verdict: 'pass' | 'reject';
+  factScore: number;
+  logicScore: number;
+  languageScore: number;
+  overallScore: number;
+  passThreshold: number;
+  revisionNotes: ReviewIssue[];
+}
+
+// ── 写作状态 ──────────────────────────────────────────────────────────────────
+
+export type WritingStatus =
+  | 'idle'
+  | 'researching'
+  | 'awaiting_material_confirm'
+  | 'writing_outline'
+  | 'awaiting_outline_confirm'
+  | 'writing_draft'
+  | 'awaiting_draft_confirm'
+  | 'reviewing'
+  | 'awaiting_review_confirm'
+  | 'revising'
+  | 'done'
+  | 'error';
+
+// ── SSE 进度事件 ──────────────────────────────────────────────────────────────
+
+export type ProgressEventType =
+  | 'connected'
+  | 'step_start'
+  | 'step_done'
+  | 'research_progress'
+  | 'materials_ready'
+  | 'outline_chunk'
+  | 'outline_ready'
+  | 'draft_chunk'
+  | 'draft_ready'
+  | 'review_chunk'
+  | 'review_item_done'
+  | 'review_ready'
+  | 'await_user'
+  | 'resumed'
+  | 'notice'
+  | 'done'
+  | 'error';
+
+export interface ProgressEvent {
+  type: ProgressEventType;
+  sessionId: string;
+  agentName?: string;
+  message: string;
+  // notice（非致命告警）/ error：标题 + 真实原因
+  title?: string;
+  detail?: string;
+  // materials_ready
+  materials?: AIMaterial[];
+  keywords?: string[];
+  materialSummary?: string;
+  // outline_ready
+  outline?: AIOutline;
+  // draft_ready / draft_chunk
+  draftMarkdown?: string;
+  draftTitle?: string;
+  revisionCount?: number;
+  // review_item_done (streaming per-category result)
+  reviewItemCategory?: 'fact' | 'logic' | 'language';
+  reviewItemScore?: number;
+  reviewItemIssues?: ReviewIssue[];
+  // review_ready
+  reviewResult?: ReviewResult;
+  // await_user
+  pausePoint?: 'material_confirm' | 'outline_confirm' | 'draft_confirm' | 'review_confirm';
+  pauseContext?: Record<string, unknown>;
+}
+
+// ── 用户干预提交体 ────────────────────────────────────────────────────────────
+
+export interface UserInterventionPayload {
+  action: string;
+  approvedMaterialIds?: string[];
+  extraKeywords?: string[];
+  editedOutline?: AIOutline;
+  outlineFeedback?: string;
+  userRevisionNotes?: string;
+  overrideVerdict?: boolean;
+  // 用户勾选的审核意见索引（基于 reviewResult.revisionNotes），未传则默认全选
+  selectedIssueIndices?: number[];
+}
+
+// ── 写作请求 ──────────────────────────────────────────────────────────────────
+
+export interface AIWritingRequest {
+  userIntent: string;
+  articleType: string;
+  targetAudience: string;
+  wordCountTarget: number;
+  modelName?: string;
+}
+
+// ── 流式审核条目 ──────────────────────────────────────────────────────────────
+
+export interface StreamingReviewItem {
+  category: 'fact' | 'logic' | 'language';
+  // 是否已生成完毕（true 时展示结构化评分/意见，false 时展示流式打字机文本）
+  isDone: boolean;
+  // 流式过程文本（正文 / 思考分开）
+  streamingText: string;
+  thinkingText: string;
+  // 完成后的结构化结果
+  score: number;
+  issues: ReviewIssue[];
+}
+
+// ── 修改摘要 ──────────────────────────────────────────────────────────────────
+
+export interface RevisionSummary {
+  revisedIssues: ReviewIssue[];
+  skippedIssues: ReviewIssue[];
+  oldWordCount: number;
+  newWordCount: number;
+}
+
+// ── 流式草稿章节 ──────────────────────────────────────────────────────────────
+
+export interface StreamingDraftSection {
+  sectionIndex: number;
+  sectionTitle: string;
+  text: string;        // 正文内容（非思考）
+  thinkingText: string; // 思考内容（<think>...</think> 内）
+  isDone: boolean;
+}
+
+// ── 已完成干预记录 ────────────────────────────────────────────────────────────
+
+export interface CompletedIntervention {
+  pausePoint: 'material_confirm' | 'outline_confirm' | 'draft_confirm' | 'review_confirm';
+  action: string;
+  // material_confirm
+  materials?: AIMaterial[];
+  // outline_confirm
+  outline?: AIOutline;
+  // draft_confirm
+  draftTitle?: string;
+  draftWordCount?: number;
+  reviewResult?: ReviewResult;
+  // review_confirm
+}
+
+// ── Hook 状态 ─────────────────────────────────────────────────────────────────
+
+export interface AIWritingState {
+  sessionId: string | null;
+  status: WritingStatus;
+  isPaused: boolean;
+  progressEvents: ProgressEvent[];
+  materials: AIMaterial[];
+  outline: AIOutline | null;
+  currentDraftMarkdown: string;
+  currentDraftTitle: string;
+  reviewResult: ReviewResult | null;
+  revisionCount: number;
+  currentPause: ProgressEvent | null;
+  completedInterventions: CompletedIntervention[];
+  error: string | null;
+  // 流式草稿
+  streamingDraftTitle: string;
+  streamingDraftSections: StreamingDraftSection[];
+  // 流式大纲（正文 / 思考分开）
+  outlineStreamingText: string;
+  outlineThinkingText: string;
+  // 素材收集实时进度（最新一条提示文案）
+  researchProgress: string;
+  // 流式审核（逐条到达）
+  streamingReviewItems: StreamingReviewItem[];
+  // 修改摘要
+  revisionSummary: RevisionSummary | null;
+  // 待修改上下文（用于生成摘要）
+  pendingRevisionContext: {
+    submittedIssues: ReviewIssue[];
+    skippedIssues: ReviewIssue[];
+    oldWordCount: number;
+  } | null;
+}
diff --git a/frontend-web/src/open-canvas/types/selection.ts b/frontend-web/src/open-canvas/types/selection.ts
index ae46d14d..b3abcd49 100644
--- a/frontend-web/src/open-canvas/types/selection.ts
+++ b/frontend-web/src/open-canvas/types/selection.ts
@@ -13,3 +13,10 @@ export type CanvasSelectionState = {
   textSelection: CanvasTextSelection | null;
   codeSelection: CanvasCodeSelection | null;
 };
+
+/** Tiptap editor selection — used by AI rewrite flow */
+export type WritingSelection = {
+  from: number;
+  to: number;
+  text: string;
+};
diff --git a/frontend-web/src/open-canvas/utils/apply-rewrite.ts b/frontend-web/src/open-canvas/utils/apply-rewrite.ts
new file mode 100644
index 00000000..ba9c7b9d
--- /dev/null
+++ b/frontend-web/src/open-canvas/utils/apply-rewrite.ts
@@ -0,0 +1,51 @@
+import type { Editor } from "@tiptap/react";
+import type { WritingSelection } from "../types/selection";
+
+/** Convert plain text (possibly multi-paragraph) to a list of Tiptap paragraph nodes. */
+function textToNodes(schema: Editor["schema"], text: string) {
+  const paragraphs = text.split(/\n{2,}/);
+  return paragraphs
+    .map((p) => p.trim())
+    .filter(Boolean)
+    .map((p) => ({
+      type: "paragraph",
+      content: p ? [{ type: "text", text: p }] : [],
+    }));
+}
+
+/**
+ * Replace the selection range with the new text.
+ * Restores focus and places cursor after the inserted content.
+ */
+export function applyReplace(
+  editor: Editor,
+  selection: WritingSelection,
+  newText: string,
+): void {
+  const { from, to } = selection;
+  const nodes = textToNodes(editor.schema, newText);
+  if (nodes.length === 0) return;
+
+  editor
+    .chain()
+    .focus()
+    .deleteRange({ from, to })
+    .insertContentAt(from, nodes)
+    .run();
+}
+
+/**
+ * Insert the new text as new paragraph(s) after the selection end.
+ * Original text is preserved.
+ */
+export function applyInsert(
+  editor: Editor,
+  selection: WritingSelection,
+  newText: string,
+): void {
+  const { to } = selection;
+  const nodes = textToNodes(editor.schema, newText);
+  if (nodes.length === 0) return;
+
+  editor.chain().focus().insertContentAt(to, nodes).run();
+}
diff --git a/frontend-web/src/open-canvas/utils/quick-actions.ts b/frontend-web/src/open-canvas/utils/quick-actions.ts
index ca10d465..6cab60bb 100644
--- a/frontend-web/src/open-canvas/utils/quick-actions.ts
+++ b/frontend-web/src/open-canvas/utils/quick-actions.ts
@@ -1,16 +1,34 @@
+import type { CanvasArtifactContent } from "../types/artifact";
 import type { QuickActionId } from "../types/quick-action";
+import { isCodeArtifact } from "./artifact";
 
 const QUICK_ACTION_MESSAGES: Record<string, string> = {
-  expand: "请对当前内容进行扩写，增加深度和细节，保持原有结构不变",
-  shorten: "请对当前内容进行精简，提炼核心要点，去除冗余",
-  formalize: "请将当前内容改写为正式、专业的语气",
-  casualize: "请将当前内容改写为口语化、友好的语气",
-  add_comments: "请为当前代码添加清晰实用的注释",
-  add_logs: "请为当前代码在关键位置添加适当的日志语句",
-  fix_bugs: "请检查并修复当前代码中的所有 Bug",
+  expand:        "请对当前内容进行扩写，增加深度和细节，保持原有结构不变",
+  shorten:       "请对当前内容进行精简，提炼核心要点，去除冗余",
+  formalize:     "请将当前内容改写为正式、专业的语气",
+  casualize:     "请将当前内容改写为口语化、友好的语气",
+  add_comments:  "请为当前代码添加清晰实用的注释",
+  add_logs:      "请为当前代码在关键位置添加适当的日志语句",
+  fix_bugs:      "请检查并修复当前代码中的所有 Bug",
   optimize_code: "请对当前代码进行性能和可读性优化",
 };
 
-export function buildQuickActionMessage(id: QuickActionId): string {
-  return QUICK_ACTION_MESSAGES[id] ?? `请对当前内容执行操作：${id}`;
+/**
+ * Builds the human message for a quick action.
+ * The current artifact content is always included so the agent knows what to edit —
+ * LangGraph's create_agent only passes state.messages to the LLM, not state.artifact.
+ */
+export function buildQuickActionMessage(
+  id: QuickActionId,
+  content: CanvasArtifactContent,
+): string {
+  const instruction = QUICK_ACTION_MESSAGES[id] ?? `请对当前内容执行操作：${id}`;
+  const artifactContent = isCodeArtifact(content) ? content.code : content.fullMarkdown;
+  const tag = isCodeArtifact(content) ? `language="${content.language}"` : "";
+
+  return `${instruction}
+
+<artifact ${tag}>
+${artifactContent}
+</artifact>`;
 }
diff --git a/frontend-web/src/open-canvas/utils/wordCount.ts b/frontend-web/src/open-canvas/utils/wordCount.ts
new file mode 100644
index 00000000..47d1ef7e
--- /dev/null
+++ b/frontend-web/src/open-canvas/utils/wordCount.ts
@@ -0,0 +1,12 @@
+/**
+ * 中文语境下的「字数」统计，与后端 `nodes/_utils.py:count_words` 保持同一口径：
+ * 汉字逐字计 + 中文标点逐个计 + 连续数字/英文各算 1 字。
+ * 不计入空白、markdown 语法符号（# * - 等）与 ASCII 标点。
+ */
+export function countWords(text: string): number {
+  if (!text) return 0;
+  const cjk = (text.match(/[一-鿿]/g) ?? []).length;
+  const cjkPunct = (text.match(/[，。、；：？！“”‘’（）《》【】「」『』〈〉—…·～]/g) ?? []).length;
+  const alnumRuns = (text.match(/[A-Za-z0-9]+/g) ?? []).length;
+  return cjk + cjkPunct + alnumRuns;
+}
diff --git a/frontend-web/src/styles/globals.css b/frontend-web/src/styles/globals.css
index 8c4e042a..3b8f86da 100644
--- a/frontend-web/src/styles/globals.css
+++ b/frontend-web/src/styles/globals.css
@@ -566,6 +566,186 @@
   }
 }
 
+/* ─── Tiptap writing editor ─────────────────────────────────────────────── */
+.tiptap-writing-editor .ProseMirror {
+  outline: none;
+  min-height: 320px;
+  caret-color: var(--primary);
+  padding-bottom: 6rem; /* ensure last paragraph isn't flush against the bottom */
+}
+
+.tiptap-writing-editor .ProseMirror p {
+  margin-bottom: 1rem;
+  line-height: 1.8;
+  font-size: 0.9375rem; /* 15px */
+  color: var(--foreground);
+  text-indent: 2em; /* 段落首行缩进 */
+}
+
+.tiptap-writing-editor .ProseMirror h1 {
+  font-size: 1.625rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border);
+  color: var(--foreground);
+  line-height: 1.25;
+}
+
+.tiptap-writing-editor .ProseMirror h1:first-child {
+  margin-top: 0;
+}
+
+.tiptap-writing-editor .ProseMirror h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  margin-top: 1.75rem;
+  margin-bottom: 0.625rem;
+  color: var(--foreground);
+  line-height: 1.35;
+}
+
+.tiptap-writing-editor .ProseMirror h3 {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: var(--foreground);
+  line-height: 1.4;
+}
+
+.tiptap-writing-editor .ProseMirror h2:first-child,
+.tiptap-writing-editor .ProseMirror h3:first-child {
+  margin-top: 0;
+}
+
+.tiptap-writing-editor .ProseMirror strong {
+  font-weight: 600;
+}
+
+.tiptap-writing-editor .ProseMirror em {
+  font-style: italic;
+}
+
+.tiptap-writing-editor .ProseMirror s {
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+
+.tiptap-writing-editor .ProseMirror ul {
+  list-style-type: disc;
+  margin-left: 1.5rem;
+  margin-bottom: 1rem;
+  font-size: 0.9375rem;
+  color: var(--foreground);
+}
+
+.tiptap-writing-editor .ProseMirror ol {
+  list-style-type: decimal;
+  margin-left: 1.5rem;
+  margin-bottom: 1rem;
+  font-size: 0.9375rem;
+  color: var(--foreground);
+}
+
+.tiptap-writing-editor .ProseMirror li {
+  line-height: 1.8;
+  margin-bottom: 0.25rem;
+}
+
+.tiptap-writing-editor .ProseMirror li > p {
+  margin-bottom: 0.25rem;
+  text-indent: 0; /* 列表项内段落不缩进 */
+}
+
+.tiptap-writing-editor .ProseMirror blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: 1rem;
+  margin: 1.25rem 0;
+  font-style: italic;
+  font-size: 0.9375rem;
+  color: var(--muted-foreground);
+}
+
+.tiptap-writing-editor .ProseMirror pre {
+  background: var(--muted);
+  border-radius: 0.5rem;
+  padding: 1rem 1.25rem;
+  margin: 1rem 0 1.25rem;
+  overflow-x: auto;
+  border: 1px solid var(--border);
+}
+
+.tiptap-writing-editor .ProseMirror pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 0.8125rem; /* 13px */
+  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
+  color: var(--foreground);
+  line-height: 1.7;
+}
+
+.tiptap-writing-editor .ProseMirror code {
+  background: var(--muted);
+  padding: 0.15rem 0.4rem;
+  border-radius: 0.25rem;
+  font-size: 0.8125rem;
+  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
+  color: var(--foreground);
+  border: 1px solid var(--border);
+}
+
+.tiptap-writing-editor .ProseMirror hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 2rem 0;
+}
+
+.tiptap-writing-editor .ProseMirror a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+  transition: opacity 0.15s;
+}
+
+.tiptap-writing-editor .ProseMirror a:hover {
+  opacity: 0.75;
+}
+
+/* Placeholder */
+.tiptap-writing-editor .ProseMirror p.is-editor-empty:first-child {
+  text-indent: 0; /* 占位文案不缩进 */
+}
+
+.tiptap-writing-editor .ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--muted-foreground);
+  pointer-events: none;
+  float: left;
+  height: 0;
+  opacity: 0.6;
+}
+
+/* Selection highlight — use color-mix to avoid the background+opacity mismatch */
+.tiptap-writing-editor .ProseMirror ::selection {
+  background: color-mix(in srgb, #f87171 35%, transparent);
+}
+
+/* AI rewrite — highlight the selected range while the menu / preview is open */
+.ai-rewrite-highlight {
+  background: color-mix(in srgb, #fbbf24 30%, transparent);
+  border-radius: 2px;
+  transition: background 0.2s ease;
+}
+.dark .ai-rewrite-highlight {
+  background: color-mix(in srgb, #fbbf24 18%, transparent);
+}
+
 :root {
   --container-width-xs: calc(var(--spacing) * 72);
   --container-width-sm: calc(var(--spacing) * 144);
diff --git a/offline-backend-20260512/backend/app/gateway/app.py b/offline-backend-20260512/backend/app/gateway/app.py
index 2480abab..b90f0e63 100644
--- a/offline-backend-20260512/backend/app/gateway/app.py
+++ b/offline-backend-20260512/backend/app/gateway/app.py
@@ -22,6 +22,7 @@ from app.gateway.config import get_gateway_config
 from app.gateway.csrf_middleware import CSRFMiddleware
 from app.gateway.deps import langgraph_runtime
 from app.gateway.routers import (
+    ai_writing,
     agents,
     artifacts,
     assistants_compat,
@@ -43,6 +44,7 @@ from app.gateway.routers import (
     thread_runs,
     threads,
     uploads,
+    writing,
 )
 from deerflow.config import app_config as deerflow_app_config
 from deerflow.config.app_config import apply_logging_level
@@ -671,6 +673,12 @@ This gateway provides custom endpoints for models, MCP configuration, skills, an
     # Suggestions API is mounted at /api/threads/{thread_id}/suggestions
     app.include_router(suggestions.router)
 
+    # Writing rewrite API is mounted at /api/writing
+    app.include_router(writing.router)
+
+    # AI Writing multi-agent API is mounted at /api/ai-writing
+    app.include_router(ai_writing.router)
+
     # Scheduled task API is mounted at /api/scheduled-tasks
     app.include_router(scheduled_tasks.router)
 
diff --git a/offline-backend-20260512/backend/app/gateway/deps.py b/offline-backend-20260512/backend/app/gateway/deps.py
index 41a9b12a..85422d81 100644
--- a/offline-backend-20260512/backend/app/gateway/deps.py
+++ b/offline-backend-20260512/backend/app/gateway/deps.py
@@ -122,6 +122,14 @@ async def langgraph_runtime(app: FastAPI) -> AsyncGenerator[None, None]:
 
         app.state.tag_store = make_tag_store(sf)
 
+        from deerflow.persistence.ai_writing_sessions import make_ai_writing_session_store
+
+        app.state.ai_writing_session_store = make_ai_writing_session_store(sf)
+
+        from deerflow.persistence.article_types import make_article_type_store
+
+        app.state.article_type_store = make_article_type_store(sf)
+
         # Run event store (has its own factory with config-driven backend selection)
         run_events_config = getattr(config, "run_events", None)
         app.state.run_event_store = make_run_event_store(run_events_config)
@@ -222,6 +230,16 @@ def get_tag_store(request: Request) -> TagStore:
     return val
 
 
+def get_ai_writing_session_store(request: Request):
+    """Return the AI writing session store, or None when not configured."""
+    return getattr(request.app.state, "ai_writing_session_store", None)
+
+
+def get_article_type_store(request: Request):
+    """Return the article type store, or None when not configured."""
+    return getattr(request.app.state, "article_type_store", None)
+
+
 def get_run_context(request: Request) -> RunContext:
     """Build a :class:`RunContext` from ``app.state`` singletons.
 
diff --git a/offline-backend-20260512/backend/app/gateway/routers/__init__.py b/offline-backend-20260512/backend/app/gateway/routers/__init__.py
index 4223efc2..e3c3f381 100644
--- a/offline-backend-20260512/backend/app/gateway/routers/__init__.py
+++ b/offline-backend-20260512/backend/app/gateway/routers/__init__.py
@@ -1,3 +1,3 @@
-from . import artifacts, assistants_compat, mcp, models, recommended_questions, skills, suggestions, thread_runs, threads, uploads
+from . import ai_writing, artifacts, assistants_compat, mcp, models, recommended_questions, skills, suggestions, thread_runs, threads, uploads, writing
 
-__all__ = ["artifacts", "assistants_compat", "mcp", "models", "recommended_questions", "skills", "suggestions", "threads", "thread_runs", "uploads"]
+__all__ = ["ai_writing", "artifacts", "assistants_compat", "mcp", "models", "recommended_questions", "skills", "suggestions", "threads", "thread_runs", "uploads", "writing"]
diff --git a/offline-backend-20260512/backend/app/gateway/routers/ai_writing.py b/offline-backend-20260512/backend/app/gateway/routers/ai_writing.py
new file mode 100644
index 00000000..6e923f41
--- /dev/null
+++ b/offline-backend-20260512/backend/app/gateway/routers/ai_writing.py
@@ -0,0 +1,640 @@
+"""AI 写作路由 —— 独立于原有路由，前缀 /api/ai-writing/
+
+POST   /api/ai-writing/start                      启动写作流程，返回 session_id
+GET    /api/ai-writing/{id}/stream                SSE 流（进度/干预/草稿事件）
+POST   /api/ai-writing/{id}/resume                用户干预响应，恢复流程
+GET    /api/ai-writing/{id}/state                 查询当前流程状态
+GET    /api/ai-writing/sessions                   列出用户的会话历史
+GET    /api/ai-writing/sessions/{id}              获取单个历史会话
+PATCH  /api/ai-writing/sessions/{id}              重命名会话标题
+DELETE /api/ai-writing/sessions/{id}              删除会话
+GET    /api/ai-writing/article-types              列出所有文章类型
+POST   /api/ai-writing/article-types              新增文章类型
+PATCH  /api/ai-writing/article-types/{id}         更新文章类型
+DELETE /api/ai-writing/article-types/{id}         删除文章类型
+"""
+from __future__ import annotations
+
+import asyncio
+import json
+import logging
+import uuid
+from collections.abc import AsyncGenerator
+from datetime import UTC, datetime
+from typing import Optional
+
+from fastapi import APIRouter, HTTPException, Request
+from fastapi.responses import StreamingResponse
+from langgraph.types import Command
+from pydantic import BaseModel, Field
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/api/ai-writing", tags=["ai-writing"])
+
+# ── 请求/响应模型 ─────────────────────────────────────────────────────────────
+
+class StartWritingRequest(BaseModel):
+    user_intent: str
+    article_type: str = "analysis"
+    target_audience: str = "普通读者"
+    word_count_target: int = 800
+    model_name: str = ""
+
+
+class StartWritingResponse(BaseModel):
+    session_id: str
+    message: str = "写作流程已启动"
+
+
+class ResumeRequest(BaseModel):
+    action: str
+    pause_point: str = ""
+    approved_material_ids: list[str] = Field(default_factory=list)
+    extra_keywords: list[str] = Field(default_factory=list)
+    edited_outline: Optional[dict] = None
+    outline_feedback: str = ""
+    user_revision_notes: str = ""
+    override_verdict: bool = False
+    selected_issue_indices: Optional[list[int]] = None
+
+
+class RenameSessionRequest(BaseModel):
+    title: str
+
+
+class SaveTranscriptRequest(BaseModel):
+    # 前端组装的完整对话时间线（progressEvents + completedInterventions）
+    transcript: dict
+
+
+class ArticleTypeRequest(BaseModel):
+    key: str
+    label: str
+    description: Optional[str] = None
+    prompt_hint: Optional[str] = None
+    default_word_count: int = 800
+    sort_order: int = 0
+
+
+class UpdateArticleTypeRequest(BaseModel):
+    key: Optional[str] = None
+    label: Optional[str] = None
+    description: Optional[str] = None
+    prompt_hint: Optional[str] = None
+    default_word_count: Optional[int] = None
+    sort_order: Optional[int] = None
+
+
+class ArticleTypeResponse(BaseModel):
+    id: str
+    key: str
+    label: str
+    description: Optional[str] = None
+    prompt_hint: Optional[str] = None
+    default_word_count: int
+    sort_order: int
+    created_at: str
+    updated_at: str
+
+
+class SessionResponse(BaseModel):
+    id: str
+    user_id: Optional[str] = None
+    title: str
+    user_intent: Optional[str] = None
+    status: str
+    draft_title: Optional[str] = None
+    draft_markdown: Optional[str] = None
+    completed_interventions: Optional[list] = None
+    review_result: Optional[dict] = None
+    transcript: Optional[dict] = None
+    created_at: str
+    updated_at: str
+
+
+# ── 内部状态 ──────────────────────────────────────────────────────────────────
+
+# session_id → asyncio.Queue
+_event_queues: dict[str, asyncio.Queue] = {}
+
+# session_id → model_name（resume 时复用）
+_session_model_names: dict[str, str] = {}
+
+# session_id → AIWritingSessionRepository（for DB saves）
+_session_repos: dict[str, object] = {}
+
+# session_id → user_id (str | None, already resolved)
+_session_user_ids: dict[str, str | None] = {}
+
+# session_id → accumulated intervention records
+_session_interventions: dict[str, list] = {}
+
+# session_id → True if session ended with error
+_session_error_flags: dict[str, bool] = {}
+
+# session_id → valid_article_types（list[dict] with key/label）
+_session_article_types: dict[str, list[dict]] = {}
+
+# session_id → pending await_user event tuple for SSE reconnect re-delivery
+# asyncio.Queue is consume-once; if the old SSE generator dequeued the await_user event
+# before the client disconnected, the event is lost from the queue. We save a copy here
+# so that a new SSE connection (e.g., after user clicks "继续") can re-inject it.
+_session_pending_pause: dict[str, tuple] = {}
+
+
+# ── 工具函数 ──────────────────────────────────────────────────────────────────
+
+def _sse(event: str, data: dict) -> str:
+    return f"event: {event}\ndata: {json.dumps(data, ensure_ascii=False)}\n\n"
+
+
+def _ai_writing_config() -> dict:
+    """读取 config.yaml 的 ai_writing 段（含素材检索 provider 配置）。"""
+    try:
+        from deerflow.config import get_app_config
+
+        aw = getattr(get_app_config(), "ai_writing", None)
+        if isinstance(aw, dict):
+            return aw
+        return dict(aw) if aw else {}
+    except Exception:
+        return {}
+
+
+def _make_config(session_id: str, model_name: str = "", valid_article_types: list[dict] | None = None) -> dict:
+    return {
+        "configurable": {
+            "thread_id": session_id,
+            "model_name": model_name or _session_model_names.get(session_id, ""),
+            "ai_writing_config": _ai_writing_config(),
+            # 把 SSE 队列注入，供草稿/大纲节点直接推流式 chunk
+            "sse_queue": _event_queues.get(session_id),
+            "sse_session_id": session_id,
+            # 动态文章类型列表，intent_parser 从此处读取有效枚举
+            "valid_article_types": valid_article_types or _session_article_types.get(session_id),
+        }
+    }
+
+
+def _truncate_title(text: str, max_len: int = 50) -> str:
+    text = text.strip()
+    return text[:max_len] + ("…" if len(text) > max_len else "")
+
+
+# ── 路由 ──────────────────────────────────────────────────────────────────────
+
+@router.post("/start", response_model=StartWritingResponse)
+async def start_writing(body: StartWritingRequest, request: Request):
+    """启动写作流程，返回 session_id。"""
+    from deerflow.agents.ai_writing.graph import AI_WRITING_GRAPH
+    from app.gateway.deps import get_ai_writing_session_store, get_article_type_store, get_current_user
+
+    session_id = str(uuid.uuid4())
+    queue: asyncio.Queue = asyncio.Queue()
+    _event_queues[session_id] = queue
+    _session_model_names[session_id] = body.model_name
+    _session_interventions[session_id] = []
+
+    # 加载动态文章类型列表，注入给 intent_parser 节点
+    article_type_store = get_article_type_store(request)
+    valid_article_types: list[dict] | None = None
+    if article_type_store is not None:
+        try:
+            records = await article_type_store.list()
+            if records:
+                valid_article_types = [{"key": r["key"], "label": r["label"]} for r in records]
+        except Exception:
+            logger.exception("ai_writing: failed to load article types for session=%s", session_id)
+    _session_article_types[session_id] = valid_article_types or []
+
+    # 持久化会话记录（DB 可能未配置，则跳过）
+    repo = get_ai_writing_session_store(request)
+    user_id = await get_current_user(request)
+    if repo is not None:
+        try:
+            title = _truncate_title(body.user_intent)
+            await repo.create(
+                id=session_id,
+                title=title,
+                user_intent=body.user_intent,
+                user_id=user_id,
+            )
+            _session_repos[session_id] = repo
+            _session_user_ids[session_id] = user_id
+        except Exception:
+            logger.exception("ai_writing: failed to create session record: session=%s", session_id)
+
+    initial_state = {
+        "user_intent": body.user_intent,
+        "article_type": body.article_type,
+        "target_audience": body.target_audience,
+        "word_count_target": body.word_count_target,
+        "revision_count": 0,
+        "max_revisions": 3,
+        "status": "researching",
+        "drafts": [],
+        "progress_events": [],
+        "material_package": None,
+        "current_outline": None,
+        "current_draft": None,
+        "review_result": None,
+        "last_user_intervention": None,
+    }
+    config = _make_config(session_id, body.model_name, valid_article_types=valid_article_types)
+
+    asyncio.create_task(_stream_graph_segment(session_id, initial_state, config, AI_WRITING_GRAPH))
+    return StartWritingResponse(session_id=session_id)
+
+
+@router.get("/sessions", response_model=list[SessionResponse])
+async def list_sessions(request: Request):
+    """列出当前用户的 AI 写作历史会话。"""
+    from app.gateway.deps import get_ai_writing_session_store, get_current_user
+
+    repo = get_ai_writing_session_store(request)
+    if repo is None:
+        return []
+    user_id = await get_current_user(request)
+    return await repo.list(user_id=user_id)
+
+
+@router.get("/sessions/{session_id}", response_model=SessionResponse)
+async def get_session(session_id: str, request: Request):
+    """获取单个历史会话。"""
+    from app.gateway.deps import get_ai_writing_session_store, get_current_user
+
+    repo = get_ai_writing_session_store(request)
+    if repo is None:
+        raise HTTPException(status_code=503, detail="Session store not available")
+    user_id = await get_current_user(request)
+    record = await repo.get(session_id, user_id=user_id)
+    if record is None:
+        raise HTTPException(status_code=404, detail="Session not found")
+    return record
+
+
+@router.patch("/sessions/{session_id}", response_model=SessionResponse)
+async def rename_session(session_id: str, body: RenameSessionRequest, request: Request):
+    """重命名会话标题。"""
+    from app.gateway.deps import get_ai_writing_session_store, get_current_user
+
+    repo = get_ai_writing_session_store(request)
+    if repo is None:
+        raise HTTPException(status_code=503, detail="Session store not available")
+    user_id = await get_current_user(request)
+    updated = await repo.update(session_id, user_id=user_id, title=body.title.strip())
+    if updated is None:
+        raise HTTPException(status_code=404, detail="Session not found")
+    return updated
+
+
+@router.delete("/sessions/{session_id}")
+async def delete_session(session_id: str, request: Request):
+    """删除历史会话。"""
+    from app.gateway.deps import get_ai_writing_session_store, get_current_user
+
+    repo = get_ai_writing_session_store(request)
+    if repo is None:
+        raise HTTPException(status_code=503, detail="Session store not available")
+    user_id = await get_current_user(request)
+    deleted = await repo.delete(session_id, user_id=user_id)
+    if not deleted:
+        raise HTTPException(status_code=404, detail="Session not found")
+    return {"success": True}
+
+
+@router.put("/sessions/{session_id}/transcript")
+async def save_transcript(session_id: str, body: SaveTranscriptRequest, request: Request):
+    """保存会话的完整对话时间线，供历史会话回显出与实时对话一致的富时间线。"""
+    from app.gateway.deps import get_ai_writing_session_store, get_current_user
+
+    repo = get_ai_writing_session_store(request)
+    if repo is None:
+        return {"success": False}
+    user_id = await get_current_user(request)
+    updated = await repo.update(session_id, user_id=user_id, transcript=body.transcript)
+    if updated is None:
+        raise HTTPException(status_code=404, detail="Session not found")
+    return {"success": True}
+
+
+@router.get("/article-types", response_model=list[ArticleTypeResponse])
+async def list_article_types(request: Request):
+    """列出所有文章类型，按 sort_order 升序排列。"""
+    from app.gateway.deps import get_article_type_store
+
+    store = get_article_type_store(request)
+    if store is None:
+        return []
+    return await store.list()
+
+
+@router.post("/article-types", response_model=ArticleTypeResponse, status_code=201)
+async def create_article_type(body: ArticleTypeRequest, request: Request):
+    """新增文章类型。key 必须全局唯一。"""
+    from app.gateway.deps import get_article_type_store
+
+    store = get_article_type_store(request)
+    if store is None:
+        raise HTTPException(status_code=503, detail="Article type store not available")
+    existing = await store.get_by_key(body.key)
+    if existing is not None:
+        raise HTTPException(status_code=409, detail=f"Article type key '{body.key}' already exists")
+    return await store.create(
+        key=body.key,
+        label=body.label,
+        description=body.description,
+        prompt_hint=body.prompt_hint,
+        default_word_count=body.default_word_count,
+        sort_order=body.sort_order,
+    )
+
+
+@router.patch("/article-types/{article_type_id}", response_model=ArticleTypeResponse)
+async def update_article_type(article_type_id: str, body: UpdateArticleTypeRequest, request: Request):
+    """更新文章类型字段（只传需要修改的字段）。"""
+    from app.gateway.deps import get_article_type_store
+
+    store = get_article_type_store(request)
+    if store is None:
+        raise HTTPException(status_code=503, detail="Article type store not available")
+    # 如果修改了 key，检查唯一性
+    if body.key is not None:
+        existing = await store.get_by_key(body.key)
+        if existing is not None and existing["id"] != article_type_id:
+            raise HTTPException(status_code=409, detail=f"Article type key '{body.key}' already exists")
+
+    _UNSET = object.__new__(object)
+    kwargs = {}
+    for field in ("key", "label", "description", "prompt_hint", "default_word_count", "sort_order"):
+        val = getattr(body, field)
+        if val is not None:
+            kwargs[field] = val
+
+    updated = await store.update(article_type_id, **kwargs)
+    if updated is None:
+        raise HTTPException(status_code=404, detail="Article type not found")
+    return updated
+
+
+@router.delete("/article-types/{article_type_id}")
+async def delete_article_type(article_type_id: str, request: Request):
+    """删除文章类型。"""
+    from app.gateway.deps import get_article_type_store
+
+    store = get_article_type_store(request)
+    if store is None:
+        raise HTTPException(status_code=503, detail="Article type store not available")
+    deleted = await store.delete(article_type_id)
+    if not deleted:
+        raise HTTPException(status_code=404, detail="Article type not found")
+    return {"success": True}
+
+
+@router.get("/{session_id}/stream")
+async def stream_progress(session_id: str):
+    """SSE 流：推送进度事件、干预请求、草稿内容。"""
+    return StreamingResponse(
+        _sse_generator(session_id),
+        media_type="text/event-stream",
+        headers={"Cache-Control": "no-cache", "X-Accel-Buffering": "no"},
+    )
+
+
+@router.post("/{session_id}/resume")
+async def resume_writing(session_id: str, body: ResumeRequest, request: Request):
+    """用户提交干预决策，恢复暂停的流程。"""
+    from deerflow.agents.ai_writing.graph import AI_WRITING_GRAPH
+    from app.gateway.deps import get_current_user
+
+    if session_id not in _event_queues:
+        raise HTTPException(status_code=404, detail="Session not found")
+
+    config = _make_config(session_id)
+    intervention = {
+        "action": body.action,
+        "approvedMaterialIds": body.approved_material_ids,
+        "extraKeywords": body.extra_keywords,
+        "editedOutline": body.edited_outline,
+        "outlineFeedback": body.outline_feedback,
+        "userRevisionNotes": body.user_revision_notes,
+        "overrideVerdict": body.override_verdict,
+        "selectedIssueIndices": body.selected_issue_indices,
+    }
+
+    # Record this intervention for session history
+    record = {
+        "pausePoint": body.pause_point,
+        "action": body.action,
+        "timestamp": datetime.now(UTC).isoformat(),
+    }
+    if session_id in _session_interventions:
+        _session_interventions[session_id].append(record)
+        repo = _session_repos.get(session_id)
+        user_id = _session_user_ids.get(session_id)
+        if repo is not None:
+            try:
+                await repo.update(
+                    session_id,
+                    user_id=user_id,
+                    completed_interventions=_session_interventions[session_id],
+                )
+            except Exception:
+                logger.exception("ai_writing: failed to save intervention: session=%s", session_id)
+
+    # Clear pending pause so SSE reconnect won't re-inject the stale await_user event
+    _session_pending_pause.pop(session_id, None)
+
+    asyncio.create_task(
+        _stream_graph_segment(session_id, Command(resume=intervention), config, AI_WRITING_GRAPH)
+    )
+    return {"message": "已提交，流程恢复中"}
+
+
+@router.get("/{session_id}/state")
+async def get_state(session_id: str):
+    """查询当前流程状态快照。"""
+    from deerflow.agents.ai_writing.graph import AI_WRITING_GRAPH
+
+    config = _make_config(session_id)
+    snapshot = await AI_WRITING_GRAPH.aget_state(config)
+    if not snapshot or not snapshot.values:
+        raise HTTPException(status_code=404, detail="Session not found")
+    return snapshot.values
+
+
+# ── 内部辅助 ──────────────────────────────────────────────────────────────────
+
+async def _stream_graph_segment(
+    session_id: str,
+    input_or_command,
+    config: dict,
+    graph,
+):
+    """运行一个 Graph 片段（初始运行或 resume），将输出推入队列。
+    遇到 interrupt 时停止（不关闭队列），等待下次 resume。
+    Graph 结束时关闭队列（放入 None 哨兵）。
+    """
+    queue = _event_queues.get(session_id)
+    if queue is None:
+        return
+
+    reached_end = False
+    is_error = False
+    try:
+        async for chunk in graph.astream(input_or_command, config=config, stream_mode="updates"):
+            node_name = next(iter(chunk))
+            node_output = chunk[node_name]
+
+            # interrupt() 触发
+            if node_name == "__interrupt__":
+                # node_output 是 (Interrupt(...),) 元组
+                interrupt_list = node_output if isinstance(node_output, (list, tuple)) else [node_output]
+                for intr in interrupt_list:
+                    interrupt_data = intr.value if hasattr(intr, "value") else intr
+                    event_tuple = ("await_user", interrupt_data)
+                    await queue.put(event_tuple)
+                    # Save for SSE reconnect re-delivery: if the old generator consumed this
+                    # event before the client disconnected, a new connection would block forever.
+                    _session_pending_pause[session_id] = event_tuple
+                return  # 等待 resume，不关闭队列
+
+            if not isinstance(node_output, dict):
+                continue
+
+            # 推送 progress_events
+            for evt in node_output.get("progress_events") or []:
+                await queue.put((_event_type(evt), {**evt, "session_id": session_id}))
+
+            # 素材就绪
+            if pkg := node_output.get("material_package"):
+                await queue.put(("materials_ready", {
+                    "session_id": session_id,
+                    "keywords": pkg.get("keywords", []),
+                    "materials": pkg.get("materials", []),
+                    "summary": pkg.get("summary", ""),
+                }))
+
+            # 大纲就绪
+            if outline := node_output.get("current_outline"):
+                await queue.put(("outline_ready", {"session_id": session_id, "outline": outline}))
+
+            # 草稿就绪 — 保存到 DB
+            if draft := node_output.get("current_draft"):
+                draft_title = draft.get("title", "")
+                draft_markdown = draft.get("full_markdown", "")
+                await queue.put(("draft_ready", {
+                    "session_id": session_id,
+                    "title": draft_title,
+                    "markdown": draft_markdown,
+                    "revision_count": draft.get("revision_count", 0),
+                }))
+                repo = _session_repos.get(session_id)
+                user_id = _session_user_ids.get(session_id)
+                if repo is not None:
+                    try:
+                        await repo.update(
+                            session_id,
+                            user_id=user_id,
+                            status="draft_ready",
+                            title=draft_title or _truncate_title(
+                                next(iter(_session_interventions.get(session_id, [{}])), {}).get("action", "草稿"),
+                            ),
+                            draft_title=draft_title,
+                            draft_markdown=draft_markdown,
+                        )
+                    except Exception:
+                        logger.exception("ai_writing: failed to save draft: session=%s", session_id)
+
+            # 编辑审核就绪 — 保存到 DB
+            if review := node_output.get("review_result"):
+                await queue.put(("review_ready", {"session_id": session_id, "review_result": review}))
+                repo = _session_repos.get(session_id)
+                user_id = _session_user_ids.get(session_id)
+                if repo is not None:
+                    try:
+                        await repo.update(
+                            session_id,
+                            user_id=user_id,
+                            status="review_ready",
+                            review_result=review,
+                        )
+                    except Exception:
+                        logger.exception("ai_writing: failed to save review: session=%s", session_id)
+
+            # 状态 done：Graph 结束
+            if node_output.get("status") == "done":
+                reached_end = True
+
+        # astream 正常结束 = Graph 执行到 END
+        reached_end = True
+        await queue.put(("done", {"session_id": session_id, "message": "写作完成"}))
+
+    except Exception as e:
+        logger.exception("ai_writing graph segment failed: session=%s", session_id)
+        await queue.put(("error", {"session_id": session_id, "message": str(e)}))
+        is_error = True
+        reached_end = True
+    finally:
+        if reached_end:
+            # 更新最终状态到 DB
+            repo = _session_repos.get(session_id)
+            user_id = _session_user_ids.get(session_id)
+            if repo is not None:
+                try:
+                    await repo.update(
+                        session_id,
+                        user_id=user_id,
+                        status="error" if is_error else "done",
+                    )
+                except Exception:
+                    logger.exception("ai_writing: failed to update final status: session=%s", session_id)
+
+            await queue.put(None)  # 哨兵，通知 SSE 生成器关闭
+            _event_queues.pop(session_id, None)
+            _session_model_names.pop(session_id, None)
+            _session_repos.pop(session_id, None)
+            _session_user_ids.pop(session_id, None)
+            _session_interventions.pop(session_id, None)
+            _session_error_flags.pop(session_id, None)
+            _session_article_types.pop(session_id, None)
+            _session_pending_pause.pop(session_id, None)
+
+
+def _event_type(evt: dict) -> str:
+    t = evt.get("type", "progress")
+    # 过滤掉已在上方单独推送的事件类型，避免重复
+    if t in ("materials_ready", "outline_ready", "draft_ready", "review_ready", "await_user",
+             "draft_chunk", "outline_chunk"):
+        return "step_done"
+    return t
+
+
+async def _sse_generator(session_id: str) -> AsyncGenerator[str, None]:
+    """从队列消费事件，推送为 SSE 帧。"""
+    # 等待队列创建（最多 5 秒）
+    for _ in range(50):
+        if session_id in _event_queues:
+            break
+        await asyncio.sleep(0.1)
+    else:
+        yield _sse("error", {"message": "Session not found"})
+        return
+
+    queue = _event_queues[session_id]
+    yield _sse("connected", {"session_id": session_id})
+
+    # Re-inject the saved await_user event if the queue is empty and a pending pause exists.
+    # This covers the case where the old SSE generator dequeued the await_user event and
+    # yielded it to a disconnecting client — the event is then lost from the consume-once queue.
+    if queue.empty() and session_id in _session_pending_pause:
+        await queue.put(_session_pending_pause[session_id])
+
+    while True:
+        item = await queue.get()
+        if item is None:
+            break
+        event_type, data = item
+        yield _sse(event_type, data)
+        await asyncio.sleep(0)
diff --git a/offline-backend-20260512/backend/app/gateway/routers/writing.py b/offline-backend-20260512/backend/app/gateway/routers/writing.py
new file mode 100644
index 00000000..b8fe31ab
--- /dev/null
+++ b/offline-backend-20260512/backend/app/gateway/routers/writing.py
@@ -0,0 +1,191 @@
+"""Writing rewrite API — SSE streaming endpoint.
+
+POST /api/writing/rewrite
+  Returns text/event-stream with frames:
+    event: thinking  data: {"chunk": "..."}
+    event: text      data: {"chunk": "..."}
+    event: done      data: {}
+    event: error     data: {"message": "..."}
+"""
+
+from __future__ import annotations
+
+import json
+import logging
+
+from fastapi import APIRouter, Depends
+from fastapi.responses import StreamingResponse
+from langchain_core.messages import AIMessage, HumanMessage, SystemMessage
+from pydantic import BaseModel, Field
+
+from app.gateway.deps import get_config
+from deerflow.config.app_config import AppConfig
+from deerflow.models import create_chat_model
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/api/writing", tags=["writing"])
+
+# ── Prompts ───────────────────────────────────────────────────────────────────
+
+_SYSTEM_PROMPT = """你是一位专业的中文写作助手，擅长润色、扩写、缩写和调整文风。
+
+规则：
+- 只输出改写后的正文，不加任何前缀、解释或括号说明。
+- 保持原文的语言（中文输入 → 中文输出，英文输入 → 英文输出）。
+- 改写结果应与原文长度相近，除非任务要求扩写或缩写。
+- 不要添加 markdown 标题或特殊格式，除非原文本身包含。
+"""
+
+_ACTION_INSTRUCTIONS: dict[str, str] = {
+    "polish": "请对以下文字进行润色，使其表达更流畅、自然，同时保留原意。",
+    "expand": "请对以下文字进行扩写，补充细节和说明，使内容更丰富饱满。",
+    "shorten": "请对以下文字进行缩写，保留核心意思，去除冗余表达，使其更简洁。",
+    "tone": "请调整以下文字的语气风格。",
+}
+
+_TONE_SUFFIX: dict[str, str] = {
+    "professional": "目标风格：专业、正式。",
+    "casual": "目标风格：轻松、口语化。",
+    "readable": "目标风格：通俗易懂、易于阅读。",
+    "academic": "目标风格：学术严谨、逻辑清晰。",
+    "expressive": "目标风格：生动有文采、富有感染力。",
+}
+
+
+# ── Request model ─────────────────────────────────────────────────────────────
+
+
+class SelectionInfo(BaseModel):
+    from_: int = Field(..., alias="from", description="ProseMirror start offset")
+    to: int = Field(..., description="ProseMirror end offset")
+    text: str = Field(..., description="Selected plain text")
+
+    model_config = {"populate_by_name": True}
+
+
+class SurroundingContext(BaseModel):
+    before: str = Field(default="", description="Text before the selection")
+    after: str = Field(default="", description="Text after the selection")
+
+
+class RewriteRequest(BaseModel):
+    thread_id: str | None = Field(default=None, alias="threadId")
+    selection: SelectionInfo
+    action: str = Field(..., description="polish | expand | shorten | tone")
+    tone: str | None = Field(default=None)
+    model_name: str | None = Field(default=None, alias="modelName")
+    surrounding_context: SurroundingContext = Field(default_factory=SurroundingContext, alias="surroundingContext")
+    custom_instruction: str | None = Field(default=None, alias="customInstruction")
+    follow_up_instruction: str | None = Field(default=None, alias="followUpInstruction")
+    previous_result: str | None = Field(default=None, alias="previousResult")
+
+    model_config = {"populate_by_name": True}
+
+
+# ── Helpers ───────────────────────────────────────────────────────────────────
+
+
+def _sse(event: str, data: dict) -> str:
+    return f"event: {event}\ndata: {json.dumps(data, ensure_ascii=False)}\n\n"
+
+
+def _extract_chunk_parts(chunk: object) -> tuple[str, str]:
+    """Return (thinking_delta, text_delta) from a LangChain streaming chunk."""
+    thinking = ""
+    text = ""
+
+    content = getattr(chunk, "content", "")
+    if isinstance(content, str):
+        text = content
+    elif isinstance(content, list):
+        for block in content:
+            if isinstance(block, str):
+                text += block
+            elif isinstance(block, dict):
+                btype = block.get("type", "")
+                if btype in ("thinking", "thinking_delta"):
+                    thinking += block.get("thinking", "")
+                elif btype in ("text", "text_delta"):
+                    text += block.get("text", "")
+                elif btype == "reasoning":
+                    thinking += block.get("content", "")
+
+    # DeepSeek / OpenAI o-series: reasoning in additional_kwargs
+    if not thinking:
+        kwargs = getattr(chunk, "additional_kwargs", {}) or {}
+        r = kwargs.get("reasoning_content") or ""
+        if isinstance(r, str):
+            thinking = r
+
+    return thinking, text
+
+
+# ── Endpoint ──────────────────────────────────────────────────────────────────
+
+
+@router.post(
+    "/rewrite",
+    summary="AI Text Rewrite (SSE stream)",
+    response_class=StreamingResponse,
+)
+async def rewrite_selection(
+    body: RewriteRequest,
+    config: AppConfig = Depends(get_config),
+) -> StreamingResponse:
+    action = body.action if body.action in _ACTION_INSTRUCTIONS else "polish"
+    instruction = _ACTION_INSTRUCTIONS[action]
+    if action == "tone" and body.tone and body.tone in _TONE_SUFFIX:
+        instruction = f"{instruction}\n{_TONE_SUFFIX[body.tone]}"
+
+    context_parts: list[str] = []
+    before = body.surrounding_context.before.strip()
+    after = body.surrounding_context.after.strip()
+    if before or after:
+        context_parts.append("文章上下文（仅供参考，不要改写）：")
+        if before:
+            context_parts.append(f"[前文] {before[-300:]}")
+        if after:
+            context_parts.append(f"[后文] {after[:300]}")
+        context_parts.append("")
+
+    context_block = "\n".join(context_parts)
+    base_instruction = instruction
+    if body.custom_instruction:
+        base_instruction = f"{instruction}\n用户额外要求：{body.custom_instruction}"
+    user_message = f"{base_instruction}\n\n{context_block}需要改写的文字：\n{body.selection.text}"
+
+    if body.follow_up_instruction and body.previous_result:
+        messages = [
+            SystemMessage(content=_SYSTEM_PROMPT),
+            HumanMessage(content=user_message),
+            AIMessage(content=body.previous_result),
+            HumanMessage(content=body.follow_up_instruction),
+        ]
+    else:
+        messages = [SystemMessage(content=_SYSTEM_PROMPT), HumanMessage(content=user_message)]
+
+    # Auto-enable thinking when the selected model supports it
+    resolved_name = body.model_name or (config.models[0].name if config.models else None)
+    model_cfg = config.get_model_config(resolved_name) if resolved_name else None
+    thinking_enabled = bool(model_cfg and getattr(model_cfg, "supports_thinking", False))
+
+    async def generate():
+        try:
+            model = create_chat_model(name=body.model_name, thinking_enabled=thinking_enabled, app_config=config)
+            async for chunk in model.astream(messages, config={"run_name": "writing_rewrite"}):
+                thinking_delta, text_delta = _extract_chunk_parts(chunk)
+                if thinking_delta:
+                    yield _sse("thinking", {"chunk": thinking_delta})
+                if text_delta:
+                    yield _sse("text", {"chunk": text_delta})
+            yield _sse("done", {})
+        except Exception as e:
+            logger.exception("writing/rewrite failed: thread=%s action=%s", body.thread_id, action)
+            yield _sse("error", {"message": str(e)})
+
+    return StreamingResponse(
+        generate(),
+        media_type="text/event-stream",
+        headers={"X-Accel-Buffering": "no", "Cache-Control": "no-cache"},
+    )
diff --git a/offline-backend-20260512/backend/app/gateway/services.py b/offline-backend-20260512/backend/app/gateway/services.py
index f14d8df4..4159d635 100644
--- a/offline-backend-20260512/backend/app/gateway/services.py
+++ b/offline-backend-20260512/backend/app/gateway/services.py
@@ -152,10 +152,12 @@ _CONTEXT_CONFIGURABLE_KEYS: frozenset[str] = frozenset(
         "model_name",
         "mode",
         "thinking_enabled",
-        "reasoning_effort",
-        "writing_mode",
-        "writing_artifact_path",
-        "is_plan_mode",
+        "reasoning_effort",
+        "writing_mode",
+        "writing_artifact_path",
+        "canvas_artifact_title",
+        "canvas_artifact_type",
+        "is_plan_mode",
         "subagent_enabled",
         "max_concurrent_subagents",
         "agent_name",
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/__init__.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/__init__.py
new file mode 100644
index 00000000..f626726d
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/__init__.py
@@ -0,0 +1,3 @@
+from .graph import AI_WRITING_GRAPH, build_ai_writing_graph
+
+__all__ = ["AI_WRITING_GRAPH", "build_ai_writing_graph"]
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/graph.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/graph.py
new file mode 100644
index 00000000..5a910c03
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/graph.py
@@ -0,0 +1,231 @@
+"""AI 写作 LangGraph Graph，含 4 个用户干预点。"""
+from __future__ import annotations
+
+from langgraph.checkpoint.memory import MemorySaver
+from langgraph.graph import END, StateGraph
+from langgraph.types import interrupt
+
+from .state import AIWritingState
+from .nodes.intent_parser import intent_parser_node
+from .nodes.researcher import researcher_node
+from .nodes.writer_outline import writer_outline_node
+from .nodes.writer_draft import writer_draft_node
+from .nodes.editor import editor_node
+
+# ── 干预节点 ──────────────────────────────────────────────────────────────────
+
+async def pause_material_confirm(state: AIWritingState) -> dict:
+    """PAUSE-1：素材确认"""
+    pkg = state["material_package"]
+    user_input: dict = interrupt({
+        "pause_point": "material_confirm",
+        "message": "素材收集专家已完成素材搜集，请确认素材后继续。",
+        "materials": pkg["materials"],
+        "keywords": pkg["keywords"],
+        "summary": pkg["summary"],
+    })
+
+    action = user_input.get("action", "confirm")
+
+    if action == "confirm":
+        approved_ids = set(user_input.get("approvedMaterialIds") or [m["id"] for m in pkg["materials"]])
+        filtered = [m for m in pkg["materials"] if m["id"] in approved_ids]
+        updated_pkg = {**pkg, "materials": filtered}
+        return {
+            "material_package": updated_pkg,
+            "last_user_intervention": user_input,
+            "status": "writing_outline",
+            "progress_events": [{"type": "resumed", "agent_name": "系统", "message": "用户已确认素材，开始规划大纲"}],
+        }
+
+    # re_search：重新搜索
+    extra_kws = user_input.get("extraKeywords") or []
+    return {
+        "last_user_intervention": {**user_input, "_extra_keywords": extra_kws},
+        "status": "researching",
+        "progress_events": [{"type": "resumed", "agent_name": "系统", "message": "重新搜索中..."}],
+    }
+
+
+def _normalize_outline(outline: dict) -> dict:
+    """将前端回传的 camelCase 大纲统一为后端 snake_case 格式。"""
+    if not outline:
+        return outline
+    sections = []
+    for s in outline.get("sections", []):
+        sections.append({
+            "section_title": s.get("section_title") or s.get("sectionTitle", ""),
+            "key_points":    s.get("key_points")    or s.get("keyPoints", []),
+            "material_ids":  s.get("material_ids")  or s.get("materialIds", []),
+        })
+    return {"title": outline.get("title", ""), "sections": sections}
+
+
+async def pause_outline_confirm(state: AIWritingState) -> dict:
+    """PAUSE-2：大纲确认"""
+    user_input: dict = interrupt({
+        "pause_point": "outline_confirm",
+        "message": "作家已完成大纲规划，请确认或编辑大纲后继续。",
+        "outline": state["current_outline"],
+    })
+
+    action = user_input.get("action", "confirm")
+
+    if action == "confirm":
+        raw_outline = user_input.get("editedOutline") or state["current_outline"]
+        edited = _normalize_outline(raw_outline) if raw_outline else state["current_outline"]
+        return {
+            "current_outline": edited,
+            "last_user_intervention": user_input,
+            "status": "writing_draft",
+            "progress_events": [{"type": "resumed", "agent_name": "系统", "message": "用户已确认大纲，开始写作"}],
+        }
+
+    # re_outline
+    feedback = user_input.get("outlineFeedback", "")
+    return {
+        "last_user_intervention": {**user_input, "_feedback": feedback},
+        "status": "writing_outline",
+        "progress_events": [{"type": "resumed", "agent_name": "系统", "message": f"重新规划大纲（{feedback[:30]}）"}],
+    }
+
+
+async def pause_draft_confirm(state: AIWritingState) -> dict:
+    """PAUSE-3：草稿确认"""
+    draft = state["current_draft"]
+    user_input: dict = interrupt({
+        "pause_point": "draft_confirm",
+        "message": "草稿已完成，请确认或给出修改意见。",
+        "draft_title": draft["title"],
+        "revision_count": draft["revision_count"],
+        "review_result": state.get("review_result"),
+    })
+
+    action = user_input.get("action", "to_editor")
+
+    if action == "finalize":
+        return {
+            "last_user_intervention": user_input,
+            "status": "done",
+            "progress_events": [{"type": "resumed", "agent_name": "系统", "message": "用户确认定稿"}],
+        }
+
+    if action == "user_revise":
+        notes = user_input.get("userRevisionNotes", "")
+        return {
+            "last_user_intervention": {**user_input, "_user_notes": notes},
+            "revision_count": state.get("revision_count", 0) + 1,
+            "status": "revising",
+            "progress_events": [{"type": "resumed", "agent_name": "系统", "message": f"按用户意见重写（{notes[:30]}）"}],
+        }
+
+    # to_editor
+    return {
+        "last_user_intervention": user_input,
+        "status": "reviewing",
+        "progress_events": [{"type": "resumed", "agent_name": "系统", "message": "提交编辑审核"}],
+    }
+
+
+async def pause_review_confirm(state: AIWritingState) -> dict:
+    """PAUSE-4：编辑打回确认"""
+    user_input: dict = interrupt({
+        "pause_point": "review_confirm",
+        "message": "编辑认为文章需要修改，请决定下一步操作。",
+        "review_result": state["review_result"],
+        "revision_count": state.get("revision_count", 0),
+        "max_revisions": state.get("max_revisions", 3),
+    })
+
+    if user_input.get("overrideVerdict") or user_input.get("action") == "force_finalize":
+        return {
+            "last_user_intervention": user_input,
+            "status": "done",
+            "progress_events": [{"type": "resumed", "agent_name": "系统", "message": "用户强制定稿"}],
+        }
+
+    action = user_input.get("action", "accept_review")
+    extra_notes = user_input.get("userRevisionNotes", "")
+    return {
+        "last_user_intervention": {**user_input, "_extra_notes": extra_notes, "action": action},
+        "revision_count": state.get("revision_count", 0) + 1,
+        "status": "revising",
+        "progress_events": [{"type": "resumed", "agent_name": "系统", "message": "按编辑意见重写"}],
+    }
+
+
+# ── 条件路由 ──────────────────────────────────────────────────────────────────
+
+def after_material_pause(state: AIWritingState) -> str:
+    return "researcher" if state["status"] == "researching" else "writer_outline"
+
+
+def after_outline_pause(state: AIWritingState) -> str:
+    return "writer_outline" if state["status"] == "writing_outline" else "writer_draft"
+
+
+def after_draft_pause(state: AIWritingState) -> str:
+    status = state["status"]
+    if status == "done":
+        return "end"
+    if status == "revising":
+        return "writer_draft"
+    return "editor"
+
+
+def after_review(state: AIWritingState) -> str:
+    review = state.get("review_result") or {}
+    if review.get("verdict") == "pass":
+        return "pause_draft"
+    rev_count = state.get("revision_count", 0)
+    max_rev = state.get("max_revisions", 3)
+    if rev_count >= max_rev:
+        return "pause_draft"   # 超出上限，强制到草稿确认
+    return "pause_review"
+
+
+def after_review_pause(state: AIWritingState) -> str:
+    return "end" if state["status"] == "done" else "writer_draft"
+
+
+# ── 组装 Graph ────────────────────────────────────────────────────────────────
+
+def build_ai_writing_graph():
+    g = StateGraph(AIWritingState)
+
+    g.add_node("intent_parser",   intent_parser_node)
+    g.add_node("researcher",      researcher_node)
+    g.add_node("pause_material",  pause_material_confirm)
+    g.add_node("writer_outline",  writer_outline_node)
+    g.add_node("pause_outline",   pause_outline_confirm)
+    g.add_node("writer_draft",    writer_draft_node)
+    g.add_node("pause_draft",     pause_draft_confirm)
+    g.add_node("editor",          editor_node)
+    g.add_node("pause_review",    pause_review_confirm)
+
+    g.set_entry_point("intent_parser")
+    g.add_edge("intent_parser",  "researcher")
+    g.add_edge("researcher",     "pause_material")
+
+    g.add_conditional_edges("pause_material", after_material_pause,
+                             {"researcher": "researcher", "writer_outline": "writer_outline"})
+
+    g.add_edge("writer_outline", "pause_outline")
+    g.add_conditional_edges("pause_outline", after_outline_pause,
+                             {"writer_outline": "writer_outline", "writer_draft": "writer_draft"})
+
+    g.add_edge("writer_draft",   "pause_draft")
+    g.add_conditional_edges("pause_draft", after_draft_pause,
+                             {"end": END, "writer_draft": "writer_draft", "editor": "editor"})
+
+    g.add_conditional_edges("editor", after_review,
+                             {"pause_draft": "pause_draft", "pause_review": "pause_review"})
+
+    g.add_conditional_edges("pause_review", after_review_pause,
+                             {"end": END, "writer_draft": "writer_draft"})
+
+    checkpointer = MemorySaver()
+    return g.compile(checkpointer=checkpointer)
+
+
+AI_WRITING_GRAPH = build_ai_writing_graph()
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/__init__.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/_utils.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/_utils.py
new file mode 100644
index 00000000..f5877ecb
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/_utils.py
@@ -0,0 +1,232 @@
+"""节点共用工具：JSON 解析容错、LLM 创建。
+
+弱模型经常输出不规范 JSON（中文标点、结尾多余逗号、被 markdown 包裹、
+夹带解释文字、嵌套对象）。parse_json 用多级降级策略尽量抢救出结构化结果。
+"""
+from __future__ import annotations
+
+import json
+import logging
+import re
+
+from langchain_core.messages import HumanMessage, SystemMessage
+from langchain_core.runnables import RunnableConfig
+
+logger = logging.getLogger(__name__)
+
+
+def get_model(config: RunnableConfig):
+    from deerflow.models import create_chat_model
+    model_name = config.get("configurable", {}).get("model_name", "") or None
+    return create_chat_model(name=model_name)
+
+
+# 弱模型常把结构性标点写成中文全角符号，仅在常规解析失败后作为修复手段
+_FULLWIDTH_FIX = {
+    "“": '"',   # 左双引号 “
+    "”": '"',   # 右双引号 ”
+    "‘": "'",   # 左单引号 ‘
+    "’": "'",   # 右单引号 ’
+    "：": ":",   # 全角冒号 ：
+    "，": ",",   # 全角逗号 ，
+    "（": "(",   # 全角左括号 （
+    "）": ")",   # 全角右括号 ）
+    "｛": "{",   # 全角左花括号 ｛
+    "｝": "}",   # 全角右花括号 ｝
+    "［": "[",   # 全角左方括号 ［
+    "］": "]",   # 全角右方括号 ］
+    "【": "[",   # 黑方括号 【
+    "】": "]",   # 黑方括号 】
+}
+
+
+def _extract_balanced(text: str) -> str | None:
+    """从文本中提取第一个括号平衡的 {...} 块（支持嵌套，忽略字符串内的括号）。"""
+    start = text.find("{")
+    if start == -1:
+        return None
+    depth = 0
+    in_str = False
+    escape = False
+    for i in range(start, len(text)):
+        ch = text[i]
+        if escape:
+            escape = False
+            continue
+        if ch == "\\":
+            escape = True
+            continue
+        if ch == '"':
+            in_str = not in_str
+            continue
+        if in_str:
+            continue
+        if ch == "{":
+            depth += 1
+        elif ch == "}":
+            depth -= 1
+            if depth == 0:
+                return text[start:i + 1]
+    return None
+
+
+def _repair_json(text: str) -> str:
+    """尽力修复弱模型常见的 JSON 错误：全角标点、结尾多余逗号。"""
+    for bad, good in _FULLWIDTH_FIX.items():
+        text = text.replace(bad, good)
+    # 去掉对象/数组结尾多余的逗号： ,}  或  ,]
+    text = re.sub(r",(\s*[}\]])", r"\1", text)
+    return text
+
+
+def _try_load(text: str) -> dict | None:
+    try:
+        result = json.loads(text)
+    except Exception:
+        return None
+    return result if isinstance(result, dict) else None
+
+
+def parse_json(text: str, fallback: dict) -> dict:
+    """从 LLM 响应中提取 JSON 对象，多级降级，失败时返回 fallback。"""
+    if not text or not text.strip():
+        return fallback
+    text = text.strip()
+
+    # 1. 直接解析
+    if (r := _try_load(text)) is not None:
+        return r
+
+    # 2. markdown 代码块内容
+    m = re.search(r"```(?:json)?\s*(.+?)\s*```", text, re.DOTALL)
+    if m:
+        fenced = m.group(1).strip()
+        if (r := _try_load(fenced)) is not None:
+            return r
+        text = fenced  # 用代码块内容继续后续步骤
+
+    # 3. 平衡括号提取（处理夹带解释文字、嵌套对象的情况）
+    candidate = _extract_balanced(text)
+    if candidate:
+        if (r := _try_load(candidate)) is not None:
+            return r
+        # 4. 修复后再试
+        if (r := _try_load(_repair_json(candidate))) is not None:
+            return r
+
+    # 5. 整体修复后兜底
+    if (r := _try_load(_repair_json(text))) is not None:
+        return r
+
+    logger.warning("JSON parse failed, using fallback. raw=%r", text[:200])
+    return fallback
+
+
+def _content_to_text(content) -> str:
+    """将 LLM 响应内容统一为字符串（部分模型返回结构化 content 块列表）。"""
+    if isinstance(content, str):
+        return content
+    if isinstance(content, list):
+        return "".join(
+            part.get("text", "") if isinstance(part, dict) else str(part)
+            for part in content
+        )
+    return str(content)
+
+
+# 中文常见标点：参与「字数」统计，与 Word 字数统计 / 用户直觉口径对齐
+_CJK_PUNCTUATION = "，。、；：？！“”‘’（）《》【】「」『』〈〉—…·～"
+
+
+def count_words(text: str) -> int:
+    """统计中文语境下的「字数」。
+
+    口径：汉字逐字计 + 中文标点逐个计 + 连续数字/英文各算 1 字。
+    不计入空白、markdown 语法符号（# * - 等）与 ASCII 标点。
+    前后端共用同一口径（前端 utils/wordCount.ts 实现一致）。
+    """
+    if not text:
+        return 0
+    cjk = len(re.findall(r"[一-鿿]", text))
+    cjk_punct = sum(1 for c in text if c in _CJK_PUNCTUATION)
+    alnum_runs = len(re.findall(r"[A-Za-z0-9]+", text))
+    return cjk + cjk_punct + alnum_runs
+
+
+class ThinkTagParser:
+    """流式 <think>...</think> 标签解析器。
+
+    模型可能在任意 chunk 边界截断标签，通过尾部缓冲处理跨 chunk 边界情况。
+    调用 feed(chunk) 返回 list[tuple[bool, str]]，每项为 (is_thinking, text)。
+    """
+
+    _OPEN_TAG = "<think>"
+    _CLOSE_TAG = "</think>"
+
+    def __init__(self) -> None:
+        self._in_think = False
+        self._buf = ""  # 潜在标签的部分匹配缓冲
+
+    def feed(self, chunk: str) -> list[tuple[bool, str]]:
+        """处理一个流式 chunk，返回 (is_thinking, text) 片段列表。"""
+        self._buf += chunk
+        result: list[tuple[bool, str]] = []
+
+        while self._buf:
+            if self._in_think:
+                tag = self._CLOSE_TAG
+                idx = self._buf.find(tag)
+                if idx != -1:
+                    if idx > 0:
+                        result.append((True, self._buf[:idx]))
+                    self._buf = self._buf[idx + len(tag):]
+                    self._in_think = False
+                else:
+                    partial = self._partial_suffix(self._buf, tag)
+                    if partial:
+                        result.append((True, self._buf[:-partial]))
+                        self._buf = self._buf[-partial:]
+                    else:
+                        result.append((True, self._buf))
+                        self._buf = ""
+                    break
+            else:
+                tag = self._OPEN_TAG
+                idx = self._buf.find(tag)
+                if idx != -1:
+                    if idx > 0:
+                        result.append((False, self._buf[:idx]))
+                    self._buf = self._buf[idx + len(tag):]
+                    self._in_think = True
+                else:
+                    partial = self._partial_suffix(self._buf, tag)
+                    if partial:
+                        result.append((False, self._buf[:-partial]))
+                        self._buf = self._buf[-partial:]
+                    else:
+                        result.append((False, self._buf))
+                        self._buf = ""
+                    break
+
+        return [(is_t, t) for (is_t, t) in result if t]
+
+    @staticmethod
+    def _partial_suffix(text: str, tag: str) -> int:
+        """返回 text 尾部与 tag 前缀匹配的最长长度（>0 说明可能是部分标签）。"""
+        max_check = min(len(tag) - 1, len(text))
+        for length in range(max_check, 0, -1):
+            if tag.startswith(text[-length:]):
+                return length
+        return 0
+
+
+async def llm_json(system: str, user: str, fallback: dict, config: RunnableConfig) -> dict:
+    """调用 LLM，解析 JSON 输出，失败用 fallback。"""
+    model = get_model(config)
+    messages = [SystemMessage(content=system), HumanMessage(content=user)]
+    try:
+        resp = await model.ainvoke(messages)
+        return parse_json(_content_to_text(resp.content), fallback)
+    except Exception as e:
+        logger.error("llm_json failed: %s", e, exc_info=True)
+        return {**fallback, "_llm_error": str(e)}
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/editor.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/editor.py
new file mode 100644
index 00000000..438dac98
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/editor.py
@@ -0,0 +1,168 @@
+"""编辑节点：三项独立 LLM 审查（事实/逻辑/语言），逐 token 流式推送以支持打字机效果。"""
+from __future__ import annotations
+
+import asyncio
+import logging
+
+from langchain_core.messages import HumanMessage, SystemMessage
+from langchain_core.runnables import RunnableConfig
+
+from ..state import AIWritingState, ReviewResult, ReviewIssue
+from ..prompts.editor_prompts import (
+    EDITOR_SYSTEM, FACT_REVIEW_USER, LOGIC_REVIEW_USER, LANGUAGE_REVIEW_USER,
+)
+from ._utils import get_model, parse_json, _content_to_text, ThinkTagParser
+
+logger = logging.getLogger(__name__)
+
+_DEFAULT_PASS_THRESHOLD = 75
+
+
+def _materials_summary(pkg: dict) -> str:
+    lines = []
+    for m in (pkg.get("materials") or [])[:6]:
+        lines.append(f"[{m['id']}] {m['title']}: {m['content'][:200]}")
+    return "\n".join(lines) or "（无素材）"
+
+
+def _parse_issues(raw_issues: list, category: str) -> list[ReviewIssue]:
+    issues = []
+    for item in (raw_issues or []):
+        issues.append(ReviewIssue(
+            category=category,
+            severity=item.get("severity", "minor"),
+            location=item.get("location", ""),
+            issue=item.get("issue", ""),
+            suggestion=item.get("suggestion", ""),
+        ))
+    return issues
+
+
+async def _stream_one_review(
+    model, user_prompt: str, category: str,
+    sse_queue: asyncio.Queue | None, session_id: str,
+) -> str:
+    """流式执行单项审查，逐 chunk 推送 review_chunk 事件，返回累积的正文文本（用于 JSON 解析）。"""
+    full_text = ""  # 仅累积正文（非思考），供后续 JSON 解析
+    parser = ThinkTagParser()
+    async for chunk in model.astream([
+        SystemMessage(content=EDITOR_SYSTEM),
+        HumanMessage(content=user_prompt),
+    ]):
+        delta = _content_to_text(chunk.content)
+        if not delta:
+            continue
+        for is_thinking, text in parser.feed(delta):
+            if not is_thinking:
+                full_text += text
+            if sse_queue is not None:
+                await sse_queue.put(("review_chunk", {
+                    "session_id": session_id,
+                    "category": category,
+                    "text": text,
+                    "is_thinking": is_thinking,
+                }))
+    return full_text
+
+
+async def editor_node(state: AIWritingState, config: RunnableConfig) -> dict:
+    draft = state.get("current_draft")
+    if not draft:
+        return {
+            "status": "error",
+            "progress_events": [{"type": "error", "agent_name": "编辑", "message": "草稿为空，无法审核"}],
+        }
+
+    article = draft["full_markdown"]
+    pkg = state.get("material_package") or {}
+    mats = _materials_summary(pkg)
+
+    cfg = config.get("configurable", {})
+    sse_queue: asyncio.Queue | None = cfg.get("sse_queue")
+    session_id: str = cfg.get("sse_session_id", "")
+    ai_writing_config = cfg.get("ai_writing_config", {}) or {}
+    pass_threshold = int(ai_writing_config.get("pass_threshold", _DEFAULT_PASS_THRESHOLD))
+
+    REVIEW_TASKS = [
+        ("fact",     FACT_REVIEW_USER.format(materials_summary=mats, article=article)),
+        ("logic",    LOGIC_REVIEW_USER.format(article=article)),
+        ("language", LANGUAGE_REVIEW_USER.format(article=article)),
+    ]
+
+    model = get_model(config)
+    results: dict[str, dict] = {}
+    review_errors: list[str] = []  # 分项审查的模型异常，供完成后非致命提示
+
+    _CATEGORY_LABEL = {"fact": "事实性", "logic": "逻辑性", "language": "语言文字"}
+
+    for category, user_prompt in REVIEW_TASKS:
+        fallback = {"score": 80, "issues": []}
+        try:
+            full_text = await _stream_one_review(model, user_prompt, category, sse_queue, session_id)
+            res = parse_json(full_text, fallback)
+        except Exception as e:
+            logger.warning("editor review [%s] failed: %s", category, e)
+            res = fallback
+            review_errors.append(f"「{_CATEGORY_LABEL.get(category, category)}审查」{type(e).__name__}: {e}")
+
+        results[category] = res
+
+        # 这一项审查完成 —— 推送结构化结果（前端据此把流式文本替换为评分/意见）
+        if sse_queue is not None:
+            issues = _parse_issues(res.get("issues", []), category)
+            await sse_queue.put(("review_item_done", {
+                "session_id": session_id,
+                "category": category,
+                "score": int(res.get("score", 80)),
+                "issues": [dict(iss) for iss in issues],
+            }))
+        else:
+            logger.debug("editor [%s] done (no sse_queue)", category)
+
+    # 汇总
+    fact_score    = int(results["fact"].get("score", 80))
+    logic_score   = int(results["logic"].get("score", 80))
+    lang_score    = int(results["language"].get("score", 80))
+    overall_score = (fact_score + logic_score + lang_score) // 3
+
+    all_issues: list[ReviewIssue] = (
+        _parse_issues(results["fact"].get("issues", []),     "fact") +
+        _parse_issues(results["logic"].get("issues", []),    "logic") +
+        _parse_issues(results["language"].get("issues", []), "language")
+    )
+    all_issues.sort(key=lambda x: (0 if x["severity"] == "major" else 1))
+
+    verdict = "pass" if overall_score >= pass_threshold else "reject"
+
+    review = ReviewResult(
+        verdict=verdict,
+        fact_score=fact_score,
+        logic_score=logic_score,
+        language_score=lang_score,
+        overall_score=overall_score,
+        pass_threshold=pass_threshold,
+        revision_notes=all_issues,
+    )
+
+    # 分项审查出现模型异常时，以非致命 notice 提示用户，审核结论仍照常产出
+    notices: list[dict] = []
+    if review_errors:
+        notices.append({
+            "type": "notice",
+            "agent_name": "编辑",
+            "title": "模型错误",
+            "detail": "部分审查项调用失败，已按默认分兜底。原因：" + "；".join(review_errors[:3]),
+        })
+
+    return {
+        "review_result": review,
+        "progress_events": [
+            {"type": "step_start", "agent_name": "编辑", "message": "开始审核"},
+            *notices,
+            {
+                "type": "review_ready",
+                "agent_name": "编辑",
+                "message": f"审核完成，综合得分 {overall_score}，结论：{'通过' if verdict == 'pass' else '打回修改'}",
+            },
+        ],
+    }
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/intent_parser.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/intent_parser.py
new file mode 100644
index 00000000..a575d902
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/intent_parser.py
@@ -0,0 +1,92 @@
+"""意图解析节点：将用户自然语言意图结构化为写作配置。"""
+from __future__ import annotations
+
+from langchain_core.runnables import RunnableConfig
+
+from ..state import AIWritingState
+from ._utils import llm_json
+
+# 兜底类型列表，当 config 中未注入 valid_article_types 时使用
+_DEFAULT_ARTICLE_TYPES: list[dict] = [
+    {"key": "news",     "label": "新闻资讯"},
+    {"key": "analysis", "label": "分析报道"},
+    {"key": "feature",  "label": "深度特稿"},
+    {"key": "report",   "label": "调研报告"},
+]
+
+_SYSTEM_TEMPLATE = """你是一名写作助手。
+你的任务：分析用户的写作意图，提取结构化的写作配置。
+
+【输出要求】
+- 只输出一个 JSON 对象，不要任何解释文字，不要 markdown 代码块。
+- 必须使用英文双引号 "。
+- article_type 只能是以下之一：{type_options}。
+
+【完整示例】
+输入意图：帮我写一篇面向行业专家的深度文章，分析今年新能源汽车出口为什么大涨，大概两千字
+正确输出：
+{{"article_type": "feature", "target_audience": "行业专家", "word_count_target": 2000, "refined_intent": "分析今年新能源汽车出口高速增长的原因"}}"""
+
+_USER_TEMPLATE = """用户写作意图：{user_intent}
+
+请分析并输出以下 JSON（如果意图中未明确某字段，给出合理默认值）：
+{{{{
+  "article_type": "{type_options} 之一",
+  "target_audience": "目标读者描述",
+  "word_count_target": 800,
+  "refined_intent": "精炼后的写作意图（一句话）"
+}}}}"""
+
+
+def _build_type_options(types: list[dict]) -> str:
+    """将类型列表格式化为提示词中的枚举说明，如 news（新闻资讯）/ analysis（分析报道）。"""
+    return " / ".join(f'{t["key"]}（{t["label"]}）' for t in types)
+
+
+async def intent_parser_node(state: AIWritingState, config: RunnableConfig) -> dict:
+    # 从 configurable 读取动态类型列表，未配置时退回默认值
+    configurable = (config or {}).get("configurable", {})
+    valid_article_types: list[dict] = configurable.get("valid_article_types") or _DEFAULT_ARTICLE_TYPES
+    valid_keys: list[str] = [t["key"] for t in valid_article_types]
+    default_key: str = valid_keys[0] if valid_keys else "analysis"
+
+    type_options = _build_type_options(valid_article_types)
+    system = _SYSTEM_TEMPLATE.format(type_options=type_options)
+    user = _USER_TEMPLATE.format(
+        user_intent=state["user_intent"],
+        type_options=" | ".join(valid_keys),
+    )
+
+    fallback_type = state.get("article_type", default_key)
+    if fallback_type not in valid_keys:
+        fallback_type = default_key
+
+    result = await llm_json(
+        system,
+        user,
+        fallback={
+            "article_type": fallback_type,
+            "target_audience": state.get("target_audience", "普通读者"),
+            "word_count_target": state.get("word_count_target", 800),
+            "refined_intent": state["user_intent"],
+        },
+        config=config,
+    )
+
+    updates: dict = {
+        "status": "researching",
+        "progress_events": [{"type": "step_done", "agent_name": "系统", "message": "意图解析完成"}],
+    }
+
+    # 校验 LLM 返回的 article_type 是否在有效范围内，不合法时回退到默认值
+    raw_type = result.get("article_type", "")
+    updates["article_type"] = raw_type if raw_type in valid_keys else fallback_type
+
+    if result.get("target_audience"):
+        updates["target_audience"] = result["target_audience"]
+    if result.get("word_count_target"):
+        updates["word_count_target"] = int(result["word_count_target"])
+    if result.get("refined_intent"):
+        updates["user_intent"] = result["refined_intent"]
+
+    return updates
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py
new file mode 100644
index 00000000..3b8f19b4
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/researcher.py
@@ -0,0 +1,179 @@
+"""素材收集专家节点：关键词提取 → 并发搜索 → 相关度排序。"""
+from __future__ import annotations
+
+import asyncio
+import logging
+import uuid
+from typing import List
+
+from langchain_core.runnables import RunnableConfig
+
+from ..search import get_search_provider, SearchResult
+from ..state import AIWritingState, Material, MaterialPackage
+from ..prompts.researcher_prompts import (
+    EXTRACT_KEYWORDS_SYSTEM, EXTRACT_KEYWORDS_USER,
+    RANK_MATERIALS_SYSTEM, RANK_MATERIALS_USER,
+)
+from ._utils import llm_json
+
+logger = logging.getLogger(__name__)
+
+_MAX_MATERIALS = 12
+
+
+def _notice(title: str, detail: str) -> dict:
+    """构造一个非致命告警事件，前端在时间线显示「标题 + 真实原因」，不打断写作流程。"""
+    return {"type": "notice", "agent_name": "素材收集专家", "title": title, "detail": detail}
+
+
+async def researcher_node(state: AIWritingState, config: RunnableConfig) -> dict:
+    intent = state["user_intent"]
+    article_type = state.get("article_type", "analysis")
+    target_audience = state.get("target_audience", "普通读者")
+
+    # 检查是否是补充搜索（PAUSE-1 re_search action）
+    intervention = state.get("last_user_intervention") or {}
+    extra_keywords: list[str] = intervention.get("_extra_keywords") or intervention.get("extra_keywords") or []
+
+    # SSE 实时进度推送（与 outline/draft 节点共用 sse_queue 机制）
+    cfg = config.get("configurable", {})
+    sse_queue = cfg.get("sse_queue")
+    sse_session_id: str = cfg.get("sse_session_id", "")
+
+    async def _emit(message: str) -> None:
+        if sse_queue is None:
+            return
+        await sse_queue.put(("research_progress", {
+            "session_id": sse_session_id,
+            "message": message,
+        }))
+
+    # Step 1: 提取关键词
+    await _emit("正在生成检索词…")
+    kw_result = await llm_json(
+        EXTRACT_KEYWORDS_SYSTEM,
+        EXTRACT_KEYWORDS_USER.format(
+            user_intent=intent,
+            article_type=article_type,
+            target_audience=target_audience,
+        ),
+        fallback={"keywords": [intent]},
+        config=config,
+    )
+    keywords: list[str] = kw_result.get("keywords", [intent])
+    if extra_keywords:
+        keywords = list(dict.fromkeys(keywords + extra_keywords))
+
+    # Step 2: 并发搜索
+    ai_writing_config = config.get("configurable", {}).get("ai_writing_config", {})
+    provider = get_search_provider(ai_writing_config)
+
+    search_keywords = keywords[:6]
+    total = len(search_keywords)
+    await _emit(f"检索词已生成，开始检索 {total} 个方向…")
+
+    # 并发搜索，但每完成一个就推送进度（计数在单线程 asyncio 下无需加锁）
+    completed = 0
+
+    async def _search_one(kw: str) -> list[SearchResult]:
+        nonlocal completed
+        try:
+            return await provider.search(kw, max_results=3)
+        finally:
+            completed += 1
+            if completed < total:
+                await _emit(f"已完成 {completed}/{total} 次检索，正在继续检索相关内容…")
+            else:
+                await _emit(f"已完成全部 {total} 次检索")
+
+    search_tasks = [_search_one(kw) for kw in search_keywords]
+    all_results_nested: list[list[SearchResult]] = await asyncio.gather(*search_tasks, return_exceptions=True)
+
+    # 合并去重
+    seen_urls: set[str] = set()
+    raw_materials: list[Material] = []
+    existing_pkg = state.get("material_package")
+    if existing_pkg and intervention.get("action") != "re_search":
+        for m in existing_pkg.get("materials", []):
+            seen_urls.add(m.get("url", ""))
+            raw_materials.append(m)
+
+    search_errors: list[str] = []
+    for results in all_results_nested:
+        if isinstance(results, Exception):
+            logger.warning("search failed: %s", results)
+            search_errors.append(f"{type(results).__name__}: {results}")
+            continue
+        for r in results:
+            if r.url and r.url in seen_urls:
+                continue
+            seen_urls.add(r.url)
+            raw_materials.append(Material(
+                id=f"m{len(raw_materials)+1:03d}",
+                title=r.title,
+                content=r.content[:500],
+                source=r.source,
+                published_at=r.published_at,
+                relevance_score=r.relevance_score,
+                source_type=r.source_type,
+                url=r.url,
+                recUuid=r.recUuid,
+            ))
+
+    # provider 内部吞掉的检索异常（如内网 ES 连接失败），一并取出用于提示用户
+    search_errors.extend(getattr(provider, "errors", []))
+
+    # Step 3: 相关度排序（如素材较多，让 LLM 排序）
+    await _emit("检索完成，正在筛选排序素材…")
+    rank_error = ""
+    if len(raw_materials) > _MAX_MATERIALS:
+        materials_list = "\n".join(
+            f"- ID: {m['id']}  标题: {m['title']}  摘要: {m['content'][:100]}"
+            for m in raw_materials
+        )
+        rank_result = await llm_json(
+            RANK_MATERIALS_SYSTEM,
+            RANK_MATERIALS_USER.format(user_intent=intent, materials_list=materials_list),
+            fallback={"ranked_ids": [m["id"] for m in raw_materials[:_MAX_MATERIALS]], "summary": f"共搜索到{len(raw_materials)}条素材"},
+            config=config,
+        )
+        rank_error = rank_result.get("_llm_error", "")
+        ranked_ids: list[str] = rank_result.get("ranked_ids", [m["id"] for m in raw_materials])
+        id_to_mat = {m["id"]: m for m in raw_materials}
+        sorted_materials = [id_to_mat[mid] for mid in ranked_ids if mid in id_to_mat]
+        # 加入未被排序的素材
+        sorted_ids_set = set(ranked_ids)
+        for m in raw_materials:
+            if m["id"] not in sorted_ids_set:
+                sorted_materials.append(m)
+        materials = sorted_materials[:_MAX_MATERIALS]
+        summary = rank_result.get("summary", f"共搜索到{len(raw_materials)}条素材，精选{len(materials)}条")
+    else:
+        materials = sorted(raw_materials, key=lambda m: m.get("relevance_score", 0), reverse=True)[:_MAX_MATERIALS]
+        summary = f"共搜索到{len(raw_materials)}条素材，精选{len(materials)}条"
+
+    # 空结果兜底：未检索到任何素材时给出明确文案，前端据此弹出「无数据继续」选项
+    if not materials:
+        summary = "未检索到相关素材，可重新搜索或在无素材的情况下继续写作"
+
+    pkg = MaterialPackage(keywords=keywords, materials=materials, summary=summary)
+
+    # 容错告警：检索接口 / 模型调用出错时以非致命 notice 提示用户，不打断写作流程
+    notices: list[dict] = []
+    if kw_result.get("_llm_error"):
+        notices.append(_notice("模型错误", f"检索词生成失败，已用默认关键词兜底。原因：{kw_result['_llm_error']}"))
+    if rank_error:
+        notices.append(_notice("模型错误", f"素材排序失败，已按相关度兜底排序。原因：{rank_error}"))
+    if search_errors:
+        uniq = list(dict.fromkeys(search_errors))
+        notices.append(_notice("ES 波动导致检索异常", "；".join(uniq[:3])))
+
+    return {
+        "material_package": pkg,
+        "status": "awaiting_material_confirm",
+        "progress_events": [
+            {"type": "step_start", "agent_name": "素材收集专家", "message": f"搜索关键词：{', '.join(keywords[:3])}"},
+            *notices,
+            {"type": "materials_ready", "agent_name": "素材收集专家", "message": summary},
+        ],
+    }
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/writer_draft.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/writer_draft.py
new file mode 100644
index 00000000..bf3da60f
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/writer_draft.py
@@ -0,0 +1,222 @@
+"""作家节点 Phase 2：按大纲逐段写正文，支持流式 chunk 输出。"""
+from __future__ import annotations
+
+import asyncio
+import logging
+
+from langchain_core.messages import HumanMessage, SystemMessage
+from langchain_core.runnables import RunnableConfig
+
+from ..state import AIWritingState, DraftArticle
+from ..prompts.writer_prompts import DRAFT_SECTION_SYSTEM, DRAFT_SECTION_USER, DRAFT_EXPAND_USER
+from ._utils import get_model, _content_to_text, count_words, ThinkTagParser
+
+logger = logging.getLogger(__name__)
+
+
+def _get_section_materials(material_ids: list[str], pkg: dict) -> str:
+    mat_map = {m["id"]: m for m in pkg.get("materials", [])}
+    lines = []
+    for mid in material_ids:
+        if mid in mat_map:
+            m = mat_map[mid]
+            lines.append(f"[{mid}] {m['title']}: {m['content'][:300]}")
+    if not lines:
+        for m in pkg.get("materials", [])[:2]:
+            lines.append(f"[{m['id']}] {m['title']}: {m['content'][:300]}")
+    return "\n".join(lines) if lines else "（无相关素材）"
+
+
+async def writer_draft_node(state: AIWritingState, config: RunnableConfig) -> dict:
+    outline = state.get("current_outline")
+    if not outline:
+        return {
+            "status": "error",
+            "progress_events": [{"type": "error", "agent_name": "作家", "message": "大纲为空，无法写作"}],
+        }
+
+    pkg = state.get("material_package") or {"keywords": [], "materials": [], "summary": ""}
+    intervention = state.get("last_user_intervention") or {}
+    revision_count = state.get("revision_count", 0)
+
+    # SSE 流式推送所需
+    cfg = config.get("configurable", {})
+    sse_queue: asyncio.Queue | None = cfg.get("sse_queue")
+    session_id: str = cfg.get("sse_session_id", "")
+
+    # 修改意见（来自用户或编辑）
+    revision_notes = ""
+    if intervention.get("action") == "user_revise":
+        notes = intervention.get("_user_notes") or intervention.get("user_revision_notes", "")
+        if notes:
+            revision_notes = f"\n用户修改意见：{notes}"
+    elif intervention.get("action") in ("accept_review", "custom_revise"):
+        review = state.get("review_result") or {}
+        issues = review.get("revision_notes", [])
+        extra = intervention.get("_extra_notes") or intervention.get("user_revision_notes", "")
+        parts = []
+        for iss in issues[:5]:
+            parts.append(f"- [{iss.get('severity','minor')}] {iss.get('location','')}: {iss.get('suggestion','')}")
+        if extra:
+            parts.append(f"- 用户补充：{extra}")
+        if parts:
+            revision_notes = "\n修改要求：\n" + "\n".join(parts)
+
+    word_count_target = state.get("word_count_target", 800)
+    sections = outline.get("sections", [])
+    n_sections = max(len(sections), 1)
+    # 单节硬下限：总目标 / 节数，乘 1.1 过量系数补偿模型对短目标的天然欠量；单节至少 150 字
+    words_per_section = max(150, int(word_count_target * 1.1 / n_sections))
+    article_title = outline.get("title", "文章")
+
+    # 兼容后端 snake_case 与前端编辑后回传的 camelCase
+    def _section_title(idx: int, sec: dict) -> str:
+        return sec.get("section_title") or sec.get("sectionTitle") or f"章节{idx + 1}"
+
+    model = get_model(config)
+    section_titles: list[str] = []
+    section_bufs: list[str] = []   # 各章节正文（不含 ## 标题），供扩写兜底逐节替换
+    section_errors: list[str] = []  # 分节写作的模型异常，供完成后非致命提示
+
+    for i, section in enumerate(sections):
+        sec_title  = _section_title(i, section)
+        key_points = section.get("key_points") or section.get("keyPoints") or []
+        mat_ids    = section.get("material_ids") or section.get("materialIds") or []
+
+        section_materials = _get_section_materials(mat_ids, pkg)
+        key_points_str = "\n".join(f"- {p}" for p in key_points)
+
+        # 文章整体结构：让作家看到全文章节与自己的定位，避免章节间内容重复、引言结论脱节
+        outline_context = "\n".join(
+            f"{j + 1}. {_section_title(j, s)}" + ("  ← 当前正在写这一章" if j == i else "")
+            for j, s in enumerate(sections)
+        )
+
+        user_msg = DRAFT_SECTION_USER.format(
+            article_title=article_title,
+            outline_context=outline_context,
+            section_title=sec_title,
+            key_points=key_points_str,
+            section_materials=section_materials,
+            revision_section=revision_notes,
+            target_words=words_per_section,
+        )
+
+        section_buf = ""   # 只累积正文（非思考）用于拼接 Markdown
+        parser = ThinkTagParser()
+        try:
+            async for chunk in model.astream([
+                SystemMessage(content=DRAFT_SECTION_SYSTEM),
+                HumanMessage(content=user_msg),
+            ]):
+                delta = _content_to_text(chunk.content)
+                if not delta:
+                    continue
+                for is_thinking, text in parser.feed(delta):
+                    if not is_thinking:
+                        section_buf += text
+                    if sse_queue is not None:
+                        await sse_queue.put(("draft_chunk", {
+                            "session_id": session_id,
+                            "section_index": i,
+                            "section_title": sec_title,
+                            "text": text,
+                            "is_thinking": is_thinking,
+                            "is_section_done": False,
+                        }))
+
+            # 章节完成
+            if sse_queue is not None:
+                await sse_queue.put(("draft_chunk", {
+                    "session_id": session_id,
+                    "section_index": i,
+                    "section_title": sec_title,
+                    "text": "",
+                    "is_section_done": True,
+                }))
+
+            section_titles.append(sec_title)
+            section_bufs.append(section_buf.strip())
+
+        except Exception as e:
+            logger.error("draft section [%s] failed: %s", sec_title, e, exc_info=True)
+            section_titles.append(sec_title)
+            section_bufs.append("（内容生成失败，请重试）")
+            section_errors.append(f"「{sec_title}」{type(e).__name__}: {e}")
+
+    def _assemble() -> str:
+        body = "\n\n".join(f"## {t}\n\n{b}" for t, b in zip(section_titles, section_bufs))
+        return f"# {article_title}\n\n{body}"
+
+    full_markdown = _assemble()
+    word_count = count_words(full_markdown)
+
+    # 扩写兜底：总字数不足目标 90% 时，重写并扩充最短的章节（单轮，非流式）
+    if section_bufs and word_count < word_count_target * 0.9:
+        idx = min(range(len(section_bufs)), key=lambda k: count_words(section_bufs[k]))
+        target_sec = sections[idx]
+        expand_target = count_words(section_bufs[idx]) + (word_count_target - word_count)
+        try:
+            expand_msg = DRAFT_EXPAND_USER.format(
+                article_title=article_title,
+                section_title=section_titles[idx],
+                key_points="\n".join(
+                    f"- {p}" for p in (target_sec.get("key_points") or target_sec.get("keyPoints") or [])
+                ),
+                section_materials=_get_section_materials(
+                    target_sec.get("material_ids") or target_sec.get("materialIds") or [], pkg
+                ),
+                existing_text=section_bufs[idx],
+                target_words=expand_target,
+            )
+            resp = await model.ainvoke([
+                SystemMessage(content=DRAFT_SECTION_SYSTEM),
+                HumanMessage(content=expand_msg),
+            ])
+            parser = ThinkTagParser()
+            expanded = "".join(
+                t for is_thinking, t in parser.feed(_content_to_text(resp.content)) if not is_thinking
+            ).strip()
+            # 仅在扩写确实更长时才采用，避免越改越短
+            if count_words(expanded) > count_words(section_bufs[idx]):
+                section_bufs[idx] = expanded
+                full_markdown = _assemble()
+                word_count = count_words(full_markdown)
+        except Exception as e:
+            logger.warning("draft expand failed for section [%s]: %s", section_titles[idx], e)
+
+    draft = DraftArticle(
+        title=outline.get("title", "文章"),
+        outline=outline,
+        full_markdown=full_markdown,
+        word_count=word_count,
+        revision_count=revision_count,
+    )
+
+    # 分节写作出现模型异常时，以非致命 notice 提示用户，草稿仍照常产出
+    notices: list[dict] = []
+    if section_errors:
+        notices.append({
+            "type": "notice",
+            "agent_name": "作家",
+            "title": "模型错误",
+            "detail": "部分章节生成失败，对应段落已占位。原因：" + "；".join(section_errors[:3]),
+        })
+
+    return {
+        "current_draft": draft,
+        "drafts": [draft],
+        "status": "awaiting_draft_confirm",
+        "progress_events": [
+            {"type": "step_start", "agent_name": "作家", "message": f"开始写作（第{revision_count+1}稿）"},
+            *notices,
+            {
+                "type": "draft_ready",
+                "agent_name": "作家",
+                "message": f"草稿完成，共 {word_count} 字",
+                "draft_title": outline.get("title", "文章"),
+                "draft_markdown": full_markdown,
+                "revision_count": revision_count,
+            },
+        ],
+    }
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/writer_outline.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/writer_outline.py
new file mode 100644
index 00000000..404f9d5d
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/nodes/writer_outline.py
@@ -0,0 +1,119 @@
+"""作家节点 Phase 1：生成文章大纲，支持流式 chunk 输出。"""
+from __future__ import annotations
+
+import asyncio
+import logging
+
+from langchain_core.messages import HumanMessage, SystemMessage
+from langchain_core.runnables import RunnableConfig
+
+from ..state import AIWritingState, Outline, OutlineSection
+from ..prompts.writer_prompts import OUTLINE_SYSTEM, OUTLINE_USER
+from ._utils import get_model, parse_json, _content_to_text, ThinkTagParser
+
+logger = logging.getLogger(__name__)
+
+# 上下文压缩：传给大纲规划的素材摘要做条数和单条长度双重截断，防止 token 溢出。
+_MAX_OUTLINE_MATERIALS = 12
+_MATERIAL_SNIPPET_CHARS = 150
+
+
+def _materials_summary(pkg: dict) -> str:
+    lines = []
+    for m in pkg.get("materials", [])[:_MAX_OUTLINE_MATERIALS]:
+        lines.append(f"[{m['id']}] {m['title']} | {m['source']} | {m['content'][:_MATERIAL_SNIPPET_CHARS]}")
+    return "\n".join(lines) or "（无素材）"
+
+
+def _parse_outline(raw: dict) -> Outline:
+    sections = []
+    for s in raw.get("sections", []):
+        sections.append(OutlineSection(
+            section_title=s.get("section_title", ""),
+            key_points=s.get("key_points", []),
+            material_ids=s.get("material_ids", []),
+        ))
+    if not sections:
+        sections = [OutlineSection(section_title="正文", key_points=["主要内容"], material_ids=[])]
+    return Outline(title=raw.get("title", "未命名文章"), sections=sections)
+
+
+async def writer_outline_node(state: AIWritingState, config: RunnableConfig) -> dict:
+    pkg = state.get("material_package") or {"keywords": [], "materials": [], "summary": ""}
+    intervention = state.get("last_user_intervention") or {}
+
+    feedback_section = ""
+    if intervention.get("action") == "re_outline" and intervention.get("_feedback"):
+        feedback_section = f"\n重新规划要求：{intervention['_feedback']}"
+    elif intervention.get("outline_feedback"):
+        feedback_section = f"\n重新规划要求：{intervention['outline_feedback']}"
+
+    user_prompt = OUTLINE_USER.format(
+        user_intent=state["user_intent"],
+        article_type=state.get("article_type", "analysis"),
+        target_audience=state.get("target_audience", "普通读者"),
+        word_count_target=state.get("word_count_target", 800),
+        materials_summary=_materials_summary(pkg),
+        feedback_section=feedback_section,
+    )
+
+    # SSE 流式推送
+    cfg = config.get("configurable", {})
+    sse_queue: asyncio.Queue | None = cfg.get("sse_queue")
+    session_id: str = cfg.get("sse_session_id", "")
+
+    model = get_model(config)
+    full_text = ""   # 只累积正文（非思考）用于 JSON 解析
+    parser = ThinkTagParser()
+
+    try:
+        async for chunk in model.astream([
+            SystemMessage(content=OUTLINE_SYSTEM),
+            HumanMessage(content=user_prompt),
+        ]):
+            delta = _content_to_text(chunk.content)
+            if not delta:
+                continue
+            for is_thinking, text in parser.feed(delta):
+                if not is_thinking:
+                    full_text += text
+                if sse_queue is not None:
+                    await sse_queue.put(("outline_chunk", {
+                        "session_id": session_id,
+                        "text": text,
+                        "is_thinking": is_thinking,
+                    }))
+    except Exception as e:
+        logger.error("outline streaming failed: %s", e, exc_info=True)
+        return {
+            "status": "error",
+            "progress_events": [{
+                "type": "error",
+                "agent_name": "作家",
+                "title": "模型错误",
+                "detail": str(e),
+                "message": "大纲生成失败",
+            }],
+        }
+
+    fallback = {
+        "title": "未命名文章",
+        "sections": [
+            {"section_title": "引言", "key_points": ["背景介绍"], "material_ids": []},
+            {"section_title": "正文", "key_points": ["核心内容"], "material_ids": []},
+            {"section_title": "结论", "key_points": ["总结"], "material_ids": []},
+        ],
+    }
+    result = parse_json(full_text, fallback)
+
+    outline = _parse_outline(result)
+    section_count = len(outline["sections"])
+
+    return {
+        "current_outline": outline,
+        "status": "awaiting_outline_confirm",
+        "progress_events": [
+            {"type": "step_start", "agent_name": "作家", "message": "开始规划大纲"},
+            {"type": "outline_ready", "agent_name": "作家", "message": f"大纲已生成，共 {section_count} 个章节"},
+        ],
+    }
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/prompts/__init__.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/prompts/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/prompts/editor_prompts.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/prompts/editor_prompts.py
new file mode 100644
index 00000000..fe826363
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/prompts/editor_prompts.py
@@ -0,0 +1,52 @@
+EDITOR_SYSTEM = """你是一名资深主编（编辑），标准极高，要求严格。
+你的目标：审查文章质量，给出客观评分和具体修改意见。
+你的工作背景：你在一家权威媒体担任主编十五年，见过各种质量的文章。
+
+你只能做以下事情：
+1. 从指定维度审查文章
+2. 给出该维度的评分（0-100 的整数）和具体问题列表
+你不能改写文章，只做当前指定维度的审查。
+
+【输出要求】
+- 只输出一个 JSON 对象，不要任何解释文字，不要 markdown 代码块。
+- 必须使用英文双引号 "。
+- score 是 0-100 的整数。
+- 每个问题的 severity 必须是 "major"（必须修改）或 "minor"（建议修改）。
+- 文章在该维度没有问题时，issues 填空数组 []。
+
+【完整示例】
+正确输出：
+{
+  "score": 82,
+  "issues": [
+    {"severity": "major", "location": "第二段", "issue": "引用的增长数据没有素材支撑", "suggestion": "补充素材 m002 中的具体数据，并注明来源"},
+    {"severity": "minor", "location": "结尾段", "issue": "结论略显仓促", "suggestion": "增加一句对未来行业趋势的判断"}
+  ]
+}"""
+
+FACT_REVIEW_USER = """请审查以下文章的【事实准确性】维度。
+判断标准：引用的数据/事实是否有素材支撑，是否有捏造或夸大。
+
+参考素材：
+{materials_summary}
+
+待审文章：
+{article}
+
+只输出 JSON（score: 0-100 整数，issues 列表，每条含 severity）："""
+
+LOGIC_REVIEW_USER = """请审查以下文章的【逻辑结构】维度。
+判断标准：论点是否清晰，论据是否充分，段落是否连贯，结构是否合理。
+
+待审文章：
+{article}
+
+只输出 JSON（score: 0-100 整数，issues 列表，每条含 severity）："""
+
+LANGUAGE_REVIEW_USER = """请审查以下文章的【语言文字】维度。
+判断标准：语言是否流畅，用词是否准确，有无错别字或病句。
+
+待审文章：
+{article}
+
+只输出 JSON（score: 0-100 整数，issues 列表，每条含 severity）："""
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/prompts/researcher_prompts.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/prompts/researcher_prompts.py
new file mode 100644
index 00000000..70b41eba
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/prompts/researcher_prompts.py
@@ -0,0 +1,49 @@
+EXTRACT_KEYWORDS_SYSTEM = """你是一名专业情报研究员（素材收集专家）。
+你的目标：为写作任务提取搜索关键词。
+你的工作背景：你在一家权威媒体机构任职，熟悉各类信息源的可信度评估。
+
+你只能做以下事情：
+1. 从写作意图中提取 3-6 个搜索关键词
+你不能写文章，不能评价内容好坏，只做关键词提取。
+
+【输出要求】
+- 只输出一个 JSON 对象，不要任何解释文字，不要 markdown 代码块。
+- 必须使用英文双引号 "，不要用中文引号 “”。
+- 关键词要具体、可搜索，避免过于宽泛的词。
+
+【完整示例】
+输入意图：写一篇分析今年新能源汽车出口增长的文章
+正确输出：
+{"keywords": ["新能源汽车出口", "汽车出口数据", "新能源汽车海外市场", "电动车出口增长", "汽车出口政策"]}"""
+
+EXTRACT_KEYWORDS_USER = """写作意图：{user_intent}
+文章类型：{article_type}
+目标读者：{target_audience}
+
+请提取 3-6 个搜索关键词，用于搜集相关素材。只输出 JSON：
+{{"keywords": ["关键词1", "关键词2"]}}"""
+
+RANK_MATERIALS_SYSTEM = """你是一名专业情报研究员（素材收集专家）。
+你的目标：对搜索结果按相关度排序和筛选。
+你的工作背景：你在一家权威媒体机构任职，熟悉各类信息源的可信度评估。
+
+你只能做以下事情：
+1. 从提供的素材列表中，选出与写作意图最相关的素材ID，按相关度从高到低排序
+你不能写文章，只做素材筛选排序。
+
+【输出要求】
+- 只输出一个 JSON 对象，不要任何解释文字，不要 markdown 代码块。
+- 必须使用英文双引号 "。
+- ranked_ids 中的 ID 必须来自素材列表，不要编造 ID。
+
+【完整示例】
+正确输出：
+{"ranked_ids": ["m003", "m001", "m005"], "summary": "共搜索到 8 条素材，精选 5 条最相关的"}"""
+
+RANK_MATERIALS_USER = """写作意图：{user_intent}
+
+素材列表（每条含ID和摘要）：
+{materials_list}
+
+请选出最相关的素材ID（最多8条），按相关度从高到低排序。只输出 JSON：
+{{"ranked_ids": ["id1", "id2"], "summary": "共搜索到X条素材，精选Y条"}}"""
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/prompts/writer_prompts.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/prompts/writer_prompts.py
new file mode 100644
index 00000000..4fc06d43
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/prompts/writer_prompts.py
@@ -0,0 +1,75 @@
+OUTLINE_SYSTEM = """你是一名专业内容创作者（作家）。
+你的目标：根据素材和意图，规划清晰的文章大纲。
+你的工作背景：你有十年内容创作经验，擅长将零散素材组织成有逻辑的文章结构。
+
+你只能做以下事情：
+1. 分析素材，提取核心观点
+2. 规划文章章节结构和每节要点
+你不能写正文，只写大纲。
+
+【输出要求】
+- 只输出一个 JSON 对象，不要任何解释文字，不要 markdown 代码块。
+- 必须使用英文双引号 "，不要用中文引号 “”。
+- 规划 3-5 个章节；material_ids 中的 ID 必须来自给定素材，没有合适素材时填 []。
+
+【完整示例】
+正确输出：
+{
+  "title": "新能源汽车出口为何高速增长",
+  "sections": [
+    {"section_title": "引言：出口数据创新高", "key_points": ["今年出口量同比增长", "在全球市场的排名变化"], "material_ids": ["m001"]},
+    {"section_title": "增长背后的三大动因", "key_points": ["产业链成本优势", "海外政策利好", "产品竞争力提升"], "material_ids": ["m002", "m003"]},
+    {"section_title": "结论与展望", "key_points": ["未来增长面临的挑战", "行业趋势判断"], "material_ids": ["m004"]}
+  ]
+}"""
+
+OUTLINE_USER = """写作意图：{user_intent}
+文章类型：{article_type}
+目标读者：{target_audience}
+目标字数：{word_count_target}字{feedback_section}
+
+可用素材摘要：
+{materials_summary}
+
+请规划文章大纲（3-5个章节），只输出 JSON 格式。"""
+
+DRAFT_SECTION_SYSTEM = """你是一名专业内容创作者（作家）。
+你的目标：根据大纲和素材，写出一段高质量的文章内容。
+你的工作背景：你有十年内容创作经验，文字流畅，善于用事实说话。
+
+你只能做以下事情：
+1. 根据给定的章节要点和素材写这一段内容
+2. 观点必须来自素材，不编造数据
+你不能修改大纲，不能写其他章节，只写当前这一段。
+
+【输出要求】
+- 直接返回这一段的正文文字，不要 JSON，不要章节标题，不要解释。
+- 不要写"以下是正文""本段内容如下"之类的开场白。
+- 段落要连贯成文，不要罗列要点。
+- 紧扣本章节主题，不要写「文章整体结构」中其他章节负责的内容，避免重复。
+- 充分展开每个要点：每个要点至少用 2-3 句话论述，结合素材中的事实与数据说理，写满要求的篇幅。"""
+
+DRAFT_SECTION_USER = """文章标题：{article_title}
+文章整体结构：
+{outline_context}
+
+当前章节：{section_title}
+章节要点：{key_points}
+
+相关素材：
+{section_materials}
+{revision_section}
+请写出「{section_title}」这一章节的正文内容，不少于 {target_words} 字，论述充分、内容充实。"""
+
+DRAFT_EXPAND_USER = """文章标题：{article_title}
+当前章节：{section_title}
+章节要点：{key_points}
+
+相关素材：
+{section_materials}
+
+这一章节已有内容如下：
+{existing_text}
+
+以上内容篇幅不足。请在保留原意和事实的基础上重写并扩充这一章节，使正文不少于 {target_words} 字。
+要求：补充更多来自素材的事实、数据与分析，论述更充分、更具体；直接返回扩充后的完整章节正文，不要章节标题、不要解释。"""
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/__init__.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/__init__.py
new file mode 100644
index 00000000..61402670
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/__init__.py
@@ -0,0 +1,64 @@
+from .base import BaseSearchProvider, SearchResult
+from .internet_search import InternetSearchProvider
+from .intranet_stub import IntranetSearchProvider
+from .demo_search import DemoSearchProvider
+from .duckduckgo_search import DuckDuckGoSearchProvider
+
+
+def get_search_provider(ai_writing_config: dict) -> BaseSearchProvider:
+    """
+    config.yaml 中配置：
+    ai_writing:
+      search_provider: internet   # internet(默认,DDG) / intranet / tavily / demo
+      intranet_search_url: http://10.106.57.180:7863/knowledge_base/search_docs_es
+      intranet_knowledge_base: samples
+      ddg_region: "cn-zh"         # DuckDuckGo 区域，默认 cn-zh
+
+    internet 模式：DuckDuckGo 为主搜索（免 API Key），失败时 fallback 到 demo 演示素材。
+    """
+    cfg = ai_writing_config or {}
+    provider = cfg.get("search_provider", "internet")
+
+    if provider == "intranet":
+        return IntranetSearchProvider(
+            base_url=cfg.get("intranet_search_url", ""),
+            knowledge_base_name=cfg.get("intranet_knowledge_base", "samples"),
+        )
+    if provider == "tavily":
+        return _FallbackSearchProvider(InternetSearchProvider(), DemoSearchProvider())
+    if provider == "demo":
+        return DemoSearchProvider()
+
+    # 默认 internet 模式：DuckDuckGo + demo fallback
+    region = cfg.get("ddg_region", "cn-zh")
+    return _FallbackSearchProvider(DuckDuckGoSearchProvider(region=region), DemoSearchProvider())
+
+
+class _FallbackSearchProvider(BaseSearchProvider):
+    """当主 provider 返回空结果时自动切换到 fallback provider。"""
+
+    def __init__(self, primary: BaseSearchProvider, fallback: BaseSearchProvider):
+        self._primary = primary
+        self._fallback = fallback
+
+    @property
+    def errors(self) -> list[str]:
+        """聚合主/兜底 provider 的检索异常，供 researcher 节点取用。"""
+        return list(getattr(self._primary, "errors", [])) + list(getattr(self._fallback, "errors", []))
+
+    async def search(self, query: str, max_results: int = 5, **kwargs):
+        results = await self._primary.search(query, max_results=max_results, **kwargs)
+        if not results:
+            results = await self._fallback.search(query, max_results=max_results, **kwargs)
+        return results
+
+    async def health_check(self) -> bool:
+        return await self._primary.health_check() or await self._fallback.health_check()
+
+
+__all__ = [
+    "BaseSearchProvider", "SearchResult",
+    "InternetSearchProvider", "IntranetSearchProvider",
+    "DemoSearchProvider", "DuckDuckGoSearchProvider",
+    "get_search_provider",
+]
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/base.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/base.py
new file mode 100644
index 00000000..2e9b9f54
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/base.py
@@ -0,0 +1,40 @@
+from abc import ABC, abstractmethod
+from dataclasses import dataclass, field
+from typing import List
+
+
+@dataclass
+class SearchResult:
+    """统一搜索结果格式 —— 内外网共用"""
+    title: str
+    content: str
+    source: str
+    published_at: str
+    url: str = ""
+    relevance_score: float = 0.0
+    source_type: str = "internet"
+    recUuid: str = ""
+    extra_metadata: dict = field(default_factory=dict)
+
+
+class BaseSearchProvider(ABC):
+    """搜索提供者抽象基类。
+
+    对接内网步骤：
+    1. 继承此类，创建 IntranetSearchProvider
+    2. 实现 search() —— 调用内网 API，将响应映射到 SearchResult
+    3. 在 config.yaml 中设置 ai_writing.search_provider: intranet
+    4. 无需修改任何 Agent 代码
+    """
+
+    @abstractmethod
+    async def search(
+        self,
+        query: str,
+        max_results: int = 5,
+        date_from: str = "",
+        date_to: str = "",
+    ) -> List[SearchResult]: ...
+
+    @abstractmethod
+    async def health_check(self) -> bool: ...
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/demo_search.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/demo_search.py
new file mode 100644
index 00000000..7e13e414
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/demo_search.py
@@ -0,0 +1,183 @@
+"""离线演示搜索提供者 —— 当无法访问互联网/内网时返回模拟素材，供测试完整写作流程。"""
+from __future__ import annotations
+
+import hashlib
+from typing import List
+
+from .base import BaseSearchProvider, SearchResult
+
+# 演示素材库：按话题分类，用于关键词模糊匹配
+_DEMO_CORPUS = [
+    {
+        "keywords": ["新能源", "电动车", "汽车", "ev", "electric"],
+        "items": [
+            {
+                "title": "2025年新能源汽车市场规模突破万亿，渗透率达45%",
+                "content": "据中国汽车工业协会数据，2025年前三季度新能源汽车累计销量超过850万辆，同比增长32%，市场渗透率达到45.3%。比亚迪、吉利、长城等头部企业份额持续集中，纯电与插混比例趋近5:5。",
+                "source": "中国汽车工业协会",
+                "published_at": "2025-10-15",
+                "relevance_score": 0.95,
+            },
+            {
+                "title": "固态电池量产进入倒计时：多家车企宣布2026年装车计划",
+                "content": "宁德时代、比亚迪、丰田同步推进固态电池量产。固态电池能量密度可达400Wh/kg，较现有液态锂电池提升60%，续航里程有望突破1000公里。成本仍是主要瓶颈，预计量产初期每度电成本高出30%。",
+                "source": "电池中国网",
+                "published_at": "2025-09-20",
+                "relevance_score": 0.88,
+            },
+            {
+                "title": "充电基础设施缺口分析：农村地区桩车比仅1:12",
+                "content": "截至2025年8月，全国充电桩保有量达1120万根，城市地区桩车比约1:2.8，但农村及县域地区桩车比仅1:12，制约新能源汽车下沉市场。国家电网计划2026年前新增农村快充站3万座。",
+                "source": "中国充电联盟",
+                "published_at": "2025-08-30",
+                "relevance_score": 0.82,
+            },
+        ],
+    },
+    {
+        "keywords": ["人工智能", "ai", "大模型", "llm", "机器学习", "深度学习"],
+        "items": [
+            {
+                "title": "国内大模型进入「百亿参数普惠化」阶段，推理成本下降90%",
+                "content": "2025年第三季度，国内主要大模型服务商将百亿参数模型推理价格降至每百万token不足1元，较2024年同期下降90%。开源生态加速，Qwen3、DeepSeek-V3等模型在多项基准测试中超越GPT-4o。",
+                "source": "中国信通院",
+                "published_at": "2025-10-08",
+                "relevance_score": 0.93,
+            },
+            {
+                "title": "企业AI应用落地白皮书：制造业ROI最高达300%",
+                "content": "调研覆盖500家企业的白皮书显示，AI在质检、排产、预测性维护三个场景ROI最高，部分制造企业ROI超300%。阻碍因素：数据孤岛（67%）、人才不足（54%）、安全合规（48%）。",
+                "source": "麦肯锡中国",
+                "published_at": "2025-09-12",
+                "relevance_score": 0.87,
+            },
+            {
+                "title": "AI写作助手用户规模达2.3亿，内容质量争议持续",
+                "content": "国内AI写作工具月活用户突破2.3亿，覆盖学术论文、营销文案、新闻报道等场景。争议焦点：AI生成内容的版权归属、事实准确性（幻觉率约15%）、对写作从业者就业影响。",
+                "source": "艾瑞咨询",
+                "published_at": "2025-10-01",
+                "relevance_score": 0.79,
+            },
+        ],
+    },
+    {
+        "keywords": ["碳中和", "双碳", "绿色", "低碳", "碳排放", "可再生能源", "光伏", "风电"],
+        "items": [
+            {
+                "title": "光伏装机量突破900GW，度电成本降至0.18元",
+                "content": "国家能源局数据显示，截至2025年9月，全国光伏累计装机量达912GW，占总装机的28%。光伏度电成本已降至0.18元，首次低于煤电基准价，推动更多省份出现「光伏平价」区域。",
+                "source": "国家能源局",
+                "published_at": "2025-10-12",
+                "relevance_score": 0.92,
+            },
+            {
+                "title": "碳市场价格突破200元/吨，倒逼高耗能行业转型",
+                "content": "全国碳排放权交易市场碳价已突破200元/吨，较2024年底上涨65%。水泥、电解铝、造纸等高耗能行业面临显著成本压力，碳减排投入年均增速达40%。",
+                "source": "上海环境能源交易所",
+                "published_at": "2025-09-28",
+                "relevance_score": 0.85,
+            },
+        ],
+    },
+    {
+        "keywords": ["医疗", "健康", "药物", "生物", "医药", "病"],
+        "items": [
+            {
+                "title": "AI辅助诊断落地三甲医院，影像科漏诊率降低23%",
+                "content": "北京协和、上海瑞金等20家三甲医院数据显示，引入AI辅助诊断系统后，肺结节、眼底病变早期漏诊率降低23%，放射科医生平均阅片时间减少40%。监管层面，NMPA已批准38款AI医疗器械。",
+                "source": "医学界",
+                "published_at": "2025-09-18",
+                "relevance_score": 0.91,
+            },
+        ],
+    },
+    {
+        "keywords": ["经济", "GDP", "贸易", "出口", "产业", "制造"],
+        "items": [
+            {
+                "title": "2025年前三季度GDP同比增长5.1%，消费贡献率提升至58%",
+                "content": "国家统计局公布，2025年前三季度GDP同比增长5.1%，最终消费对经济增长贡献率达58%，较去年同期提升8个百分点。工业增加值增长5.8%，其中装备制造业增长9.2%，成重要支撑。",
+                "source": "国家统计局",
+                "published_at": "2025-10-18",
+                "relevance_score": 0.90,
+            },
+            {
+                "title": "跨境电商出口额突破2.4万亿元，东南亚成最大增量市场",
+                "content": "商务部数据显示，2025年前三季度跨境电商出口额达2.4万亿元，同比增长28%。东南亚市场增速最快（+45%），中东、南美紧随其后。Temu、速卖通、Shopee三平台合计占出口份额约62%。",
+                "source": "商务部",
+                "published_at": "2025-10-05",
+                "relevance_score": 0.84,
+            },
+        ],
+    },
+]
+
+# 通用兜底素材（与任意查询都能凑合搭配）
+_FALLBACK_ITEMS = [
+    {
+        "title": "行业研究方法论：如何构建有效的一手与二手数据体系",
+        "content": "高质量行业报告需整合政府统计、上市公司财报、行业协会数据与专家访谈。一手调研样本量建议≥200份，二手数据优先选用权威机构发布的年度报告与季度白皮书，并注明数据时效性与口径差异。",
+        "source": "产业研究院",
+        "published_at": "2025-08-15",
+        "relevance_score": 0.55,
+    },
+    {
+        "title": "政策解读：2025年产业发展专项支持资金管理办法",
+        "content": "工信部发布2025年产业发展专项资金管理办法，重点支持「专精特新」企业数字化改造、绿色制造和关键技术攻关。单项目最高补贴1000万元，要求申报企业研发投入不低于营收3%。",
+        "source": "工信部",
+        "published_at": "2025-07-20",
+        "relevance_score": 0.50,
+    },
+    {
+        "title": "市场竞争格局分析：头部集中与长尾分散并存",
+        "content": "多个新兴行业呈现「哑铃型」竞争格局：头部3-5家企业合计市占率超60%，长尾中小企业依靠细分场景差异化生存，中间层企业面临最大竞争压力。并购整合预期升温，2025年战略性并购交易同比增长35%。",
+        "source": "普华永道",
+        "published_at": "2025-09-01",
+        "relevance_score": 0.48,
+    },
+]
+
+
+def _score_topic(query: str, keywords: list[str]) -> int:
+    """简单关键词匹配打分"""
+    q = query.lower()
+    return sum(1 for kw in keywords if kw in q)
+
+
+class DemoSearchProvider(BaseSearchProvider):
+    """离线演示搜索提供者：根据查询关键词从内置语料库返回模拟素材。
+
+    仅用于开发测试；生产环境应配置 intranet 提供者。
+    """
+
+    async def search(self, query: str, max_results: int = 5, **kwargs) -> List[SearchResult]:
+        best_topic = max(_DEMO_CORPUS, key=lambda t: _score_topic(query, t["keywords"]), default=None)
+        best_score = _score_topic(query, best_topic["keywords"]) if best_topic else 0
+
+        items = []
+        if best_score > 0 and best_topic:
+            items.extend(best_topic["items"])
+
+        # 用通用素材补齐
+        for fb in _FALLBACK_ITEMS:
+            if len(items) >= max_results:
+                break
+            items.append(fb)
+
+        results = []
+        for i, it in enumerate(items[:max_results]):
+            url_hash = hashlib.md5(it["title"].encode()).hexdigest()[:8]
+            results.append(SearchResult(
+                title=it["title"],
+                content=it["content"],
+                source=it["source"],
+                published_at=it["published_at"],
+                url=f"https://demo.internal/{url_hash}",
+                relevance_score=it["relevance_score"],
+                source_type="demo",
+                recUuid=f"demo-{i:03d}",
+            ))
+        return results
+
+    async def health_check(self) -> bool:
+        return True
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/duckduckgo_search.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/duckduckgo_search.py
new file mode 100644
index 00000000..6ba6b253
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/duckduckgo_search.py
@@ -0,0 +1,81 @@
+"""DuckDuckGo 搜索提供者 —— 免 API Key 互联网搜索。"""
+from __future__ import annotations
+
+import asyncio
+import logging
+from typing import List
+
+from .base import BaseSearchProvider, SearchResult
+
+logger = logging.getLogger(__name__)
+
+
+class DuckDuckGoSearchProvider(BaseSearchProvider):
+    """使用 DuckDuckGo 进行互联网搜索，无需 API Key。"""
+
+    def __init__(self, region: str = "cn-zh", max_timeout: int = 30):
+        self.region = region
+        self.max_timeout = max_timeout
+        # 收集本次运行的检索异常，供 researcher 节点取出并提示用户
+        self.errors: list[str] = []
+
+    async def search(
+        self,
+        query: str,
+        max_results: int = 5,
+        date_from: str = "",
+        date_to: str = "",
+    ) -> List[SearchResult]:
+        try:
+            results = await asyncio.to_thread(
+                self._sync_search, query, max_results
+            )
+            return results
+        except Exception as e:
+            logger.warning("DuckDuckGo search failed for query=%r: %s", query, e)
+            self.errors.append(f"{type(e).__name__}: {e}")
+            return []
+
+    def _sync_search(self, query: str, max_results: int) -> List[SearchResult]:
+        try:
+            from ddgs import DDGS
+        except ImportError:
+            logger.error("ddgs not installed. Run: uv add ddgs")
+            self.errors.append("ImportError: ddgs 未安装")
+            return []
+
+        ddgs = DDGS(timeout=self.max_timeout)
+        try:
+            raw = ddgs.text(
+                query,
+                region=self.region,
+                safesearch="moderate",
+                max_results=max_results,
+            )
+            items = list(raw) if raw else []
+        except Exception as e:
+            logger.warning("DDGS.text failed: %s", e)
+            self.errors.append(f"{type(e).__name__}: {e}")
+            return []
+
+        results = []
+        for item in items:
+            url = item.get("href", item.get("link", ""))
+            source = url.split("/")[2] if url and "/" in url else "web"
+            results.append(SearchResult(
+                title=item.get("title", ""),
+                content=item.get("body", item.get("snippet", ""))[:500],
+                source=source,
+                published_at=item.get("published", ""),
+                url=url,
+                relevance_score=0.75,
+                source_type="internet",
+            ))
+        return results
+
+    async def health_check(self) -> bool:
+        try:
+            results = await self.search("test", max_results=1)
+            return len(results) > 0
+        except Exception:
+            return False
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/internet_search.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/internet_search.py
new file mode 100644
index 00000000..785b565f
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/internet_search.py
@@ -0,0 +1,66 @@
+import asyncio
+import logging
+from typing import List
+
+from .base import BaseSearchProvider, SearchResult
+
+logger = logging.getLogger(__name__)
+
+
+class InternetSearchProvider(BaseSearchProvider):
+    """互联网搜索，使用项目已有的 Tavily 搜索工具。"""
+
+    async def search(
+        self,
+        query: str,
+        max_results: int = 5,
+        date_from: str = "",
+        date_to: str = "",
+    ) -> List[SearchResult]:
+        try:
+            results = await asyncio.to_thread(self._sync_search, query, max_results)
+            return results
+        except Exception as e:
+            logger.warning("internet search failed for query=%r: %s", query, e)
+            return []
+
+    def _sync_search(self, query: str, max_results: int) -> List[SearchResult]:
+        from deerflow.config import get_app_config
+        try:
+            from tavily import TavilyClient
+        except ImportError:
+            logger.warning("tavily not installed, falling back to demo search")
+            return []
+
+        config = get_app_config().get_tool_config("web_search")
+        api_key = None
+        if config is not None and "api_key" in config.model_extra:
+            api_key = config.model_extra.get("api_key")
+
+        if not api_key:
+            logger.warning("Tavily API key not configured, falling back to demo search")
+            return []
+
+        client = TavilyClient(api_key=api_key)
+        res = client.search(query, max_results=max_results)
+
+        results = []
+        for item in res.get("results", []):
+            content = item.get("content", "")
+            results.append(SearchResult(
+                title=item.get("title", ""),
+                content=content[:500],
+                source=item.get("url", "").split("/")[2] if "/" in item.get("url", "") else "web",
+                published_at=item.get("published_date", ""),
+                url=item.get("url", ""),
+                relevance_score=item.get("score", 0.0),
+                source_type="internet",
+            ))
+        return results
+
+    async def health_check(self) -> bool:
+        try:
+            results = await self.search("test", max_results=1)
+            return True
+        except Exception:
+            return False
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/intranet_stub.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/intranet_stub.py
new file mode 100644
index 00000000..216a96cc
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/search/intranet_stub.py
@@ -0,0 +1,83 @@
+"""内网知识库搜索适配器 —— 对接 ES 检索接口 search_docs_es。"""
+from __future__ import annotations
+
+import logging
+from typing import List
+
+from .base import BaseSearchProvider, SearchResult
+
+logger = logging.getLogger(__name__)
+
+# 内网知识库默认检索接口与知识库名（可经 config.yaml 的 ai_writing 段覆盖）
+_DEFAULT_ENDPOINT = "http://10.106.57.180:7863/knowledge_base/search_docs_es"
+_DEFAULT_KB = "samples"
+
+
+class IntranetSearchProvider(BaseSearchProvider):
+    """内网知识库搜索接口适配器。
+
+    接口：POST {endpoint}
+    请求体：{"query": "...", "knowledge_base_name": "samples", "ts": "yes"}
+    响应体：[{"page_content": "...", "metadata": {m_title, content, recUuid, m_publish, source1}}]
+    """
+
+    def __init__(
+        self,
+        base_url: str = "",
+        knowledge_base_name: str = _DEFAULT_KB,
+        timeout: int = 15,
+        **_ignored,
+    ):
+        self.endpoint = base_url or _DEFAULT_ENDPOINT
+        self.knowledge_base_name = knowledge_base_name or _DEFAULT_KB
+        self.timeout = timeout
+        # 收集本次运行的检索异常，供 researcher 节点取出并提示用户（ES 波动等）
+        self.errors: list[str] = []
+
+    async def search(self, query: str, max_results: int = 5, **kwargs) -> List[SearchResult]:
+        import httpx
+
+        payload = {
+            "query": query,
+            "knowledge_base_name": self.knowledge_base_name,
+            "ts": "yes",
+        }
+        try:
+            async with httpx.AsyncClient(timeout=self.timeout) as client:
+                resp = await client.post(self.endpoint, json=payload)
+                resp.raise_for_status()
+                data = resp.json()
+        except Exception as e:
+            logger.warning("intranet search failed for query=%r: %s", query, e)
+            self.errors.append(f"{type(e).__name__}: {e}")
+            return []
+
+        # 接口直接返回数组；兼容个别情况下包了一层 data/results 的情况
+        if isinstance(data, dict):
+            items = data.get("data") or data.get("results") or []
+        else:
+            items = data or []
+
+        results: List[SearchResult] = []
+        for i, item in enumerate(items[:max_results]):
+            md = (item or {}).get("metadata") or {}
+            content = md.get("content") or (item or {}).get("page_content") or ""
+            results.append(SearchResult(
+                title=str(md.get("m_title") or "").strip() or "（无标题）",
+                content=str(content)[:500],
+                source=str(md.get("source1") or "").strip() or "内网知识库",
+                published_at=str(md.get("m_publish") or "").strip(),
+                url="",  # 内网素材的原文地址由前端依据 recUuid 拼接
+                # 接口未返回相关度分值，按 ES 返回顺序赋递减分以保留排序
+                relevance_score=max(0.5, 0.95 - i * 0.03),
+                source_type="intranet",
+                recUuid=str(md.get("recUuid") or "").strip(),
+            ))
+        return results
+
+    async def health_check(self) -> bool:
+        try:
+            await self.search("测试", max_results=1)
+            return True
+        except Exception:
+            return False
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/state.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/state.py
new file mode 100644
index 00000000..8d93f1f3
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/state.py
@@ -0,0 +1,108 @@
+from typing import Annotated, List, Literal, Optional, TypedDict
+import operator
+
+# ── 素材 ──────────────────────────────────────────────────────────────────────
+
+class Material(TypedDict):
+    id: str
+    title: str
+    content: str           # 截断到 500 字
+    source: str
+    published_at: str
+    relevance_score: float
+    source_type: str       # "internet" | "intranet"
+    url: str
+    recUuid: str
+
+class MaterialPackage(TypedDict):
+    keywords: List[str]
+    materials: List[Material]
+    summary: str
+
+# ── 大纲 ──────────────────────────────────────────────────────────────────────
+
+class OutlineSection(TypedDict):
+    section_title: str
+    key_points: List[str]
+    material_ids: List[str]
+
+class Outline(TypedDict):
+    title: str
+    sections: List[OutlineSection]
+
+# ── 草稿 ──────────────────────────────────────────────────────────────────────
+
+class DraftArticle(TypedDict):
+    title: str
+    outline: Outline
+    full_markdown: str
+    word_count: int
+    revision_count: int
+
+# ── 编辑审核 ──────────────────────────────────────────────────────────────────
+
+class ReviewIssue(TypedDict):
+    category: str    # "fact" | "logic" | "language"
+    severity: str    # "major" | "minor"
+    location: str
+    issue: str
+    suggestion: str
+
+class ReviewResult(TypedDict):
+    verdict: str     # "pass" | "reject"
+    fact_score: int
+    logic_score: int
+    language_score: int
+    overall_score: int
+    pass_threshold: int
+    revision_notes: List[ReviewIssue]
+
+# ── 用户干预 ──────────────────────────────────────────────────────────────────
+
+class UserInterventionPayload(TypedDict):
+    action: str
+    approved_material_ids: List[str]
+    extra_keywords: List[str]
+    edited_outline: Optional[Outline]
+    outline_feedback: str
+    user_revision_notes: str
+    override_verdict: bool
+
+# ── 主状态 ────────────────────────────────────────────────────────────────────
+
+WritingStatus = Literal[
+    "researching", "awaiting_material_confirm",
+    "writing_outline", "awaiting_outline_confirm",
+    "writing_draft", "awaiting_draft_confirm",
+    "reviewing", "awaiting_review_confirm",
+    "revising", "done", "error",
+]
+
+class AIWritingState(TypedDict):
+    # 写作配置
+    user_intent: str
+    article_type: str
+    target_audience: str
+    word_count_target: int
+
+    # Agent A 输出
+    material_package: Optional[MaterialPackage]
+
+    # Agent B 输出
+    current_outline: Optional[Outline]
+    drafts: Annotated[List[DraftArticle], operator.add]
+    current_draft: Optional[DraftArticle]
+
+    # Agent C 输出
+    review_result: Optional[ReviewResult]
+
+    # 用户干预数据（每个干预点会覆盖）
+    last_user_intervention: Optional[UserInterventionPayload]
+
+    # 流程控制
+    revision_count: int
+    max_revisions: int
+    status: WritingStatus
+
+    # SSE 进度推送队列（每个节点追加）
+    progress_events: Annotated[List[dict], operator.add]
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/canvas_agent/agent.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/canvas_agent/agent.py
index 91fd122c..dd8968a7 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/canvas_agent/agent.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/canvas_agent/agent.py
@@ -5,7 +5,7 @@ import logging
 from langchain.agents import create_agent
 from langchain_core.runnables import RunnableConfig
 
-from deerflow.agents.canvas_agent.prompt import CANVAS_SYSTEM_PROMPT
+from deerflow.agents.canvas_agent.prompt import build_canvas_system_prompt
 from deerflow.agents.canvas_agent.tools import update_artifact_tool
 from deerflow.agents.middlewares.clarification_middleware import ClarificationMiddleware
 from deerflow.agents.middlewares.dangling_tool_call_middleware import DanglingToolCallMiddleware
@@ -49,7 +49,19 @@ def make_canvas_agent(config: RunnableConfig):
     if thinking_enabled and model_config and not model_config.supports_thinking:
         thinking_enabled = False
 
-    logger.info("Create CanvasAgent -> model_name: %s, thinking_enabled: %s", model_name, thinking_enabled)
+    canvas_artifact_title = cfg.get("canvas_artifact_title") or None
+    canvas_artifact_type = cfg.get("canvas_artifact_type") or None
+    system_prompt = build_canvas_system_prompt(
+        artifact_title=canvas_artifact_title,
+        artifact_type=canvas_artifact_type,
+    )
+
+    logger.info(
+        "Create CanvasAgent -> model_name: %s, thinking_enabled: %s, artifact_title: %s",
+        model_name,
+        thinking_enabled,
+        canvas_artifact_title,
+    )
 
     middlewares = [
         DanglingToolCallMiddleware(),
@@ -63,6 +75,6 @@ def make_canvas_agent(config: RunnableConfig):
         model=create_chat_model(name=model_name, thinking_enabled=thinking_enabled, app_config=app_config),
         tools=[update_artifact_tool, ask_clarification_tool],
         middleware=middlewares,
-        system_prompt=CANVAS_SYSTEM_PROMPT,
+        system_prompt=system_prompt,
         state_schema=ThreadState,
     )
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/canvas_agent/prompt.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/canvas_agent/prompt.py
index 42314b2c..3eb702f2 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/canvas_agent/prompt.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/canvas_agent/prompt.py
@@ -1,4 +1,18 @@
-CANVAS_SYSTEM_PROMPT = """You are a Canvas AI assistant that helps users create and edit documents and code.
+def build_canvas_system_prompt(
+    artifact_title: str | None = None,
+    artifact_type: str | None = None,
+) -> str:
+    existing_artifact_block = ""
+    if artifact_title:
+        type_label = "代码" if artifact_type == "code" else "文档"
+        existing_artifact_block = f"""
+<existing_artifact>
+用户当前有一个{type_label}制品，标题为 "{artifact_title}"。
+请继续编辑该制品——除非用户明确要求新建，否则不要创建新制品。
+</existing_artifact>
+"""
+
+    return f"""You are a Canvas AI assistant that helps users create and edit documents and code.
 
 <canvas_behavior>
 You work with an **artifact** — a document or code file shown in the canvas panel on the right.
@@ -10,11 +24,53 @@ Rules:
 - If the user is only asking a question (no edit needed), answer in text — skip the tool call.
 </canvas_behavior>
 
+<clarification_system>
+Before creating a brand-new artifact or performing a major rewrite, verify you have enough
+information to do the job well. When key details are missing, call `ask_clarification` FIRST
+— do NOT start generating the artifact and ask questions mid-way.
+
+**MUST clarify when (no existing artifact or major rewrite requested):**
+1. OUTPUT TYPE IS VAGUE
+   - "帮我做个主页" / "make a homepage" → ask: tech stack (plain HTML / React / Vue?),
+     design style, which sections to include
+   - "写个报告" / "write a report" → ask: topic, target audience, expected length,
+     required sections
+   - "写个脚本" / "write a script" → ask: programming language, what it should do
+2. REQUIRED CONTENT IS MISSING
+   - User wants a personal profile page but hasn't provided their name / bio / links
+   - User wants a data table but hasn't provided the data or schema
+3. AMBIGUOUS APPROACH WITH SIGNIFICANTLY DIFFERENT OUTCOMES
+   - "Design a chat system" → ask: client–server or peer-to-peer, persistence needed?
+   - "Write an intro" → ask: formal essay or casual blog post?
+
+**DO NOT clarify for:**
+- Simple edits to an existing artifact: "make it bold", "fix the typo", "shorten paragraph 2"
+- Formatting / style tweaks: "add comments", "use camelCase", "format the code"
+- Quick actions: expand / shorten / formalize / casualize / add_comments / fix_bugs / optimize_code
+- Requests where intent is clear from context (e.g., user pastes content and says "translate this")
+- Follow-up turns where enough context already exists in the conversation
+
+**Format for clarification (use options when practical):**
+ask_clarification(
+    question="你希望这个主页使用什么技术栈？",
+    clarification_type="missing_info",
+    options=[
+        {{"id": "html", "label": "纯 HTML / CSS / JS", "description": "无框架，最简单"}},
+        {{"id": "react", "label": "React", "description": "组件化，适合复杂交互"}},
+        {{"id": "vue",   "label": "Vue",   "description": "渐进式框架，上手容易"}},
+    ],
+    allow_custom=True,
+)
+
+CRITICAL: clarification ALWAYS comes before generating the artifact. Never produce a partial
+artifact and then ask for clarification in the same response.
+</clarification_system>
+
 <artifact_context>
 The current artifact state is injected into your context. When editing, build on the existing content exactly.
 When creating from scratch, produce a complete, high-quality artifact in one shot.
 </artifact_context>
-
+{existing_artifact_block}
 <selection_rewrite>
 When the user's message contains a <selection> block, you MUST:
 1. Identify the exact selection in the current artifact content.
@@ -38,3 +94,7 @@ When the user triggers a quick action, apply it to the full artifact unless spec
 - optimize_code: Improve performance and readability
 </quick_actions>
 """
+
+
+# Backward-compatible constant for callers that don't pass artifact context.
+CANVAS_SYSTEM_PROMPT = build_canvas_system_prompt()
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/persistence/ai_writing_sessions/__init__.py b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/ai_writing_sessions/__init__.py
new file mode 100644
index 00000000..7b1e573f
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/ai_writing_sessions/__init__.py
@@ -0,0 +1,11 @@
+from deerflow.persistence.ai_writing_sessions.model import AIWritingSessionRow
+from deerflow.persistence.ai_writing_sessions.sql import AIWritingSessionRepository
+
+
+def make_ai_writing_session_store(session_factory) -> AIWritingSessionRepository | None:
+    if session_factory is None:
+        return None
+    return AIWritingSessionRepository(session_factory)
+
+
+__all__ = ["AIWritingSessionRow", "AIWritingSessionRepository", "make_ai_writing_session_store"]
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/persistence/ai_writing_sessions/model.py b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/ai_writing_sessions/model.py
new file mode 100644
index 00000000..a4d33a0e
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/ai_writing_sessions/model.py
@@ -0,0 +1,28 @@
+"""ORM model for AI writing sessions."""
+
+from __future__ import annotations
+
+from datetime import UTC, datetime
+
+from sqlalchemy import DateTime, String, Text
+from sqlalchemy.orm import Mapped, mapped_column
+
+from deerflow.persistence.base import Base
+
+
+class AIWritingSessionRow(Base):
+    __tablename__ = "ai_writing_sessions"
+
+    id: Mapped[str] = mapped_column(String(64), primary_key=True)
+    user_id: Mapped[str | None] = mapped_column(String(64), nullable=True, index=True)
+    title: Mapped[str] = mapped_column(String(512), nullable=False, default="")
+    user_intent: Mapped[str | None] = mapped_column(String(512), nullable=True)
+    status: Mapped[str] = mapped_column(String(32), nullable=False, default="in_progress")
+    draft_title: Mapped[str | None] = mapped_column(String(512), nullable=True)
+    draft_markdown: Mapped[str | None] = mapped_column(Text, nullable=True)
+    completed_interventions: Mapped[str | None] = mapped_column(Text, nullable=True)  # JSON array
+    review_result: Mapped[str | None] = mapped_column(Text, nullable=True)  # JSON object
+    # 完整对话时间线（前端组装的 progressEvents + completedInterventions），用于历史回显
+    transcript: Mapped[str | None] = mapped_column(Text, nullable=True)  # JSON object
+    created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=lambda: datetime.now(UTC))
+    updated_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=lambda: datetime.now(UTC))
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/persistence/ai_writing_sessions/sql.py b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/ai_writing_sessions/sql.py
new file mode 100644
index 00000000..48fd54ea
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/ai_writing_sessions/sql.py
@@ -0,0 +1,162 @@
+"""SQLAlchemy-backed AI writing session storage."""
+
+from __future__ import annotations
+
+import json
+from datetime import UTC, datetime
+
+from sqlalchemy import select
+from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker
+
+from deerflow.persistence.ai_writing_sessions.model import AIWritingSessionRow
+from deerflow.runtime.user_context import AUTO, _AutoSentinel, resolve_user_id
+
+_UNSET = object()
+
+
+class AIWritingSessionRepository:
+    def __init__(self, session_factory: async_sessionmaker[AsyncSession]) -> None:
+        self._sf = session_factory
+
+    @staticmethod
+    def _row_to_dict(row: AIWritingSessionRow) -> dict:
+        d = row.to_dict()
+        for k in ("created_at", "updated_at"):
+            if isinstance(d.get(k), datetime):
+                d[k] = d[k].isoformat()
+        for k in ("completed_interventions", "review_result", "transcript"):
+            val = d.get(k)
+            if isinstance(val, str):
+                try:
+                    d[k] = json.loads(val)
+                except Exception:
+                    d[k] = None
+        return d
+
+    async def create(
+        self,
+        *,
+        id: str,
+        title: str,
+        user_intent: str | None = None,
+        user_id: str | None | _AutoSentinel = AUTO,
+    ) -> dict:
+        resolved_user_id = resolve_user_id(user_id, method_name="AIWritingSessionRepository.create")
+        now = datetime.now(UTC)
+        row = AIWritingSessionRow(
+            id=id,
+            user_id=resolved_user_id,
+            title=title,
+            user_intent=user_intent,
+            status="in_progress",
+            draft_title=None,
+            draft_markdown=None,
+            completed_interventions=None,
+            review_result=None,
+            transcript=None,
+            created_at=now,
+            updated_at=now,
+        )
+        async with self._sf() as session:
+            session.add(row)
+            await session.commit()
+            await session.refresh(row)
+            return self._row_to_dict(row)
+
+    async def update(
+        self,
+        session_id: str,
+        *,
+        user_id: str | None | _AutoSentinel = AUTO,
+        title=_UNSET,
+        status=_UNSET,
+        draft_title=_UNSET,
+        draft_markdown=_UNSET,
+        completed_interventions=_UNSET,
+        review_result=_UNSET,
+        transcript=_UNSET,
+    ) -> dict | None:
+        resolved_user_id = resolve_user_id(user_id, method_name="AIWritingSessionRepository.update")
+        async with self._sf() as session:
+            row = await session.get(AIWritingSessionRow, session_id)
+            if row is None:
+                return None
+            if resolved_user_id is not None and row.user_id != resolved_user_id:
+                return None
+            if title is not _UNSET:
+                row.title = title
+            if status is not _UNSET:
+                row.status = status
+            if draft_title is not _UNSET:
+                row.draft_title = draft_title
+            if draft_markdown is not _UNSET:
+                row.draft_markdown = draft_markdown
+            if completed_interventions is not _UNSET:
+                row.completed_interventions = (
+                    json.dumps(completed_interventions, ensure_ascii=False)
+                    if completed_interventions is not None
+                    else None
+                )
+            if review_result is not _UNSET:
+                row.review_result = (
+                    json.dumps(review_result, ensure_ascii=False)
+                    if review_result is not None
+                    else None
+                )
+            if transcript is not _UNSET:
+                row.transcript = (
+                    json.dumps(transcript, ensure_ascii=False)
+                    if transcript is not None
+                    else None
+                )
+            row.updated_at = datetime.now(UTC)
+            await session.commit()
+            await session.refresh(row)
+            return self._row_to_dict(row)
+
+    async def get(
+        self,
+        session_id: str,
+        *,
+        user_id: str | None | _AutoSentinel = AUTO,
+    ) -> dict | None:
+        resolved_user_id = resolve_user_id(user_id, method_name="AIWritingSessionRepository.get")
+        async with self._sf() as session:
+            row = await session.get(AIWritingSessionRow, session_id)
+            if row is None:
+                return None
+            if resolved_user_id is not None and row.user_id != resolved_user_id:
+                return None
+            return self._row_to_dict(row)
+
+    async def list(
+        self,
+        *,
+        user_id: str | None | _AutoSentinel = AUTO,
+        limit: int = 50,
+    ) -> list[dict]:
+        resolved_user_id = resolve_user_id(user_id, method_name="AIWritingSessionRepository.list")
+        stmt = select(AIWritingSessionRow)
+        if resolved_user_id is not None:
+            stmt = stmt.where(AIWritingSessionRow.user_id == resolved_user_id)
+        stmt = stmt.order_by(AIWritingSessionRow.updated_at.desc()).limit(limit)
+        async with self._sf() as session:
+            result = await session.execute(stmt)
+            return [self._row_to_dict(r) for r in result.scalars()]
+
+    async def delete(
+        self,
+        session_id: str,
+        *,
+        user_id: str | None | _AutoSentinel = AUTO,
+    ) -> bool:
+        resolved_user_id = resolve_user_id(user_id, method_name="AIWritingSessionRepository.delete")
+        async with self._sf() as session:
+            row = await session.get(AIWritingSessionRow, session_id)
+            if row is None:
+                return False
+            if resolved_user_id is not None and row.user_id != resolved_user_id:
+                return False
+            await session.delete(row)
+            await session.commit()
+            return True
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/persistence/article_types/__init__.py b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/article_types/__init__.py
new file mode 100644
index 00000000..e347ed98
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/article_types/__init__.py
@@ -0,0 +1,11 @@
+from deerflow.persistence.article_types.model import ArticleTypeRow
+from deerflow.persistence.article_types.sql import ArticleTypeRepository
+
+
+def make_article_type_store(session_factory) -> ArticleTypeRepository | None:
+    if session_factory is None:
+        return None
+    return ArticleTypeRepository(session_factory)
+
+
+__all__ = ["ArticleTypeRow", "ArticleTypeRepository", "make_article_type_store"]
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/persistence/article_types/model.py b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/article_types/model.py
new file mode 100644
index 00000000..17b0f4ef
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/article_types/model.py
@@ -0,0 +1,24 @@
+"""ORM model for AI writing article types."""
+
+from __future__ import annotations
+
+from datetime import UTC, datetime
+
+from sqlalchemy import DateTime, Integer, String, Text
+from sqlalchemy.orm import Mapped, mapped_column
+
+from deerflow.persistence.base import Base
+
+
+class ArticleTypeRow(Base):
+    __tablename__ = "ai_writing_article_types"
+
+    id: Mapped[str] = mapped_column(String(64), primary_key=True)
+    key: Mapped[str] = mapped_column(String(64), nullable=False, unique=True)
+    label: Mapped[str] = mapped_column(String(128), nullable=False)
+    description: Mapped[str | None] = mapped_column(Text, nullable=True)
+    prompt_hint: Mapped[str | None] = mapped_column(Text, nullable=True)
+    default_word_count: Mapped[int] = mapped_column(Integer, nullable=False, default=800)
+    sort_order: Mapped[int] = mapped_column(Integer, nullable=False, default=0)
+    created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=lambda: datetime.now(UTC))
+    updated_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=lambda: datetime.now(UTC))
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/persistence/article_types/sql.py b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/article_types/sql.py
new file mode 100644
index 00000000..463d89de
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/article_types/sql.py
@@ -0,0 +1,123 @@
+"""SQLAlchemy-backed article type storage."""
+
+from __future__ import annotations
+
+import uuid
+from datetime import UTC, datetime
+
+from sqlalchemy import select
+from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker
+
+from deerflow.persistence.article_types.model import ArticleTypeRow
+
+_UNSET = object()
+
+
+class ArticleTypeRepository:
+    def __init__(self, session_factory: async_sessionmaker[AsyncSession]) -> None:
+        self._sf = session_factory
+
+    @staticmethod
+    def _row_to_dict(row: ArticleTypeRow) -> dict:
+        d = row.to_dict()
+        for k in ("created_at", "updated_at"):
+            if isinstance(d.get(k), datetime):
+                d[k] = d[k].isoformat()
+        return d
+
+    async def create(
+        self,
+        *,
+        key: str,
+        label: str,
+        description: str | None = None,
+        prompt_hint: str | None = None,
+        default_word_count: int = 800,
+        sort_order: int = 0,
+    ) -> dict:
+        now = datetime.now(UTC)
+        row = ArticleTypeRow(
+            id=str(uuid.uuid4()),
+            key=key,
+            label=label,
+            description=description,
+            prompt_hint=prompt_hint,
+            default_word_count=default_word_count,
+            sort_order=sort_order,
+            created_at=now,
+            updated_at=now,
+        )
+        async with self._sf() as session:
+            session.add(row)
+            await session.commit()
+            await session.refresh(row)
+            return self._row_to_dict(row)
+
+    async def update(
+        self,
+        article_type_id: str,
+        *,
+        key=_UNSET,
+        label=_UNSET,
+        description=_UNSET,
+        prompt_hint=_UNSET,
+        default_word_count=_UNSET,
+        sort_order=_UNSET,
+    ) -> dict | None:
+        async with self._sf() as session:
+            row = await session.get(ArticleTypeRow, article_type_id)
+            if row is None:
+                return None
+            if key is not _UNSET:
+                row.key = key
+            if label is not _UNSET:
+                row.label = label
+            if description is not _UNSET:
+                row.description = description
+            if prompt_hint is not _UNSET:
+                row.prompt_hint = prompt_hint
+            if default_word_count is not _UNSET:
+                row.default_word_count = default_word_count
+            if sort_order is not _UNSET:
+                row.sort_order = sort_order
+            row.updated_at = datetime.now(UTC)
+            await session.commit()
+            await session.refresh(row)
+            return self._row_to_dict(row)
+
+    async def get(self, article_type_id: str) -> dict | None:
+        async with self._sf() as session:
+            row = await session.get(ArticleTypeRow, article_type_id)
+            if row is None:
+                return None
+            return self._row_to_dict(row)
+
+    async def get_by_key(self, key: str) -> dict | None:
+        async with self._sf() as session:
+            stmt = select(ArticleTypeRow).where(ArticleTypeRow.key == key)
+            result = await session.execute(stmt)
+            row = result.scalar_one_or_none()
+            if row is None:
+                return None
+            return self._row_to_dict(row)
+
+    async def list(self) -> list[dict]:
+        stmt = select(ArticleTypeRow).order_by(ArticleTypeRow.sort_order.asc(), ArticleTypeRow.created_at.asc())
+        async with self._sf() as session:
+            result = await session.execute(stmt)
+            return [self._row_to_dict(r) for r in result.scalars()]
+
+    async def delete(self, article_type_id: str) -> bool:
+        async with self._sf() as session:
+            row = await session.get(ArticleTypeRow, article_type_id)
+            if row is None:
+                return False
+            await session.delete(row)
+            await session.commit()
+            return True
+
+    async def list_keys(self) -> list[str]:
+        stmt = select(ArticleTypeRow.key).order_by(ArticleTypeRow.sort_order.asc())
+        async with self._sf() as session:
+            result = await session.execute(stmt)
+            return list(result.scalars())
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/persistence/migrations/versions/20260517_01_ai_writing_sessions.py b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/migrations/versions/20260517_01_ai_writing_sessions.py
new file mode 100644
index 00000000..18d76566
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/migrations/versions/20260517_01_ai_writing_sessions.py
@@ -0,0 +1,50 @@
+"""Create ai_writing_sessions table.
+
+Revision ID: 20260517_01
+Revises: 20260515_01
+Create Date: 2026-05-17
+"""
+
+from __future__ import annotations
+
+import sqlalchemy as sa
+from alembic import op
+from sqlalchemy import inspect
+
+
+revision = "20260517_01"
+down_revision = "20260515_01"
+branch_labels = None
+depends_on = None
+
+
+def _has_table(table_name: str) -> bool:
+    inspector = inspect(op.get_bind())
+    return table_name in inspector.get_table_names()
+
+
+def upgrade() -> None:
+    if _has_table("ai_writing_sessions"):
+        return
+
+    op.create_table(
+        "ai_writing_sessions",
+        sa.Column("id", sa.String(64), primary_key=True),
+        sa.Column("user_id", sa.String(64), nullable=True),
+        sa.Column("title", sa.String(512), nullable=False, server_default=""),
+        sa.Column("user_intent", sa.String(512), nullable=True),
+        sa.Column("status", sa.String(32), nullable=False, server_default="in_progress"),
+        sa.Column("draft_title", sa.String(512), nullable=True),
+        sa.Column("draft_markdown", sa.Text, nullable=True),
+        sa.Column("completed_interventions", sa.Text, nullable=True),
+        sa.Column("review_result", sa.Text, nullable=True),
+        sa.Column("created_at", sa.DateTime(timezone=True), nullable=False),
+        sa.Column("updated_at", sa.DateTime(timezone=True), nullable=False),
+    )
+    op.create_index("ix_ai_writing_sessions_user_id", "ai_writing_sessions", ["user_id"])
+    op.create_index("ix_ai_writing_sessions_updated_at", "ai_writing_sessions", ["updated_at"])
+
+
+def downgrade() -> None:
+    if _has_table("ai_writing_sessions"):
+        op.drop_table("ai_writing_sessions")
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/persistence/migrations/versions/20260517_02_article_types.py b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/migrations/versions/20260517_02_article_types.py
new file mode 100644
index 00000000..a1d8c179
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/migrations/versions/20260517_02_article_types.py
@@ -0,0 +1,107 @@
+"""Create ai_writing_article_types table with default types.
+
+Revision ID: 20260517_02
+Revises: 20260517_01
+Create Date: 2026-05-17
+"""
+
+from __future__ import annotations
+
+import uuid
+from datetime import UTC, datetime
+
+import sqlalchemy as sa
+from alembic import op
+from sqlalchemy import inspect
+
+
+revision = "20260517_02"
+down_revision = "20260517_01"
+branch_labels = None
+depends_on = None
+
+_DEFAULT_TYPES = [
+    {
+        "key": "news",
+        "label": "新闻资讯",
+        "description": "时效性强的新闻报道，注重事实准确、简洁客观",
+        "prompt_hint": "以新闻报道的风格写作，注重5W1H要素，语言简洁客观，突出时效性和事实准确性",
+        "default_word_count": 600,
+        "sort_order": 0,
+    },
+    {
+        "key": "analysis",
+        "label": "分析报道",
+        "description": "深入分析事件背景与影响，提供专业见解",
+        "prompt_hint": "以分析报道的风格写作，提供深度背景分析、多角度解读和专业见解，逻辑清晰",
+        "default_word_count": 1200,
+        "sort_order": 1,
+    },
+    {
+        "key": "feature",
+        "label": "深度特稿",
+        "description": "人物或事件的深度叙事，注重细节与故事性",
+        "prompt_hint": "以深度特稿的风格写作，注重叙事性和细节描写，人物刻画生动，故事性强，情感真实",
+        "default_word_count": 2000,
+        "sort_order": 2,
+    },
+    {
+        "key": "report",
+        "label": "调研报告",
+        "description": "数据驱动的专题研究报告，结构严谨",
+        "prompt_hint": "以调研报告的风格写作，数据详实，结构严谨（摘要/背景/发现/结论），语言专业规范",
+        "default_word_count": 3000,
+        "sort_order": 3,
+    },
+]
+
+
+def _has_table(table_name: str) -> bool:
+    inspector = inspect(op.get_bind())
+    return table_name in inspector.get_table_names()
+
+
+def upgrade() -> None:
+    if not _has_table("ai_writing_article_types"):
+        op.create_table(
+            "ai_writing_article_types",
+            sa.Column("id", sa.String(64), primary_key=True),
+            sa.Column("key", sa.String(64), nullable=False, unique=True),
+            sa.Column("label", sa.String(128), nullable=False),
+            sa.Column("description", sa.Text, nullable=True),
+            sa.Column("prompt_hint", sa.Text, nullable=True),
+            sa.Column("default_word_count", sa.Integer, nullable=False, server_default="800"),
+            sa.Column("sort_order", sa.Integer, nullable=False, server_default="0"),
+            sa.Column("created_at", sa.DateTime(timezone=True), nullable=False),
+            sa.Column("updated_at", sa.DateTime(timezone=True), nullable=False),
+        )
+
+    # 预置默认文章类型（幂等，跳过已存在的 key）
+    conn = op.get_bind()
+    existing_keys = {row[0] for row in conn.execute(sa.text("SELECT key FROM ai_writing_article_types")).fetchall()}
+    now = datetime.now(UTC)
+    for t in _DEFAULT_TYPES:
+        if t["key"] not in existing_keys:
+            conn.execute(
+                sa.text(
+                    "INSERT INTO ai_writing_article_types "
+                    "(id, key, label, description, prompt_hint, default_word_count, sort_order, created_at, updated_at) "
+                    "VALUES (:id, :key, :label, :description, :prompt_hint, :default_word_count, :sort_order, :created_at, :updated_at)"
+                ),
+                {
+                    "id": str(uuid.uuid4()),
+                    "key": t["key"],
+                    "label": t["label"],
+                    "description": t["description"],
+                    "prompt_hint": t["prompt_hint"],
+                    "default_word_count": t["default_word_count"],
+                    "sort_order": t["sort_order"],
+                    "created_at": now,
+                    "updated_at": now,
+                },
+            )
+
+
+def downgrade() -> None:
+    if _has_table("ai_writing_article_types"):
+        op.drop_table("ai_writing_article_types")
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/persistence/migrations/versions/20260517_03_ai_writing_transcript.py b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/migrations/versions/20260517_03_ai_writing_transcript.py
new file mode 100644
index 00000000..62318040
--- /dev/null
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/persistence/migrations/versions/20260517_03_ai_writing_transcript.py
@@ -0,0 +1,39 @@
+"""Add transcript column to ai_writing_sessions.
+
+存储前端组装的完整对话时间线（progressEvents + completedInterventions），
+供历史会话回显出与实时对话一致的富时间线。
+
+Revision ID: 20260517_03
+Revises: 20260517_02
+Create Date: 2026-05-17
+"""
+
+from __future__ import annotations
+
+import sqlalchemy as sa
+from alembic import op
+from sqlalchemy import inspect
+
+
+revision = "20260517_03"
+down_revision = "20260517_02"
+branch_labels = None
+depends_on = None
+
+
+def _has_column(table_name: str, column_name: str) -> bool:
+    inspector = inspect(op.get_bind())
+    if table_name not in inspector.get_table_names():
+        return False
+    return any(col["name"] == column_name for col in inspector.get_columns(table_name))
+
+
+def upgrade() -> None:
+    if _has_column("ai_writing_sessions", "transcript"):
+        return
+    op.add_column("ai_writing_sessions", sa.Column("transcript", sa.Text, nullable=True))
+
+
+def downgrade() -> None:
+    if _has_column("ai_writing_sessions", "transcript"):
+        op.drop_column("ai_writing_sessions", "transcript")