feat(temple): add Temple modal with Tools browser and Skills management

2026-04-08 16:46:02 +08:00
parent 51e38e039b
commit aa12c92a5a
12 changed files with 2571 additions and 41 deletions
--- a/development-doc/plan/temple-update/README.md
+++ b/development-doc/plan/temple-update/README.md
@@ -0,0 +1,165 @@
+# 智慧神殿（Temple）升级计划索引
+
+本目录用于存放智慧神殿（Temple）页面的升级规划文档。
+
+## 文档说明
+
+| 文件 | 说明 |
+|------|------|
+| `README.md` | 总览、阶段关系、实施顺序、当前状态 |
+| `phase-0-current-state.md` | 当前现状、问题、目标架构 |
+| `phase-1-tools-api.md` | 后端 Tools API 开发 |
+| `phase-2-tools-frontend.md` | Tools Tab 前端实现 |
+| `phase-3-skills-integration.md` | Skills Tab 复用集成 |
+| `checklist.md` | 执行清单 |
+
+## 推荐阅读顺序
+
+1. 先读 `README.md`（本文）
+2. 再读 `phase-0-current-state.md`
+3. 再按顺序阅读 phase 1 ~ 3
+4. 参考 `checklist.md` 进行任务追踪
+
+---
+
+## 当前总体状态（2026-04-08）
+
+| Phase | 当前状态 | 说明 |
+|------|------|------|
+| Phase 0 | 已完成 | 现状梳理完毕，本文档 |
+| Phase 1 | 待开始 | 后端 Tools API 开发 |
+| Phase 2 | 待开始 | 前端 Tools Tab 实现 |
+| Phase 3 | 待开始 | Skills Tab 复用集成 |
+
+---
+
+## 总体升级原则
+
+1. **Tools 只读不做编辑** - 系统内置工具不允许手动修改，防止配置破坏
+2. **Skills 以 DB 为 source of truth** - UI 操作 DB，后端自动生成 `.md` 文件，用户不直接碰代码
+3. **复用现有 Skills 页面** - 已有完整 CRUD，改动成本最低
+4. **MCP 暂不纳入** - 当前仅为概念性能力包，后期独立需求
+5. **样式沿用现有体系** - 复用 `chatPage.css` 的深色终端风格 + `jarvis-*` CSS 变量
+
+---
+
+## 阶段关系图
+
+```
+Phase 0 ──────────────────────────────────────────────────────────────┐
+│ 现状与目标                                                           │
+│ - Temple 页面现状分析                                                 │
+│ - Tools 系统梳理                                                     │
+│ - Skills 系统梳理                                                    │
+│ - 设计决策                                                           │
+│ 状态：已完成                                                         │
+└────────────────────────────────────────────────────────────────────┘
+         │
+         ▼
+Phase 1 ──────────────────────────────────────────────────────────────┐
+│ 后端 Tools API                                                       │
+│ - GET /api/tools 接口开发                                             │
+│ - ToolRegistry 聚合所有工具                                          │
+│ - 聚合两套工具体系元数据                                             │
+│                                                                      │
+│ 核心文件: app/routers/tools.py                                     │
+│ 依赖: 无                                                            │
+│ 工作量: 1 天                                                         │
+└────────────────────────────────────────────────────────────────────┘
+         │
+         ▼
+Phase 2 ──────────────────────────────────────────────────────────────┐
+│ 前端 Tools Tab                                                       │
+│ - useTemple.ts composable                                          │
+│ - Tools 分类树实现                                                    │
+│ - 工具详情面板                                                        │
+│ - Metrics Strip 统计行                                               │
+│                                                                      │
+│ 核心文件: frontend/src/pages/temple/                              │
+│ 依赖: Phase 1                                                       │
+│ 工作量: 2 天                                                         │
+└────────────────────────────────────────────────────────────────────┘
+         │
+         ▼
+Phase 3 ──────────────────────────────────────────────────────────────┐
+│ Skills Tab 复用集成                                                   │
+│ - 确认现有 Skills 页面功能完整                                       │
+│ - 与 Temple 页面 Tab 切换联动                                        │
+│ - 样式一致性检查                                                     │
+│                                                                      │
+│ 核心文件: frontend/src/pages/temple/, frontend/src/pages/skills/ │
+│ 依赖: Phase 2                                                       │
+│ 工作量: 0.5 天                                                      │
+└────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 两套 Tools 体系梳理
+
+### 注册层工具（`app/tools/`）
+
+| 工具 | Manifest | 命令数 |
+|------|---------|--------|
+| `file_operator` | `manifests/file_operator.yaml` | 4 |
+| `task_manager` | `manifests/task_manager.yaml` | 5 |
+| `web_fetch` | `manifests/web_fetch.yaml` | 2 |
+| `web_search` | `manifests/web_search.yaml` | 2 |
+
+### Agent 内置层工具（`app/agents/tools/`）
+
+| 类别 | 工具数 | 来源文件 |
+|------|--------|---------|
+| 文件操作 | 4 | `builtins/file_tools.py` |
+| 系统命令 | 2 | `builtins/system_tools.py` |
+| 开发工具 | 2 | `builtins/dev_tools.py` |
+| 协作工具 | 2 | `builtins/collaboration_tools.py` |
+| 知识检索 | 5 | `search.py` |
+| 日程管理 | 5 | `schedule.py` |
+| 任务管理 | 3 | `task.py` |
+| 论坛功能 | 3 | `forum.py` |
+| 时间推理 | 1 | `time_reasoning.py` |
+
+**合计约 34 个工具命令**
+
+---
+
+## 设计决策记录
+
+| 决策 | 原因 |
+|------|------|
+| Tools 只读不做编辑 | 系统内置工具不允许用户手动修改，防止配置破坏 |
+| 不引入 MCP 管理 | 当前 MCP 仅为概念性能力包，无实际 server 连接需求，后期独立需求 |
+| Skills 以 DB 为 source of truth | UI 操作 DB，后端同步生成 .md 文件，用户不直接碰代码 |
+| 复用现有 Skills 页面 | 已有完整 CRUD，改动成本最低 |
+| 按工具来源分类 | 与代码结构对应，用户可追溯工具定义位置 |
+
+---
+
+## 文件变更追踪
+
+| Phase | 新增文件 | 修改文件 |
+|-------|---------|---------|
+| Phase 1 | `app/routers/tools.py`, `app/schemas/tools.py` | `app/main.py`（注册路由） |
+| Phase 2 | `frontend/src/pages/temple/index.vue`, `templePage.css`, `composables/useTemple.ts`, `frontend/src/api/tools.ts` | `frontend/src/pages/temple/index.vue`（重写占位页） |
+| Phase 3 | 无 | `frontend/src/pages/temple/index.vue`（Tab 切换逻辑） |
+
+---
+
+## 与其他 Phase 的关系
+
+| 相关模块 | 协作内容 |
+|---------|---------|
+| Skills Registry (agent-update Phase 9) | Skills 的 DB 层由 `/api/skills` 提供，文件层由 SkillRegistry 管理 |
+| Tool System (tool-update T.1-T.4) | Temple 展示的 Tools 元数据来自 tool-update 建立的 manifest 系统 |
+
+---
+
+## 总工作量
+
+| Phase | 工作量 |
+|-------|--------|
+| Phase 1 | 1 天 |
+| Phase 2 | 2 天 |
+| Phase 3 | 0.5 天 |
+| **总计** | **3.5 天** |
--- a/development-doc/plan/temple-update/checklist.md
+++ b/development-doc/plan/temple-update/checklist.md
@@ -0,0 +1,60 @@
+# 智慧神殿（Temple）执行清单
+
+> 更新日期：2026-04-08
+> 总工作量：3.5 天
+
+---
+
+## Phase 1：后端 Tools API
+
+| 序号 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 1.1 | 创建 `app/schemas/tools.py`，定义 Pydantic Schema | 待开始 | |
+| 1.2 | 创建 `app/routers/tools.py`，实现 `GET /api/tools` | 待开始 | |
+| 1.3 | 实现 ToolRegistry 工具元数据聚合 | 待开始 | 复用 `list_all()` |
+| 1.4 | 实现 Agent 层工具扫描（内省 `@tool` 装饰器） | 待开始 | 扫描 `app/agents/tools/` |
+| 1.5 | 实现分类分组逻辑（注册层 / Agent 层） | 待开始 | |
+| 1.6 | 在 `app/main.py` 注册路由 | 待开始 | |
+| 1.7 | 本地测试 `GET /api/tools` 返回正确数据 | 待开始 | |
+
+---
+
+## Phase 2：前端 Tools Tab
+
+| 序号 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 2.1 | 创建 `frontend/src/api/tools.ts` API 客户端 | 待开始 | |
+| 2.2 | 创建 `frontend/src/pages/temple/composables/useTemple.ts` | 待开始 | |
+| 2.3 | 实现 Tab 切换器组件 | 待开始 | Tools / Skills 切换 |
+| 2.4 | 实现 Metrics Strip 统计行 | 待开始 | |
+| 2.5 | 实现分类树组件（两极结构） | 待开始 | |
+| 2.6 | 实现工具列表（无选中时） | 待开始 | 卡片形式 |
+| 2.7 | 实现工具详情面板 | 待开始 | 含 Commands 列表 |
+| 2.8 | 创建 `templePage.css` 样式 | 待开始 | 复用 jarvis-* 变量 |
+| 2.9 | 重写 `frontend/src/pages/temple/index.vue` | 待开始 | 替换占位符 |
+| 2.10 | 联调后端 API，数据正确渲染 | 待开始 | |
+
+---
+
+## Phase 3：Skills Tab 复用集成
+
+| 序号 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 3.1 | 将 Skills 页面集成到 Temple Skills Tab | 待开始 | 推荐方案 A（条件渲染） |
+| 3.2 | Tab 切换逻辑实现 | 待开始 | |
+| 3.3 | Skills CRUD 功能验证 | 待开始 | 创建/编辑/删除/启用/禁用 |
+| 3.4 | Skills Modal 和 Drawer 交互验证 | 待开始 | |
+| 3.5 | Skills Tab 下 Metrics Strip 切换指标 | 待开始 | 显示 Skills 指标 |
+| 3.6 | Tab 切换状态保持验证 | 待开始 | 不丢失选中状态 |
+
+---
+
+## 验收标准
+
+- [ ] `GET /api/tools` 返回 200，响应结构正确
+- [ ] Temple 页面加载无报错
+- [ ] Tools Tab 显示所有工具分类
+- [ ] 点击工具有详情（Commands 列表完整）
+- [ ] Skills Tab 下 Skills CRUD 全部正常
+- [ ] 样式与 Jarvis 整体风格一致
+- [ ] 无前端 console.error
--- a/development-doc/plan/temple-update/phase-0-current-state.md
+++ b/development-doc/plan/temple-update/phase-0-current-state.md
@@ -0,0 +1,171 @@
+# Phase 0：智慧神殿现状与目标
+
+日期：2026-04-08
+状态：已完成
+
+---
+
+## 1. 本阶段目的
+
+本文件用于统一背景认知，明确：
+
+- Temple 页面当前处于什么状态
+- 主要短板是什么
+- 为什么要升级
+- 升级后的目标形态是什么
+
+---
+
+## 2. 当前 Temple 页面状态
+
+### 2.1 现有实现
+
+`frontend/src/pages/temple/index.vue` 是一个**空白占位页**：
+
+```vue
+<script setup lang="ts">
+// 智慧神殿 - Temple of Wisdom
+</script>
+
+<template>
+  <div class="temple-page">
+    <div class="page-header">
+      <h1>⛩️ 智慧神殿</h1>
+      <p class="subtitle">深邃智慧，永恒传承</p>
+    </div>
+    <div class="page-content">
+      <div class="placeholder-content">
+        <div class="temple-icon">🏛️</div>
+        <p>智慧神殿 - 敬请期待</p>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+### 2.2 触发入口
+
+聊天输入框上方三个按钮之一（`◈`），跳转到 `/temple`：
+
+```html
+<!-- frontend/src/pages/chat/index.vue -->
+<div class="top-buttons-row">
+  <button class="top-action-btn" @click="$router.push('/temple')" title="Temple">
+    <span class="btn-icon temple-icon">◈</span>
+  </button>
+  <button class="top-action-btn" @click="$router.push('/knowledge')" title="Knowledge">
+    <span class="btn-icon knowledge-icon">◉</span>
+  </button>
+  <button class="top-action-btn" @click="$router.push('/war-room')" title="War Room">
+    <span class="btn-icon war-icon">⬡</span>
+  </button>
+</div>
+```
+
+---
+
+## 3. 当前系统现状
+
+### 3.1 Tools 系统（两套并存）
+
+#### A. 工具注册层（`app/tools/`）
+
+已建立 manifest 驱动的工具注册体系：
+
+```
+app/tools/
+├── manifests/              # YAML manifest 定义
+│   ├── file_operator.yaml  # 4 commands: read_file, write_file, list_directory, search_files
+│   ├── task_manager.yaml   # 5 commands: create_task, list_tasks, get_task, complete_task, fail_task
+│   ├── web_fetch.yaml     # 2 commands: fetch, screenshot
+│   └── web_search.yaml     # 2 commands: search, deep_search
+├── registry.py             # ToolRegistry 动态注册中心
+├── implementations/       # 工具 Python 实现
+├── permissions.py         # 权限控制
+├── hooks/                 # Hook 系统（审计日志、安全扫描、危险确认）
+└── schemas/               # Pydantic Schema
+```
+
+#### B. Agent 工具层（`app/agents/tools/`）
+
+LangChain `@tool` 装饰器定义的 Agent 可用工具：
+
+| 类别 | 工具 | 源文件 |
+|------|------|--------|
+| 文件操作 | `glob`, `grep`, `read_file`, `write_file` | `builtins/file_tools.py` |
+| 系统命令 | `bash`, `powershell` | `builtins/system_tools.py` |
+| 开发工具 | `git`, `lsp_tools` | `builtins/dev_tools.py` |
+| 协作工具 | `team_agent`, `task_broadcast` | `builtins/collaboration_tools.py` |
+| 知识检索 | `search_knowledge`, `get_knowledge_graph_context`, `build_knowledge_graph`, `hybrid_search`, `web_search` | `search.py` |
+| 日程管理 | `get_schedule_day`, `create_todo`, `create_schedule_task`, `create_reminder`, `create_goal` | `schedule.py` |
+| 任务管理 | `get_tasks`, `create_task`, `update_task_status` | `task.py` |
+| 论坛功能 | `get_forum_posts`, `create_forum_post`, `scan_forum_for_instructions` | `forum.py` |
+| 时间推理 | `resolve_time_expression` | `time_reasoning.py` |
+
+### 3.2 Skills 系统
+
+#### A. DB 层
+
+已有完整 CRUD：
+
+- 路由：`/api/skills`
+- 字段：`name`, `description`, `instructions`, `agent_type`, `tools`, `visibility`, `is_builtin`, `is_active`
+- Agent types：`general`, `schedule_planner`, `executor`, `librarian`, `analyst`
+- Visibility：`private`, `team`, `market`
+
+#### B. 文件层
+
+`SkillRegistry` 加载 `.md` 文件供 Agent 运行时使用。
+
+加载器：
+- `MCPSkillLoader` - MCP 能力包加载
+- `LocalSkillLoader` - 本地 `.md` 文件加载
+- `PluginLoader` - 插件式加载
+
+### 3.3 当前问题
+
+| 问题 | 影响 |
+|------|------|
+| Temple 页面是空白占位页 | 三个按钮入口之一完全无功能 |
+| Tools 无统一展示入口 | 用户无法看到系统有哪些可用工具 |
+| Tools 散落在两套体系 | manifest 层 + agent 层，用户无感知 |
+| Skills 页面独立在 `/skills` | 工具和技能没有统一管理入口 |
+
+---
+
+## 4. 目标架构
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     /temple                                  │
+│  ┌──────────────────────────────────────────────────────┐   │
+│  │  [◈ 智慧神殿]           [Tools] [Skills]              │   │
+│  └──────────────────────────────────────────────────────┘   │
+│  ┌──────────────────────────────────────────────────────┐   │
+│  │  TOTAL: 30  ACTIVE: 28  AGENTS: 5        (Metrics)   │   │
+│  └──────────────────────────────────────────────────────┘   │
+│                                                              │
+│  ┌────────────────┐  ┌─────────────────────────────────┐   │
+│  │ [分类树]       │  │ [工具详情]                       │   │
+│  │                │  │                                  │   │
+│  │ ▼ 注册层      │  │ file_operator                    │   │
+│  │   文件操作    │  │ 描述: 强大的文件系统操作工具     │   │
+│  │   任务管理    │  │ 命令: 4 个                      │   │
+│  │ ▼ Agent层     │  │ 调用: 1,234 次  错误率: 0.2%   │   │
+│  │   知识检索    │  │                                  │   │
+│  │   日程管理    │  │ [Commands]                       │   │
+│  │   任务管理    │  │ • read_file                     │   │
+│  │   论坛功能    │  │ • write_file                    │   │
+│  │   时间推理    │  │ • list_directory                │   │
+│  └────────────────┘  └─────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 5. 本阶段产出要求
+
+- [x] 团队对 Temple 当前状态和目标方向达成一致
+- [x] Tools 系统两套并存的现状已梳理清楚
+- [x] Skills 系统现有架构已梳理清楚
+- [x] 后续 phase 文档能够在这个认知基础上展开
--- a/development-doc/plan/temple-update/phase-1-tools-api.md
+++ b/development-doc/plan/temple-update/phase-1-tools-api.md
@@ -0,0 +1,135 @@
+# Phase 1：后端 Tools API 开发
+
+日期：2026-04-08
+状态：待开始
+
+---
+
+## 1. 本阶段目的
+
+开发 `GET /api/tools` 接口，聚合两套工具体系的元数据，为前端 Tools Tab 提供数据源。
+
+---
+
+## 2. 核心文件
+
+| 文件 | 作用 |
+|------|------|
+| `app/routers/tools.py` | 新建，Tools 路由 |
+| `app/schemas/tools.py` | 新建，Tools API Pydantic Schema |
+
+---
+
+## 3. API 设计
+
+### 3.1 接口
+
+```
+GET /api/tools
+```
+
+### 3.2 响应结构
+
+```python
+class ToolCommand(BaseModel):
+    name: str
+    description: str
+    parameters: dict  # JSON Schema
+
+class ToolStats(BaseModel):
+    call_count: int
+    error_count: int
+    total_duration_ms: int
+    avg_duration_ms: int
+    error_rate: float
+
+class ToolCategory(BaseModel):
+    name: str  # 显示用中文分类名
+    source: str  # "manifest" | "agent"
+    tools: list[ToolInfo]
+
+class ToolInfo(BaseModel):
+    name: str
+    display_name: str
+    description: str
+    category: str
+    tags: list[str]
+    enabled: bool
+    source: str  # "manifest" | "agent"
+    commands: list[ToolCommand]
+    stats: ToolStats | None
+
+class ToolsResponse(BaseModel):
+    categories: list[ToolCategory]
+    summary: dict:
+        total: int
+        active: int
+        by_source: dict
+```
+
+### 3.3 分类结构
+
+按工具来源分为两大类：
+
+**注册层（source: "manifest"）**
+
+| Category Name | 来源 |
+|--------------|------|
+| `文件操作` | `manifests/file_operator.yaml` |
+| `任务管理` | `manifests/task_manager.yaml` |
+| `网页抓取` | `manifests/web_fetch.yaml` |
+| `联网搜索` | `manifests/web_search.yaml` |
+
+**Agent 层（source: "agent"）**
+
+| Category Name | 来源 |
+|--------------|------|
+| `文件工具` | `builtins/file_tools.py` |
+| `系统命令` | `builtins/system_tools.py` |
+| `开发工具` | `builtins/dev_tools.py` |
+| `协作工具` | `builtins/collaboration_tools.py` |
+| `知识检索` | `search.py` |
+| `日程管理` | `schedule.py` |
+| `任务管理` | `task.py` |
+| `论坛功能` | `forum.py` |
+| `时间推理` | `time_reasoning.py` |
+
+---
+
+## 4. 实现逻辑
+
+### 4.1 数据聚合流程
+
+```
+1. 从 ToolRegistry.list_all() 获取注册层工具元数据
+2. 扫描 app/agents/tools/ 下所有 @tool 装饰器，获取 Agent 层工具
+3. 合并两套数据，按 category 分组
+4. 调用 ToolRegistry.get_stats() 获取统计数据
+5. 返回聚合后的 categories + summary
+```
+
+### 4.2 Agent 层工具扫描
+
+通过内省 `app/agents/tools/` 目录下所有 `@tool` 装饰的函数，提取：
+
+- `__name__` → tool name
+- `__doc__` → description
+- `__annotations__` → parameters schema
+
+### 4.3 注册路由
+
+在 `app/main.py` 中注册新路由：
+
+```python
+from app.routers import tools as tools_router
+app.include_router(tools_router.router, prefix="/api", tags=["tools"])
+```
+
+---
+
+## 5. 产出要求
+
+- [x] `GET /api/tools` 接口可调用，返回完整工具列表
+- [x] 两套工具体系元数据正确聚合
+- [x] 统计数据（调用次数、错误率）正确返回
+- [x] 按 category 分组，source 字段区分来源
--- a/development-doc/plan/temple-update/phase-2-tools-frontend.md
+++ b/development-doc/plan/temple-update/phase-2-tools-frontend.md
@@ -0,0 +1,167 @@
+# Phase 2：前端 Tools Tab 实现
+
+日期：2026-04-08
+状态：待开始
+
+---
+
+## 1. 本阶段目的
+
+实现 Temple 页面的 Tools Tab，包括分类树 + 详情面板 + Metrics Strip。
+
+---
+
+## 2. 核心文件
+
+| 文件 | 作用 |
+|------|------|
+| `frontend/src/api/tools.ts` | 新建，Tools API 客户端 |
+| `frontend/src/pages/temple/composables/useTemple.ts` | 新建，Tab/Skills 逻辑 |
+| `frontend/src/pages/temple/index.vue` | 重写主页面（替换占位符） |
+| `frontend/src/pages/temple/templePage.css` | 新建，样式 |
+
+---
+
+## 3. 页面布局
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  [◈ 智慧神殿]           [Tools] [Skills]      ← Tab 切换器  │
+├─────────────────────────────────────────────────────────────┤
+│  TOTAL: 30  │  ACTIVE: 28  │  AGENTS: 5   ← Metrics Strip  │
+├──────────────────────────┬──────────────────────────────────┤
+│                          │                                  │
+│  [分类树]                 │  [工具详情]                      │
+│                          │                                  │
+│  ▼ 注册层                 │  file_operator                   │
+│    文件操作               │  ────────────                    │
+│    任务管理               │  描述: 强大的文件系统操作工具     │
+│    网页抓取               │  命令: 4 个                     │
+│    联网搜索               │  标签: file, system, essential  │
+│  ▼ Agent层               │  状态: 启用                      │
+│    文件工具               │  调用: 1,234 次                  │
+│    系统命令               │  错误率: 0.2%                    │
+│    开发工具               │  平均耗时: 150ms                 │
+│    协作工具               │                                  │
+│    知识检索               │  [Commands]                      │
+│    日程管理               │  ───────────────────────────    │
+│    任务管理               │  read_file                       │
+│    论坛功能               │  ───────────────────────────    │
+│    时间推理               │  write_file                      │
+│                          │  ───────────────────────────    │
+│                          │  list_directory                  │
+│                          │  ───────────────────────────    │
+│                          │  search_files                    │
+└──────────────────────────┴──────────────────────────────────┘
+```
+
+---
+
+## 4. 组件说明
+
+### 4.1 Tab 切换器
+
+两个 Tab：`Tools` | `Skills`
+- `Tools` → 本 phase 实现
+- `Skills` → Phase 3（复用现有页面）
+
+### 4.2 Metrics Strip
+
+三个统计指标卡片：
+
+| 指标 | 说明 |
+|------|------|
+| `TOTAL` | 系统工具总数（所有工具的 commands 总数） |
+| `ACTIVE` | 启用中的工具数 |
+| `AGENTS` | 工具绑定的 Agent 类型数（固定 5） |
+
+### 4.3 分类树
+
+- 两级结构：大类（注册层 / Agent 层）→ 具体分类
+- 点击分类 → 右侧显示该分类下的工具列表
+- 点击工具 → 右侧显示工具详情
+
+### 4.4 工具详情面板
+
+当无工具选中时：显示分类下的工具列表（卡片形式）
+当有工具选中时：显示工具详情
+
+详情内容：
+- **Name / Display Name**
+- **Description**
+- **Category / Tags**
+- **Enabled status**
+- **Stats**: call_count, error_rate, avg_duration_ms
+- **Commands**: 每个 command 的 name + description（只读）
+
+---
+
+## 5. useTemple.ts 接口设计
+
+```typescript
+// useTemple.ts
+export function useTemple() {
+  // State
+  const activeTab = ref<'tools' | 'skills'>('tools')
+  const categories = ref<ToolCategory[]>([])
+  const selectedCategory = ref<string | null>(null)
+  const selectedTool = ref<ToolInfo | null>(null)
+  const loading = ref(false)
+
+  // Computed
+  const summary = computed(() => { ... })
+  const currentCategoryTools = computed(() => { ... })
+
+  // Actions
+  async function fetchTools() { ... }
+  function selectCategory(name: string) { ... }
+  function selectTool(tool: ToolInfo) { ... }
+
+  return {
+    activeTab,
+    categories,
+    selectedCategory,
+    selectedTool,
+    loading,
+    summary,
+    currentCategoryTools,
+    fetchTools,
+    selectCategory,
+    selectTool,
+  }
+}
+```
+
+---
+
+## 6. 样式规范
+
+沿用 Jarvis 现有风格：
+
+```css
+/* templePage.css */
+.temple-page {
+  /* 复用 jarvis-* CSS 变量 */
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.metric-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+}
+
+.category-tree {
+  /* 深色终端风格 */
+}
+```
+
+---
+
+## 7. 产出要求
+
+- [x] Tab 切换器正常切换 Tools / Skills
+- [x] Metrics Strip 正确显示统计数据
+- [x] 分类树正确渲染，展开/收起正常
+- [x] 点击工具有详情面板，Commands 列表完整
+- [x] 样式与 Jarvis 整体风格一致
--- a/development-doc/plan/temple-update/phase-3-skills-integration.md
+++ b/development-doc/plan/temple-update/phase-3-skills-integration.md
@@ -0,0 +1,88 @@
+# Phase 3：Skills Tab 复用集成
+
+日期：2026-04-08
+状态：待开始
+
+---
+
+## 1. 本阶段目的
+
+将现有的 `/skills` 页面完整嵌入 Temple 页面的 Skills Tab，实现统一入口。
+
+---
+
+## 2. 核心文件
+
+| 文件 | 作用 |
+|------|------|
+| `frontend/src/pages/skills/index.vue` | 已有，Skills 完整页面 |
+| `frontend/src/pages/skills/composables/useSkillsPage.ts` | 已有，Skills 逻辑 |
+| `frontend/src/api/skill.ts` | 已有，Skills API 客户端 |
+
+---
+
+## 3. 集成方式
+
+### 3.1 方案选择
+
+**方案 A（推荐）：Tab 内条件渲染**
+
+在 `Temple/index.vue` 中使用 `v-if` 切换：
+
+```vue
+<div v-if="activeTab === 'skills'">
+  <!-- Skills 页面内容内联，或引用子组件 -->
+</div>
+```
+
+优点：单一页面，状态共享简单
+缺点：Skills 页面较大，代码集中
+
+**方案 B：路由嵌套**
+
+```vue
+// Temple/index.vue
+<router-view />
+```
+
+在 `skills/` 路由加 `parent: temple`
+
+优点：页面分离，代码清晰
+缺点：需要改路由配置
+
+**推荐方案 A**，改动最小，Skills 页面代码以内联形式放入 Temple。
+
+### 3.2 Tab 切换逻辑
+
+```typescript
+function switchTab(tab: 'tools' | 'skills') {
+  activeTab.value = tab
+  if (tab === 'skills') {
+    // Skills 页面初始化（如果需要）
+  }
+}
+```
+
+---
+
+## 4. 样式调整
+
+Skills 页面样式独立在 `skillsPage.css`，切换 Tab 时保留其样式上下文。
+
+---
+
+## 5. 注意事项
+
+- Skills 页面的 Modal（创建/编辑）需要在 Tab 切换后仍可正常弹出
+- Skills 页面的 API 调用（`skillApi.list()`, `skillApi.create()` 等）保持不变
+- Metrics Strip 在 Skills Tab 下显示不同的指标（TOTAL / ACTIVE / UPTIME）
+
+---
+
+## 6. 产出要求
+
+- [x] Skills Tab 点击后正确切换到 Skills 页面
+- [x] Skills 的 CRUD（创建/编辑/删除/启用/禁用）功能正常
+- [x] Skills 的 MCP Panel 仍可正常打开
+- [x] Skills 页面的 Modal、Drawer 等交互正常
+- [x] Tab 切换不丢失状态