refactor(quality): Q7 前端巨型组件拆分 — AgentCLI 814L→521L (-36%), 提取工具栏+常量+空状态+滚动按钮 4 个独立文件

ROADMAP.md

@@ -478,6 +478,7 @@ services/api.ts (1324L)
 | U13 | 主机监控大屏挂载（HostMonitorDashboard 死代码复活） | P3 | **done** |
 | U14 | ESLint 冗余 disable 指令清理（unused eslint-disable 6→0） | P3 | **done** |
 | Q6 | 前端巨型组件拆分（ResourceVisualEditor 882L→282L，提取 5 个独立编辑器） | P0 | **done** |
+| Q7 | 前端巨型组件拆分（AgentCLI 814L→521L，提取工具栏+常量+空状态+滚动按钮） | P0 | **done** |
 
 ---
 
@@ -645,3 +646,35 @@ pending → in_progress → done / blocked
 - [x] 17/17 集成回归测试通过（零回归）
 - [x] Docker 部署 healthy
 - [x] K8s 资源 YAML API 链路验证通过（visual editor dispatch 正常）
+
+---
+
+## Q7: 前端巨型组件拆分 — AgentCLI [done]
+
+**问题**: `AgentCLI.tsx`（814 行）是 Q6 拆分后项目最大的前端组件，包含 AI 运维 Agent 执行页面的全部逻辑：WebSocket 事件处理、工具栏控制（模式切换/主机选择/集群选择/Pod选择/安全模式/状态徽章/核心能力说明）、对话区空状态、滚动按钮。单文件过大导致维护困难。
+
+**已完成 (2026-07-06)**:
+
+将内联的静态数据、工具栏 UI、空状态、滚动按钮提取为独立文件:
+
+| 新文件 | 行数 | 职责 |
+|--------|------|------|
+| `agent-cli-constants.ts` | 89 | WS 事件接口 + 安全模式定义 + 核心能力说明 + Pod 占位符 + 主机标签格式化 |
+| `AgentCLIToolbar.tsx` | 281 | 工作区控制栏（模式切换 + 目标选择 + 安全模式 + 状态徽章 + 核心能力 Popover） |
+| `AgentCLIEmptyState.tsx` | 42 | 对话区空状态（未选目标/连接中/就绪提示） |
+| `ScrollButtons.tsx` | 43 | 浮动滚动按钮（回到顶部/底部），通用可复用组件 |
+
+主文件 `AgentCLI.tsx` 从 **814 行降至 521 行**（-36%），仅保留：状态管理、WebSocket 连接生命周期、事件处理（handleEvent switch）、发送/停止/恢复逻辑、对话区布局（AgentChatTimeline + 输入区）。
+
+**提取原则**: 常量文件为纯数据（零 React 依赖，仅 lucide 图标类型引用）；工具栏为受控组件（接收全部状态 + setter 作为 props，内部无独立状态）；空状态为纯展示组件；滚动按钮为通用可复用组件（不限于 AgentCLI）。零逻辑变更。
+
+**验收标准**:
+- [x] AgentCLI.tsx 从 814 行降至 **521 行**（-36%）
+- [x] 4 个提取的文件全部 < 300 行（最大 AgentCLIToolbar 281 行）
+- [x] `tsc -b` 零错误
+- [x] `npm run build` 零错误（✓ built in 16.95s）
+- [x] ESLint errors 保持 **0**（清理 6 个 unused 变量/import）
+- [x] ESLint warnings 保持 **59**（无新增）
+- [x] `go build` 零错误
+- [x] 17/17 集成回归测试通过（零回归）
+- [x] Docker 部署 healthy