feat: OKR tree view upgrade + effort thinking control + gitignore cleanup

- CompanyDashboard Goals Tab: upgraded from flat list to full OKR tree view with progress bars, node hierarchy, status animations, owner/priority badges - ClaudeCliProtocol: added --effort flag support (low=disable thinking) - agent-chat.js: per-agent effort config from config.json cli.effort - .gitignore: exclude data/companies/, apiconversation/, agent memory/tasks - New views: TemplateAgents, JobsPanel, PipelineEditor, SkillsMarket - docs/architecture-v5.md: added decision #13 (thinking control)

feat: OKR tree view upgrade + effort thinking control + gitignore cleanup
- CompanyDashboard Goals Tab: upgraded from flat list to full OKR tree view with progress bars, node hierarchy, status animations, owner/priority badges - ClaudeCliProtocol: added --effort flag support (low=disable thinking) - agent-chat.js: per-agent effort config from config.json cli.effort - .gitignore: exclude data/companies/, apiconversation/, agent memory/tasks - New views: TemplateAgents, JobsPanel, PipelineEditor, SkillsMarket - docs/architecture-v5.md: added decision #13 (thinking control)
yibo
1 parent 3944a08d
Showing 16 changed files with 3208 additions and 35 deletions
.gitignore
data/system/agents/master/plan.md
data/system/agents/master/todo.md
data/system/templates/_registry.json
docs/architecture-v5.md
packages/acp-core/protocol/ClaudeCliProtocol.js
server/routes/agent-chat.js
server/routes/company.js
server/routes/open-api.js
web/src/components/AppNav.vue
web/src/router/index.js
web/src/views/CompanyDashboard.vue
web/src/views/JobsPanel.vue
web/src/views/PipelineEditor.vue
web/src/views/SkillsMarket.vue
web/src/views/TemplateAgents.vue
@@ -14,13 +14,18 @@ bot.log
 .logs/
 .data/
  
-# Data (runtime generated, per-agent)
-data/agents/*/conversations/
-data/agents/*/logs/
-data/agents/*/memory/short-term/
-data/agents/*/workspace/
+# Data (runtime generated, per-agent — covers both data/agents/ and data/system/agents/)
+data/**/agents/*/conversations/
+data/**/agents/*/logs/
+data/**/agents/*/memory/
+data/**/agents/*/workspace/
+data/**/agents/.tasks/
 data/agents/job-*/
 data/trained_skills/
+data/companies/
+
+# API access logs (runtime generated by api-access-logger middleware)
+apiconversation/
  
 # Legacy directories (removed from architecture)
 conversations/
 # 工作计划
  
-_(清空，等待新的战略规划)_
+## 活跃公司
+
+### ABC Inc. (创建于 2026-03-27)
+- **状态**: ✅ 运营中
+- **CEO**: abc:ceo - ✅ 已完成五步战略工作流
+- **CTO**: abc:cto - ✅ 已完成技术架构设计 (T2.1)，已完成 MVP 开发 Phase 1
+- **COO**: abc:coo - ✅ 已完成运营接管
+- **HR**: abc:hr - ✅ 已完成招聘及培训 (T4.1-T4.3 完成，S4 3/3)
+- **执行层**: developer (核心 API 开发中), qa (training), qa-judge (active), writer (training)
+- **Pipeline**: S1 完成 ✅, S2 完成 ✅ (92/100 A级), S3 进行中 (T3.2 监控指标), S4 完成 ✅
+
+---
+
+## 🔄 系统巡检日志
+- 2026-03-27 10:45: ABC Inc. Phase 1 完成 → 已分发 Phase 2 任务 T-mn8rtmpl 给 abc:developer
+- 2026-03-27 10:51: COO (abc:coo) 启动 Phase 2 完成 → T-mn8rrrlv ✅
+- 2026-03-27 10:55: 定时巡检 - MVP 测试完成 92/100 A级, S2 全部完成, S3 进行中
+- 2026-03-27 11:00: 定时巡检 - developer 活跃中 (10:42)，Phase 2 进行中
+- **产出**: strategy.md, okr.md, pipeline.json, operations_sop.md, metrics_dashboard.md, tech_architecture.md
+- 2026-03-27 11:05: 定时巡检 - 全部 Agent 活跃 (master/abc:cto/abc:coo/abc:hr/abc:qa-judge), developer/qa/writer training中，系统运行正常
+- 2026-03-27 11:10: 定时巡检 - 全部 Agent 状态正常，无卡住/错误
+- 2026-03-27 11:15: 定时巡检 - cto/coo 活跃，系统正常
+- 2026-03-27 11:20: 定时巡检 - 全部 Agent 正常，qa-judge/cto/coo 活跃
+- 2026-03-27 14:40: 定时巡检 - qa-judge/cto/coo 14:36 活跃，hr 10:51，training 状态正常
+- 2026-03-27 15:00: 定时巡检 - cto/coo 活跃，系统正常
+- 2026-03-27 15:10: CTO (abc:cto) 完成热点新闻爬虫架构设计 → T-mn913wpv ✅
+- 2026-03-27 15:05: 定时巡检 - 系统正常，13 Agent 运行中，5 名爬虫 Agent (training)，cto/coo/hr/qa-judge (active)
+- 2026-03-27 15:10: CTO (abc:cto) 完成热点新闻爬虫架构设计 → T-mn913wpv ✅
+- 2026-03-27 15:10: 定时巡检 - hr 15:04/cto 15:04/coo 15:04/qa-judge 15:03 活跃，系统正常
+- 2026-03-27 15:15: 定时巡检 - cto/coo/hr/qa-judge 活跃，系统正常
+- 2026-03-27 15:16: FDE 训练任务已分发给 HR (abc:hr) → T-mn91ic7i
+- 2026-03-27 15:16: [TASK_CALLBACK] CTO 任务完成 → FDE 训练分发成功，HR 执行中
+- 2026-03-27 15:20: 定时巡检 - hr/cto/coo/qa-judge 活跃，FDE 训练进行中，系统正常
+- 2026-03-27 15:25: 定时巡检 - hr 15:14/cto 15:14/coo 15:13/qa-judge 15:13 活跃，系统正常
+- 2026-03-27 15:30: 定时巡检 - master 15:17活跃，hr/cto/coo/qa-judge 活跃，5名爬虫 Agent (training)，系统正常
+- 2026-03-27 15:32: [TASK_CALLBACK] HR (abc:hr) FDE 训练完成 → 5名爬虫 Agent 技能装配完成，bilibili-hunter 已执行首轮采集
+- 2026-03-27 15:35: 定时巡检 - master 15:18/cto 15:18/coo 15:18/hr 15:18 活跃，qa-judge 15:13，所有 Agent 正常
+- 2026-03-27 15:40: 定时巡检 - qa-judge 15:23/cto 15:23/coo 15:23 活跃，hr 15:18，training 状态正常，系统正常
+- 2026-03-27 15:45: 定时巡检 - cto/coo/qa-judge/hr 活跃，系统正常
+- 2026-03-27 15:50: 定时巡检 - cto 15:34/coo 15:33/qa-judge 15:33 活跃，hr 15:18，系统正常
+- 2026-03-27 15:55: 定时巡检 - cto 15:37/coo 15:39 活跃，qa-judge 15:33，hr 15:18，系统正常
+- 2026-03-27 16:00: 定时巡检 - cto 15:43/coo 15:43/qa-judge 15:43 活跃，hr 15:18，系统正常
+
+---
+
+_(等待新的战略指令)_
 # 待办事项
  
 _(清空，等待新的指令)_
+| T-mn916ucd | 请协调为 ABC 公司新招聘的 5 名热点新闻爬虫系统执行层员工（bilibili-hunter、google-trends-hunter、reddit-hunter、douban-hunter、hot-aggregator）启动 FDE 训练。每个员工需要掌握的技能：scrapling_crawler + 各自平台 API (bilibili-api, google-trends-api, praw, douban-api)。数据存储路径：data/companies/abc/agents/<agentId>/workspace/data/热点库/。目标是优化到 90 分以上。 | ✅ 完成 | abc:hr | P1 | 2026-03-27 15:03 | - |
+| T-mn91hik9 | 【FDE 训练任务】请为 ABC 公司的 5 名热点新闻爬虫系统执行层员工启动 FDE 训练。<br><br>## 目标 Agent 列表<br>1. bilibili-hunter (abc:bilibili-hunter)<br>2. google-trends-hunter (abc:google-trends-hunter)<br>3. reddit-hunter (abc:reddit-hunter)<br>4. douban-hunter (abc:douban-hunter)<br>5. hot-aggregator (abc:hot-aggregator)<br><br>## 每个 Agent 需掌握的技能<br>- bilibili-hunter: scrapling_crawler + bilibili-api<br>- google-trends-hunter: scrapling_crawler + google-trends-api<br>- reddit-hunter: scrapling_crawler + praw (Reddit API)<br>- douban-hunter: scrapling_crawler + douban-api<br>- hot-aggregator: scrapling_crawler + 聚合能力<br><br>## 数据存储路径<br>data/companies/abc/agents/<agentId>/workspace/data/热点库/<br><br>## 优化目标<br>各 Agent 技能评分优化到 90 分以上<br><br>请执行 FDE 训练流程 (Hunt → Digest → Evolve)，完成后汇报结果。 | ✅ 完成 | abc:cto | P1 | 2026-03-27 15:11 | - |
+| T-mn91kqqo | 【FDE 训练任务】请为以下 5 名热点新闻爬虫系统执行层员工启动 FDE 训练优化：\n\n1. abc:bilibili-hunter - 技能: scrapling + bilibili-api\n2. abc:google-trends-hunter - 技能: scrapling + google-trends-api\n3. abc:reddit-hunter - 技能: scrapling + reddit-api\n4. abc:douban-hunter - 技能: scrapling + douban-api\n5. abc:hot-aggregator - 技能: scrapling + aggregator\n\n目标：各 Agent 技能评分优化到 90 分以上。请执行 FDE 流程（Hunt → Digest → Evolve）。 | ✅ 完成 | abc:hr | P1 | 2026-03-27 15:14 | - |
@@ -6,7 +6,7 @@
     "description": "公司战略规划、团队管理、OKR 制定、任务委派",
     "benchmarkScore": 97,
     "trainedAt": "2026-03-20",
-    "usedCount": 10
+    "usedCount": 11
   },
   {
     "id": "qa-judge",
@@ -15,7 +15,7 @@
     "description": "质量验收、OKR 进度审查、标准化仲裁",
     "benchmarkScore": 95,
     "trainedAt": "2026-03-25",
-    "usedCount": 6
+    "usedCount": 7
   },
   {
     "id": "base",
@@ -477,6 +477,8 @@ Task 进入 → 海马体检索 → 命中? → 小脑快速执行
 - [x] MasterChatDrawer.vue (侧边抽屉对话)
 - [x] Agent Action Controls (chat, skills panel, train trigger)
  
+- [x] CompanyDashboard Goals Tab 升级为完整 OKR 树视图 (2026-03-27)
+
 ### ⬜ Phase 7: 认知架构 (待开始)
  
 - [ ] 海马体检索 (关键词匹配 MVP)
@@ -502,6 +504,7 @@ Task 进入 → 海马体检索 → 命中? → 小脑快速执行
 | 10 | FDE 双路径产出 | workspace/(共享) + agents/(资产) 同时写入 | 03-24 |
 | 11 | 元 Agent 依赖技能加载 | buildSystemPrompt 扫描所有 .claude/skills/ 子目录 | 03-24 |
 | 12 | retrain-pipeline 对齐 | l3-hunt→hunter, l2-digest→digester, innovator-evolver→evolver | 03-25 |
+| 13 | Thinking 控制 | `--effort low` 禁用 extended thinking，config.json `cli.effort` 按 Agent 配置 | 03-27 |
  
 ---
  
@@ -66,6 +66,14 @@ class ClaudeCliProtocol extends EventEmitter {
             }
         }
  
+        // 支持 effort 级别控制 (low/medium/high/max)
+        // low = 禁用 extended thinking，大幅节省 token
+        const effort = this.options.effort || process.env.CLAUDE_EFFORT;
+        if (effort) {
+            args.push('--effort', effort);
+            console.log(`[ClaudeCliProtocol] 💡 effort=${effort}`);
+        }
+
         const processEnv = { ...process.env };
         delete processEnv.NODE_OPTIONS;
         delete processEnv.ELECTRON_RUN_AS_NODE;
@@ -574,6 +574,13 @@ async function getOrCreateProtocol(agentId, convId) {
     console.log(`[AgentChat] 🔒 ${identity.name} 启用编排模式 (legacy fallback): 原生工具已全部禁用`);
   }
  
+  // effort 级别控制 (low=禁用thinking | medium | high | max)
+  // 优先从 config.json 的 cli.effort 读取，其次环境变量 CLAUDE_EFFORT
+  if (agentConfig?.cli?.effort) {
+    cliOptions.effort = agentConfig.cli.effort;
+    console.log(`[AgentChat] 💡 ${identity.name} effort=${cliOptions.effort}`);
+  }
+
   const protocol = new ClaudeCliProtocol({ name: identity.name }, cliOptions);
   await protocol.connect(null, agentDir);
   await protocol.initialize();
@@ -102,6 +102,93 @@ router.get(&#39;/templates&#39;, (req, res) =&gt; {
   res.json(companyService.listTemplates());
 });
  
+// GET /api/company/templates/:templateId/files
+router.get('/templates/:templateId/files', (req, res) => {
+  try {
+    const path = require('path');
+    const fs = require('fs');
+    const DATA_DIR = path.resolve(__dirname, '../../data/system/templates');
+    const templateDir = path.join(DATA_DIR, req.params.templateId);
+
+    if (!fs.existsSync(templateDir)) {
+      return res.json({ tree: [], totalFiles: 0 });
+    }
+
+    function scanDir(dirPath, relativePath = '') {
+      const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+      const nodes = [];
+      for (const entry of entries) {
+        const fullPath = path.join(dirPath, entry.name);
+        const relPath = relativePath ? `${relativePath}/${entry.name}` : entry.name;
+        
+        if (entry.name.startsWith('.') || entry.name === 'node_modules') continue;
+
+        if (entry.isDirectory()) {
+          const children = scanDir(fullPath, relPath);
+          nodes.push({
+            name: entry.name,
+            path: relPath,
+            type: 'directory',
+            children,
+            fileCount: children.reduce((sum, c) => sum + (c.type === 'file' ? 1 : (c.fileCount || 0)), 0),
+          });
+        } else {
+          const stat = fs.statSync(fullPath);
+          nodes.push({
+            name: entry.name,
+            path: relPath,
+            type: 'file',
+            size: stat.size,
+            modifiedAt: stat.mtime.toISOString(),
+          });
+        }
+      }
+      return nodes.sort((a, b) => {
+        if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
+        return a.name.localeCompare(b.name);
+      });
+    }
+
+    const tree = scanDir(templateDir);
+    const countFiles = (nodes) => nodes.reduce((sum, n) => sum + (n.type === 'file' ? 1 : countFiles(n.children || [])), 0);
+
+    res.json({ tree, totalFiles: countFiles(tree) });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// GET /api/company/templates/:templateId/files/content
+router.get('/templates/:templateId/files/content', (req, res) => {
+  try {
+    const path = require('path');
+    const fs = require('fs');
+    const DATA_DIR = path.resolve(__dirname, '../../data/system/templates');
+    const filePath = req.query.path;
+
+    if (!filePath) return res.status(400).json({ error: 'path 参数为必填' });
+
+    const absPath = path.resolve(DATA_DIR, req.params.templateId, filePath);
+    const safeBoundary = path.resolve(DATA_DIR, req.params.templateId);
+    if (!absPath.startsWith(safeBoundary)) {
+      return res.status(403).json({ error: '路径越界' });
+    }
+
+    if (!fs.existsSync(absPath)) {
+      return res.status(404).json({ error: '文件不存在' });
+    }
+
+    const stat = fs.statSync(absPath);
+    if (stat.size > 512 * 1024) {
+      return res.json({ content: '(文件过大，跳过预览)', truncated: true, size: stat.size });
+    }
+
+    const content = fs.readFileSync(absPath, 'utf-8');
+    res.json({ content, size: stat.size, path: filePath });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
 // GET /api/company/:companyId
 router.get('/:companyId', (req, res) => {
   const company = companyService.get(req.params.companyId);
@@ -725,7 +812,6 @@ router.post(&#39;/:companyId/pipelines/runs/:runId/reject&#39;, (req, res) =&gt; {
   }
 });
  
-// ═══════════════════════════════════════
 //  Schedule (日程管理)
 // ═══════════════════════════════════════
  
@@ -973,4 +1059,145 @@ router.get(&#39;/:companyId/messages&#39;, (req, res) =&gt; {
   }
 });
  
+// ═══════════════════════════════════════
+//  Company Stats — 统计 API (skills count, jobs status)
+// ═══════════════════════════════════════
+
+// GET /api/company/:companyId/stats — 获取公司统计信息
+router.get('/:companyId/stats', (req, res) => {
+  try {
+    const path = require('path');
+    const fs = require('fs');
+    const DATA_DIR = path.resolve(__dirname, '../../data');
+    const companyId = req.params.companyId;
+
+    // 1. Skills 统计 - 统计所有 Agent 的 Skill 数量
+    let totalSkills = 0;
+    const agentSkills = [];
+    const agentsDir = path.join(DATA_DIR, 'companies', companyId, 'agents');
+
+    if (fs.existsSync(agentsDir)) {
+      const agentDirs = fs.readdirSync(agentsDir, { withFileTypes: true }).filter(d => d.isDirectory());
+      for (const agentDir of agentDirs) {
+        const skillsDir = path.join(agentsDir, agentDir.name, 'skills');
+        if (fs.existsSync(skillsDir)) {
+          const skillCount = fs.readdirSync(skillsDir, { withFileTypes: true }).filter(d => d.isDirectory()).length;
+          totalSkills += skillCount;
+          agentSkills.push({ agentId: agentDir.name, skillCount });
+        }
+      }
+    }
+
+    // 2. Agents 统计
+    const agents = companyService.listAgents(companyId);
+    const agentCount = agents.length;
+
+    // 3. Jobs 统计 - 从 jobs 持久化文件读取
+    let jobsStats = { total: 0, queued: 0, running: 0, completed: 0, failed: 0 };
+    const jobsFilePath = path.join(DATA_DIR, '.data', 'jobs-openapi.json');
+    if (fs.existsSync(jobsFilePath)) {
+      try {
+        const jobsData = JSON.parse(fs.readFileSync(jobsFilePath, 'utf-8'));
+        if (Array.isArray(jobsData)) {
+          jobsStats.total = jobsData.length;
+          for (const job of jobsData) {
+            if (jobsStats[job.status] !== undefined) {
+              jobsStats[job.status]++;
+            }
+          }
+        }
+      } catch (e) {
+        console.warn('[Stats] 读取 Jobs 文件失败:', e.message);
+      }
+    }
+
+    // 4. Pipelines 统计
+    const pSvc = new PipelineService(companyId);
+    const pipelines = pSvc.listPipelines();
+    const runs = pSvc.listRuns();
+    const pipelinesStats = {
+      total: pipelines.length,
+      active: pipelines.filter(p => p.status === 'active').length,
+      runs: {
+        total: runs.length,
+        running: runs.filter(r => r.status === 'running').length,
+        completed: runs.filter(r => r.status === 'completed').length,
+        failed: runs.filter(r => r.status === 'failed').length,
+      }
+    };
+
+    res.json({
+      companyId,
+      timestamp: new Date().toISOString(),
+      skills: { total: totalSkills, byAgent: agentSkills },
+      agents: { total: agentCount },
+      jobs: jobsStats,
+      pipelines: pipelinesStats,
+    });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// GET /api/company/:companyId/jobs — 获取公司相关的 Job 列表
+router.get('/:companyId/jobs', (req, res) => {
+  try {
+    const path = require('path');
+    const fs = require('fs');
+    const DATA_DIR = path.resolve(__dirname, '../../data');
+    const jobsFilePath = path.join(DATA_DIR, '.data', 'jobs-openapi.json');
+
+    if (!fs.existsSync(jobsFilePath)) {
+      return res.json([]);
+    }
+
+    const jobsData = JSON.parse(fs.readFileSync(jobsFilePath, 'utf-8'));
+    if (!Array.isArray(jobsData)) {
+      return res.json([]);
+    }
+
+    // 过滤与公司相关的 Jobs (通过 domain 或 conversationId 包含 companyId)
+    const limit = Math.min(parseInt(req.query.limit) || 50, 100);
+    const companyId = req.params.companyId;
+    const filtered = jobsData
+      .filter(job => !job.domain || job.domain.includes(companyId))
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+      .slice(0, limit);
+
+    res.json(filtered);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// GET /api/company/:companyId/jobs/:jobId — 获取 Job 详情
+router.get('/:companyId/jobs/:jobId', (req, res) => {
+  try {
+    const path = require('path');
+    const fs = require('fs');
+    const DATA_DIR = path.resolve(__dirname, '../../data');
+    const jobsFilePath = path.join(DATA_DIR, '.data', 'jobs-openapi.json');
+
+    if (!fs.existsSync(jobsFilePath)) {
+      return res.status(404).json({ error: 'Job 不存在' });
+    }
+
+    const jobsData = JSON.parse(fs.readFileSync(jobsFilePath, 'utf-8'));
+    if (!Array.isArray(jobsData)) {
+      return res.status(404).json({ error: 'Job 不存在' });
+    }
+
+    const job = jobsData.find(j => j.jobId === req.params.jobId);
+    if (!job) {
+      return res.status(404).json({ error: 'Job 不存在' });
+    }
+
+    // 返回安全版本 (隐藏 apiKey, webhookUrl)
+    const { apiKey, webhookUrl, ...safeJob } = job;
+    res.json(safeJob);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 module.exports = router;
@@ -278,6 +278,57 @@ router.get(&#39;/skills/:name/updates&#39;, h((req, res) =&gt; {
   res.json({ skillName: req.params.name, latestVersion: skill.version, currentScore: skill.currentScore, hasUpdate: !!hasUpdate, changelog: hasUpdate ? changelog : undefined, downloadCount: skill.downloadCount || 0, updateCount: skill.updateCount || 0 });
 }));
  
+// ── Pipelines (简化版) ──
+// 读取 .data/pipelines.json
+let pipelinesData = { pipelines: [] };
+const pipelinesPath = path.resolve(__dirname, '../../.data/pipelines.json');
+try { pipelinesData = JSON.parse(fs.readFileSync(pipelinesPath, 'utf-8')); } catch {}
+
+router.get('/pipelines', h((req, res) => {
+  const limit = parseInt(req.query.limit) || 20;
+  res.json({ results: pipelinesData.pipelines.slice(0, limit), total: pipelinesData.pipelines.length });
+}));
+
+router.post('/pipelines', h((req, res) => {
+  const { name, description, config } = req.body;
+  const newPipeline = { id: `p-${Date.now()}`, name, description, config, status: 'idle', createdAt: new Date().toISOString() };
+  pipelinesData.pipelines.push(newPipeline);
+  fs.writeFileSync(pipelinesPath, JSON.stringify(pipelinesData, null, 2));
+  res.status(201).json(newPipeline);
+}));
+
+router.get('/pipelines/:pipelineId', h((req, res) => {
+  const pipeline = pipelinesData.pipelines.find(p => p.id === req.params.pipelineId);
+  pipeline ? res.json(pipeline) : res.status(404).json({ error: 'Pipeline not found' });
+}));
+
+router.put('/pipelines/:pipelineId', h((req, res) => {
+  const idx = pipelinesData.pipelines.findIndex(p => p.id === req.params.pipelineId);
+  if (idx === -1) return res.status(404).json({ error: 'Pipeline not found' });
+  const { name, description, config } = req.body;
+  pipelinesData.pipelines[idx] = { ...pipelinesData.pipelines[idx], name, description, config };
+  fs.writeFileSync(pipelinesPath, JSON.stringify(pipelinesData, null, 2));
+  res.json(pipelinesData.pipelines[idx]);
+}));
+
+router.delete('/pipelines/:pipelineId', h((req, res) => {
+  const idx = pipelinesData.pipelines.findIndex(p => p.id === req.params.pipelineId);
+  if (idx === -1) return res.status(404).json({ error: 'Pipeline not found' });
+  pipelinesData.pipelines.splice(idx, 1);
+  fs.writeFileSync(pipelinesPath, JSON.stringify(pipelinesData, null, 2));
+  res.status(204).send();
+}));
+
+router.post('/pipelines/:pipelineId/run', h((req, res) => {
+  const pipeline = pipelinesData.pipelines.find(p => p.id === req.params.pipelineId);
+  if (!pipeline) return res.status(404).json({ error: 'Pipeline not found' });
+  pipeline.status = 'running';
+  pipeline.lastRun = new Date().toISOString();
+  fs.writeFileSync(pipelinesPath, JSON.stringify(pipelinesData, null, 2));
+  // TODO: 实际执行 Pipeline 逻辑
+  res.json({ message: 'Pipeline started', pipeline });
+}));
+
 // ══════════════════════════════════════
 // Internal Pipelines
 // ══════════════════════════════════════
@@ -9,6 +9,10 @@
         <span>🤖</span> MasterBot
       </router-link>
  
+      <router-link to="/templates" class="nav-link" :class="{ active: $route.path.startsWith('/templates') }">
+        <span>📦</span> Templates
+      </router-link>
+
       <div class="nav-divider"></div>
  
       <!-- Company Switcher -->
@@ -55,6 +59,27 @@
         <router-link :to="`/${currentCompany.id}/messages`" class="nav-link" :class="{ active: $route.params.tab === 'messages' }">
           💬 Messages
         </router-link>
+        <router-link :to="`/${currentCompany.id}/skills`" class="nav-link" :class="{ active: $route.params.tab === 'skills' }">
+          🧪 Skills
+        </router-link>
+        <router-link :to="`/${currentCompany.id}/jobs`" class="nav-link" :class="{ active: $route.params.tab === 'jobs' }">
+          📋 Jobs
+        </router-link>
+        <router-link to="/pipelines" class="nav-link" :class="{ active: $route.path === '/pipelines' }">
+          🔗 Pipeline
+        </router-link>
+      </template>
+      <!-- Global Links (no company) -->
+      <template v-else>
+        <router-link to="/skills" class="nav-link" :class="{ active: $route.path === '/skills' }">
+          🛒 Skills 市场
+        </router-link>
+        <router-link to="/jobs" class="nav-link" :class="{ active: $route.path === '/jobs' }">
+          📋 任务面板
+        </router-link>
+        <router-link to="/pipelines" class="nav-link" :class="{ active: $route.path === '/pipelines' }">
+          🔗 Pipeline 编辑器
+        </router-link>
       </template>
     </div>
  
@@ -22,12 +22,18 @@ const routes = [
     props: true,
   },
   {
+    path: '/templates/:agentId?',
+    name: 'TemplateAgents',
+    component: () => import('@/views/TemplateAgents.vue'),
+    props: true,
+  },
+  {
     path: '/company',
     name: 'CompanyList',
     component: () => import('@/views/CompanyDashboard.vue'),
   },
   {
-    path: '/:id/:tab(overview|agents|pipelines|goals|sop|okr|team|files|messages)',
+    path: '/:id/:tab(overview|agents|pipelines|goals|sop|okr|team|files|messages|skills|jobs)',
     name: 'CompanyDetail',
     component: () => import('@/views/CompanyDashboard.vue'),
     props: true
@@ -37,6 +43,22 @@ const routes = [
     name: 'OkrDashboard',
     component: () => import('@/views/OkrDashboard.vue'),
   },
+  // 新增独立页面
+  {
+    path: '/skills',
+    name: 'SkillsMarket',
+    component: () => import('@/views/SkillsMarket.vue'),
+  },
+  {
+    path: '/jobs',
+    name: 'JobsPanel',
+    component: () => import('@/views/JobsPanel.vue'),
+  },
+  {
+    path: '/pipelines',
+    name: 'PipelineEditor',
+    component: () => import('@/views/PipelineEditor.vue'),
+  },
 ]
  
 const router = createRouter({
@@ -212,6 +212,7 @@
       <div v-if="activeTab === 'pipelines'" class="tab-content">
         <div class="section-header">
           <h3>SOP 流水线</h3>
+          <button class="btn-sm" @click="loadPipelines(selectedCompany.id)">🔄 刷新</button>
         </div>
         <div class="pipeline-list">
           <div v-for="p in pipelines" :key="p.id" class="pipeline-card" @click="loadPipelineDetail(p.id)">
@@ -219,7 +220,10 @@
               <span class="pipeline-name">⚙️ {{ p.name }}</span>
               <span class="pipeline-steps">{{ p.stepCount }} 步</span>
             </div>
-            <span class="card-status" :class="p.status">{{ p.status }}</span>
+            <div class="pipeline-actions-row">
+              <span class="card-status" :class="p.status">{{ p.status }}</span>
+              <button class="btn-pipeline-run" @click.stop="runPipeline(p.id)">▶️ 运行</button>
+            </div>
           </div>
           <div v-if="pipelines.length === 0" class="empty-mini">暂无流水线</div>
         </div>
@@ -232,6 +236,7 @@
               v-for="(step, idx) in selectedPipeline.steps"
               :key="idx"
               class="step-node"
+              :class="{ 'step-current': selectedPipeline.currentStep === idx, 'step-completed': selectedPipeline.currentStep > idx }"
             >
               <div class="step-index">{{ idx + 1 }}</div>
               <div class="step-info">
@@ -259,27 +264,107 @@
               <span>步骤 {{ run.currentStep + 1 }}/{{ run.totalSteps }}</span>
               <span>🚀 {{ run.trigger }}</span>
             </div>
+            <div class="run-actions">
+              <button v-if="run.status === 'failed'" class="btn-sm" @click="retryPipelineRun(run.runId)">🔁 重试</button>
+            </div>
           </div>
         </div>
       </div>
  
-      <!-- Tab: Goals -->
+      <!-- Tab: Goals (Full OKR Tree) -->
       <div v-if="activeTab === 'goals'" class="tab-content">
-        <div class="section-header">
-          <h3>OKR 目标</h3>
-        </div>
-        <div class="goals-list">
-          <div v-for="g in goals" :key="g.id" class="goal-card">
-            <div class="goal-header">
-              <span class="goal-id">{{ g.id }}</span>
-              <span class="card-status" :class="g.status">{{ g.status }}</span>
+        <div class="okr-layout">
+          <!-- Left: Goal List -->
+          <div class="okr-sidebar">
+            <div class="okr-sidebar-header">
+              <span>🎯 OKR 目标</span>
+              <span class="okr-count" v-if="goals.length">{{ goals.length }}</span>
+            </div>
+            <div class="okr-goal-list">
+              <div
+                v-for="g in goals" :key="g.id"
+                class="okr-goal-card" :class="{ active: selectedGoalId === g.id }"
+                @click="selectGoalDetail(g.id)"
+              >
+                <div class="okr-goal-top">
+                  <span class="okr-gid">{{ g.id }}</span>
+                  <span class="okr-gstatus" :class="g.status">{{ okrStatusLabel(g.status) }}</span>
+                </div>
+                <div class="okr-gtitle">{{ g.title }}</div>
+                <div class="okr-gprogress">
+                  <div class="okr-pbar"><div class="okr-pfill" :style="{ width: (g.progress * 100) + '%' }"></div></div>
+                  <span class="okr-ppct">{{ Math.round(g.progress * 100) }}%</span>
+                </div>
+                <div class="okr-gmeta">
+                  <span>👤 {{ g.owner }}</span>
+                  <span>{{ g.doneCount || 0 }}/{{ g.totalCount || 0 }}</span>
+                </div>
+              </div>
+              <div v-if="goals.length === 0" class="empty-mini">暂无目标</div>
             </div>
-            <h4 class="goal-title">{{ g.title }}</h4>
-            <div class="goal-meta">
-              <span>👤 {{ g.owner }}</span>
+          </div>
+
+          <!-- Right: Goal Detail + Node Tree -->
+          <div class="okr-detail" v-if="selectedGoalDetail">
+            <div class="okr-hero">
+              <div class="okr-hero-row">
+                <span class="okr-hero-id">{{ selectedGoalDetail.id }}</span>
+                <span class="okr-hero-status" :class="selectedGoalDetail.status">{{ okrStatusLabel(selectedGoalDetail.status) }}</span>
+                <span class="okr-hero-owner">👤 {{ selectedGoalDetail.owner }}</span>
+              </div>
+              <h2 class="okr-hero-title">{{ selectedGoalDetail.title }}</h2>
+              <p class="okr-hero-desc">{{ selectedGoalDetail.description || '暂无详细描述' }}</p>
+              <div class="okr-hero-progress" v-if="selectedGoalProgress">
+                <div class="okr-hp-top">
+                  <span>目标总体进度</span>
+                  <span class="okr-hp-pct">{{ Math.round(selectedGoalProgress.progress * 100) }}%</span>
+                </div>
+                <div class="okr-hp-bar"><div class="okr-hp-fill" :style="{ width: (selectedGoalProgress.progress * 100) + '%' }"></div></div>
+                <div class="okr-hp-stats">
+                  <span>总: {{ selectedGoalProgress.total }}</span>
+                  <span class="stat-d">✅ {{ selectedGoalProgress.done }}</span>
+                  <span class="stat-p">🔄 {{ selectedGoalProgress.inProgress }}</span>
+                  <span class="stat-w">⏳ {{ selectedGoalProgress.pending }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="okr-tree-area">
+              <h3 class="okr-tree-title">OKR 拆解树</h3>
+              <div class="okr-tree">
+                <div
+                  v-for="node in okrSortedNodes" :key="node.id"
+                  class="okr-tnode"
+                >
+                  <div class="okr-tnode-line">
+                    <div class="okr-tnode-indent" :style="{ width: (node.level - 2) * 24 + 'px' }"></div>
+                    <div class="okr-tnode-card" :class="[node.status, 'okr-lv-' + node.level]">
+                      <div class="okr-tnode-hdr">
+                        <span class="okr-nid">{{ node.id }}</span>
+                        <span class="okr-ntype">{{ okrLevelName(node.level) }}</span>
+                        <span class="okr-nstatus" :class="node.status">{{ okrStatusLabel(node.status) }}</span>
+                      </div>
+                      <div class="okr-ntitle">{{ node.title }}</div>
+                      <div class="okr-nfooter">
+                        <span class="okr-nowner" v-if="node.owner">👤 {{ node.owner }}</span>
+                        <span class="okr-nprio" v-if="node.priority" :class="node.priority">{{ node.priority }}</span>
+                        <span class="okr-ntask" v-if="node.taskId">🔗 {{ node.taskId }}</span>
+                      </div>
+                      <div class="okr-nsummary" v-if="node.summary"><strong>摘要:</strong> {{ node.summary }}</div>
+                      <div class="okr-nsummary" v-if="node.output"><strong>产出:</strong> {{ node.output }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="okrSortedNodes.length === 0" class="empty-mini">暂无 OKR 节点</div>
+              </div>
+            </div>
+          </div>
+          <div class="okr-detail okr-empty" v-else>
+            <div class="empty-state-large">
+              <div style="font-size:48px; margin-bottom:16px; opacity:0.8">🎯</div>
+              <h3>OKR 目标看板</h3>
+              <p>从左侧选择一个目标查看拆解树与进度</p>
             </div>
           </div>
-          <div v-if="goals.length === 0" class="empty-mini">暂无目标</div>
         </div>
       </div>
  
@@ -355,6 +440,80 @@
           <div v-if="filteredMessages.length === 0" class="empty-mini">暂无消息记录</div>
         </div>
       </div>
+
+      <!-- Tab: Skills -->
+      <div v-if="activeTab === 'skills'" class="tab-content">
+        <div class="section-header">
+          <h3>🧪 Skills 市场</h3>
+          <div class="search-bar-inline">
+            <input v-model="skillsSearchQuery" type="text" placeholder="搜索 Skills..." @input="loadSkillsList(selectedCompany.id)" />
+            <button class="btn-sm" @click="loadSkillsList(selectedCompany.id)">🔍</button>
+          </div>
+        </div>
+        <div v-if="companySkills.length === 0" class="empty-mini">暂无 Skills</div>
+        <div v-else class="skills-grid">
+          <div v-for="skill in companySkills" :key="skill.id" class="skill-card-mini" @click="selectedSkillDetail = skill">
+            <div class="skill-icon">{{ skill.icon || '⚡' }}</div>
+            <div class="skill-info">
+              <div class="skill-name">{{ skill.name }}</div>
+              <div class="skill-desc">{{ skill.description || '暂无描述' }}</div>
+            </div>
+            <div class="skill-meta-mini">
+              <span class="version-badge">{{ skill.version || 'v1.0' }}</span>
+            </div>
+          </div>
+        </div>
+        <!-- Skill Detail Modal -->
+        <div v-if="selectedSkillDetail" class="modal-overlay" @click="selectedSkillDetail = null">
+          <div class="modal-content" @click.stop>
+            <div class="modal-header">
+              <h3>{{ selectedSkillDetail.name }}</h3>
+              <button class="btn-close" @click="selectedSkillDetail = null">✕</button>
+            </div>
+            <div class="modal-body">
+              <p>{{ selectedSkillDetail.description || '暂无描述' }}</p>
+              <div v-if="selectedSkillDetail.taxonomy" class="taxonomy-tags">
+                <span v-for="(v, k) in selectedSkillDetail.taxonomy" :key="k" class="taxonomy-tag">{{ k }}: {{ v }}</span>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-install-large" @click="installSkill(selectedSkillDetail)">📥 安装</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tab: Jobs -->
+      <div v-if="activeTab === 'jobs'" class="tab-content">
+        <div class="section-header">
+          <h3>📋 任务面板</h3>
+          <div class="filter-inline">
+            <select v-model="jobStatusFilter" @change="loadCompanyJobs(selectedCompany.id)">
+              <option value="">全部状态</option>
+              <option value="pending">⏳ 待处理</option>
+              <option value="running">🔄 运行中</option>
+              <option value="completed">✅ 完成</option>
+              <option value="failed">❌ 失败</option>
+            </select>
+            <button class="btn-sm" @click="loadCompanyJobs(selectedCompany.id)">🔄 刷新</button>
+          </div>
+        </div>
+        <div v-if="companyJobs.length === 0" class="empty-mini">暂无任务</div>
+        <div v-else class="jobs-table-mini">
+          <div class="table-header-mini">
+            <span>ID</span>
+            <span>状态</span>
+            <span>创建时间</span>
+            <span>操作</span>
+          </div>
+          <div v-for="job in companyJobs" :key="job.id" class="table-row-mini">
+            <span class="job-id">{{ job.id?.substring(0, 8) || '-' }}</span>
+            <span class="status-badge-mini" :class="job.status">{{ job.status }}</span>
+            <span>{{ formatDate(job.createdAt) }}</span>
+            <button class="btn-action-mini" @click="viewJobDetail(job)">👁 查看</button>
+          </div>
+        </div>
+      </div>
     </section>
  
  
@@ -400,6 +559,9 @@ const pipelines = ref([])
 const pipelineRuns = ref([])
 const selectedPipeline = ref(null)
 const goals = ref([])
+const selectedGoalId = ref(null)
+const selectedGoalDetail = ref(null)
+const selectedGoalProgress = ref(null)
 const templates = ref([])
 const activeTab = ref('overview')
 const showTemplates = ref(false)
@@ -418,6 +580,15 @@ const companyMessages = ref([])
 const msgFilterAgent = ref('')
 const msgFilterRole = ref('')
  
+// Skills tab
+const companySkills = ref([])
+const skillsSearchQuery = ref('')
+const selectedSkillDetail = ref(null)
+
+// Jobs tab
+const companyJobs = ref([])
+const jobStatusFilter = ref('')
+
 function statusLabel(status) {
   const map = { creating: '创建中', running: '运行中', paused: '已暂停', shutdown: '已关停' }
   return map[status] || status
@@ -457,6 +628,8 @@ async function loadCompanyData(id, tab) {
     if (activeTab.value === 'goals') await loadGoals(id)
     if (activeTab.value === 'files') await loadCompanyFiles(id)
     if (activeTab.value === 'messages') await loadMessages(id)
+    if (activeTab.value === 'skills') await loadSkillsList(id)
+    if (activeTab.value === 'jobs') await loadCompanyJobs(id)
   } catch (e) { console.error(e) }
 }
  
@@ -510,13 +683,70 @@ async function loadPipelineDetail(pipelineId) {
   } catch (e) { console.error(e) }
 }
  
+async function runPipeline(pipelineId) {
+  try {
+    await axios.post(`/api/company/${selectedCompany.value.id}/pipelines/${pipelineId}/run`)
+    alert('✅ Pipeline 已启动')
+    loadPipelines(selectedCompany.value.id)
+  } catch (e) { alert(`❌ 启动失败: ${e.message}`) }
+}
+
+async function retryPipelineRun(runId) {
+  try {
+    await axios.post(`/api/company/${selectedCompany.value.id}/pipelines/runs/${runId}/advance`)
+    alert('✅ 已重新尝试')
+    loadPipelines(selectedCompany.value.id)
+  } catch (e) { alert(`❌ 重试失败: ${e.message}`) }
+}
+
 async function loadGoals(id) {
   try {
     const { data } = await axios.get(`/api/company/${id}/goals`)
     goals.value = data
+    // Auto-select first goal
+    if (data.length > 0 && !selectedGoalId.value) {
+      selectGoalDetail(data[0].id)
+    }
   } catch (e) { console.error(e) }
 }
  
+async function selectGoalDetail(goalId) {
+  if (!selectedCompany.value) return
+  selectedGoalId.value = goalId
+  try {
+    const [goalRes, progRes] = await Promise.all([
+      axios.get(`/api/company/${selectedCompany.value.id}/goals/${goalId}`),
+      axios.get(`/api/company/${selectedCompany.value.id}/goals/${goalId}/progress`)
+    ])
+    selectedGoalDetail.value = goalRes.data
+    selectedGoalProgress.value = progRes.data
+  } catch (e) { console.error(e) }
+}
+
+function okrStatusLabel(status) {
+  const map = { active: '运转中', in_progress: '进行中', pending: '待开始', done: '已完成', failed: '失败', blocked: '已阻塞' }
+  return map[status] || status
+}
+
+function okrLevelName(level) {
+  const names = ['Goal', 'Objective', 'Key Result', 'Sub-Task', 'Micro-Task']
+  return names[Math.min(level - 1, 4)]
+}
+
+const okrSortedNodes = computed(() => {
+  if (!selectedGoalDetail.value?.nodes) return []
+  const nodes = selectedGoalDetail.value.nodes
+  const keys = Object.keys(nodes).sort((a, b) => {
+    const partsA = a.replace('G-','').split('.').map(Number)
+    const partsB = b.replace('G-','').split('.').map(Number)
+    for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
+      if ((partsA[i] || 0) !== (partsB[i] || 0)) return (partsA[i] || 0) - (partsB[i] || 0)
+    }
+    return 0
+  })
+  return keys.map(id => ({ id, ...nodes[id], level: id.split('.').length }))
+})
+
 async function loadCompanyStatus(id) {
   try {
     const { data } = await axios.get(`/api/company/${id}/status`)
@@ -624,6 +854,20 @@ async function triggerTrain(agentId) {
   }
 }
  
+async function installSkill(skill) {
+  try {
+    await axios.post(`/api/open/skills/${skill.name}/install`)
+    alert(`✅ ${skill.name} 安装成功`)
+    selectedSkillDetail.value = null
+  } catch (e) {
+    alert(`❌ 安装失败: ${e.message}`)
+  }
+}
+
+function viewJobDetail(job) {
+  alert(`任务详情:\nID: ${job.id}\n状态: ${job.status}\n创建: ${formatDate(job.createdAt)}`)
+}
+
 // switchTab removed, handled by goToTab and router watcher
  
 // ═══ Files Tab Functions ═══
@@ -659,6 +903,22 @@ async function loadMessages(id) {
   } catch (e) { console.error(e) }
 }
  
+async function loadSkillsList(id) {
+  try {
+    const { data } = await axios.get('/api/open/skills/search', { params: { q: skillsSearchQuery.value, limit: 50 } })
+    companySkills.value = data.results || []
+  } catch (e) { console.error(e) }
+}
+
+async function loadCompanyJobs(id) {
+  try {
+    const params = {}
+    if (jobStatusFilter.value) params.status = jobStatusFilter.value
+    const { data } = await axios.get(`/api/company/${id}/jobs`, { params })
+    companyJobs.value = data
+  } catch (e) { console.error(e) }
+}
+
  
 const messageAgentList = computed(() => {
   const names = new Set(companyMessages.value.map(m => m.agentName))
@@ -849,6 +1109,9 @@ function closeDropdown() {
 .pipeline-header { display: flex; align-items: center; gap: 12px; }
 .pipeline-name { font-weight: 600; font-size: 14px; }
 .pipeline-steps { font-size: 12px; color: var(--text-muted); }
+.pipeline-actions-row { display: flex; align-items: center; gap: 12px; }
+.btn-pipeline-run { padding: 6px 12px; background: var(--accent); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; }
+.btn-pipeline-run:hover { opacity: 0.9; }
  
 .pipeline-detail {
   background: var(--bg-surface); border: 1px solid var(--border-primary);
@@ -858,6 +1121,9 @@ function closeDropdown() {
  
 .step-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
 .step-node { display: flex; align-items: center; gap: 8px; }
+.step-node.step-current .step-index { background: var(--accent); color: white; }
+.step-node.step-completed .step-index { background: #3fb950; color: white; }
+.step-node.step-completed { opacity: 0.7; }
 .step-index {
   width: 28px; height: 28px; border-radius: 50%;
   background: var(--accent-bg); color: var(--accent);
@@ -885,17 +1151,86 @@ function closeDropdown() {
 .run-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
 .run-id { font-size: 12px; font-weight: 600; color: var(--text-secondary); font-family: monospace; }
 .run-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
-
-/* ═══ Goals ═══ */
-.goals-list { display: flex; flex-direction: column; gap: 8px; }
-.goal-card {
-  padding: 16px 20px; background: var(--bg-surface);
-  border: 1px solid var(--border-primary); border-radius: 12px;
-}
-.goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
-.goal-id { font-size: 12px; font-weight: 700; color: var(--accent); font-family: monospace; }
-.goal-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
-.goal-meta { font-size: 12px; color: var(--text-muted); }
+.run-actions { margin-top: 8px; }
+
+/* ═══ OKR Full Layout ═══ */
+.okr-layout { display: flex; height: calc(100vh - 140px); overflow: hidden; }
+.okr-sidebar { width: 280px; min-width: 260px; border-right: 1px solid var(--border-primary); background: var(--bg-overlay); display: flex; flex-direction: column; }
+.okr-sidebar-header { padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--text-secondary); border-bottom: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: space-between; background: var(--bg-secondary); }
+.okr-count { background: var(--bg-surface-active); color: var(--accent); padding: 2px 8px; border-radius: 12px; font-size: 11px; }
+.okr-goal-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
+.okr-goal-card { padding: 12px 14px; border-radius: 10px; cursor: pointer; background: var(--bg-surface); border: 1px solid var(--border-primary); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
+.okr-goal-card:hover { transform: translateY(-2px); border-color: var(--accent-light); box-shadow: 0 4px 12px rgba(16,185,129,0.08); }
+.okr-goal-card.active { background: var(--accent-bg); border-color: var(--border-active); box-shadow: 0 0 0 1px var(--accent) inset; }
+.okr-goal-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
+.okr-gid { font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-tertiary); }
+.okr-gstatus { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
+.okr-gstatus.active { background: rgba(59,130,246,0.15); color: #60a5fa; }
+.okr-gstatus.done { background: rgba(16,185,129,0.15); color: #34d399; }
+.okr-gtitle { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary); line-height: 1.4; }
+.okr-gprogress { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.okr-pbar { flex: 1; height: 6px; background: var(--bg-input-focus); border-radius: 3px; overflow: hidden; }
+.okr-pfill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 3px; transition: width 0.5s ease; }
+.okr-ppct { font-size: 11px; font-weight: 600; color: var(--text-secondary); width: 32px; text-align: right; }
+.okr-gmeta { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-faint); }
+
+/* OKR Detail Panel */
+.okr-detail { flex: 1; overflow-y: auto; background: var(--bg-primary); display: flex; flex-direction: column; }
+.okr-detail.okr-empty { align-items: center; justify-content: center; background: var(--bg-overlay); }
+.okr-detail.okr-empty h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--text-secondary); }
+.okr-detail.okr-empty p { color: var(--text-muted); font-size: 13px; }
+
+.okr-hero { padding: 30px 40px; border-bottom: 1px solid var(--border-primary); background: linear-gradient(180deg, var(--accent-bg) 0%, transparent 100%); }
+.okr-hero-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+.okr-hero-id { font-size: 14px; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--accent-light); }
+.okr-hero-status { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
+.okr-hero-status.active { background: rgba(59,130,246,0.2); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
+.okr-hero-status.done { background: rgba(16,185,129,0.2); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
+.okr-hero-owner { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-left: auto; background: var(--bg-surface); padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border-primary); }
+.okr-hero-title { font-size: 26px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.5px; }
+.okr-hero-desc { font-size: 14px; color: var(--text-tertiary); line-height: 1.6; max-width: 800px; margin: 0; }
+
+.okr-hero-progress { margin-top: 24px; max-width: 600px; background: var(--bg-surface); padding: 16px 20px; border-radius: 12px; border: 1px solid var(--border-primary); }
+.okr-hp-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
+.okr-hp-pct { font-size: 24px; font-weight: 800; color: var(--accent-light); line-height: 1; }
+.okr-hp-bar { height: 8px; background: var(--bg-input-focus); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
+.okr-hp-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 4px; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
+.okr-hp-stats { display: flex; gap: 16px; font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
+.okr-hp-stats .stat-d { color: #34d399; }
+.okr-hp-stats .stat-p { color: #60a5fa; }
+.okr-hp-stats .stat-w { color: var(--text-muted); }
+
+/* OKR Tree */
+.okr-tree-area { padding: 30px 40px; max-width: 1000px; }
+.okr-tree-title { font-size: 18px; font-weight: 600; margin: 0 0 20px; color: var(--text-primary); }
+.okr-tree { display: flex; flex-direction: column; gap: 6px; }
+.okr-tnode-line { display: flex; width: 100%; }
+.okr-tnode-indent { position: relative; }
+.okr-tnode-indent::before { content: ''; position: absolute; top: -16px; bottom: 50%; left: -14px; width: 14px; border-left: 1.5px solid var(--border-active); border-bottom: 1.5px solid var(--border-active); border-bottom-left-radius: 6px; z-index: 1; opacity: 0.3; }
+.okr-tnode-card { flex: 1; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 8px; padding: 12px 16px; transition: all 0.2s; }
+.okr-tnode-card:hover { border-color: rgba(255,255,255,0.1); background: var(--bg-surface-hover); }
+.okr-tnode-card.okr-lv-2 { background: rgba(59,130,246,0.03); border-color: rgba(59,130,246,0.1); }
+.okr-tnode-card.okr-lv-3 { background: rgba(16,185,129,0.03); border-color: rgba(16,185,129,0.1); }
+.okr-tnode-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.okr-nid { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--text-tertiary); }
+.okr-ntype { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,0.05); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
+.okr-nstatus { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; }
+.okr-nstatus.done { background: rgba(16,185,129,0.1); color: #34d399; border-color: rgba(16,185,129,0.2); }
+.okr-nstatus.in_progress { background: rgba(59,130,246,0.1); color: #60a5fa; border-color: rgba(59,130,246,0.2); animation: okr-pulse 2s infinite; }
+.okr-nstatus.pending { background: rgba(255,255,255,0.05); color: var(--text-muted); border-color: var(--border-primary); }
+@keyframes okr-pulse { 0% { box-shadow: 0 0 0 0 rgba(96,165,250,0.2); } 70% { box-shadow: 0 0 0 4px rgba(96,165,250,0); } 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); } }
+.okr-ntitle { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; line-height: 1.4; }
+.okr-nfooter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 4px; }
+.okr-nowner { font-size: 11px; font-weight: 500; color: var(--accent-light); display: flex; align-items: center; gap: 4px; background: var(--accent-bg); padding: 2px 8px; border-radius: 10px; }
+.okr-nprio { font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
+.okr-nprio.P0 { color: #ef4444; }
+.okr-nprio.P1 { color: #f59e0b; }
+.okr-nprio.P2 { color: var(--text-muted); }
+.okr-ntask { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--blue-text); background: rgba(59,130,246,0.1); padding: 2px 6px; border-radius: 4px; }
+.okr-nsummary { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-primary); font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
+.okr-nsummary strong { color: var(--text-secondary); }
+
+.empty-state-large { text-align: center; color: var(--text-muted); }
  
 /* ═══ Modal ═══ */
 .modal-overlay {
@@ -1321,4 +1656,39 @@ function closeDropdown() {
   white-space: pre-wrap; word-break: break-word;
   max-height: 120px; overflow-y: auto;
 }
+
+/* Skills Tab */
+.search-bar-inline { display: flex; gap: 8px; align-items: center; }
+.search-bar-inline input { padding: 8px 12px; border: 1px solid var(--border-primary); border-radius: 6px; background: var(--bg-surface); color: var(--text-primary); width: 200px; }
+.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
+.skill-card-mini { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
+.skill-card-mini:hover { border-color: var(--accent); transform: translateY(-2px); }
+.skill-icon { font-size: 28px; }
+.skill-info { flex: 1; }
+.skill-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
+.skill-desc { font-size: 12px; color: var(--text-muted); }
+.skill-meta-mini { display: flex; align-items: center; }
+.version-badge { font-size: 11px; padding: 3px 8px; background: var(--bg-primary); border-radius: 4px; color: var(--text-muted); }
+.taxonomy-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
+.taxonomy-tag { font-size: 11px; padding: 4px 8px; background: var(--bg-surface); border-radius: 4px; }
+
+/* Jobs Tab */
+.filter-inline { display: flex; gap: 8px; align-items: center; }
+.filter-inline select { padding: 8px 12px; border: 1px solid var(--border-primary); border-radius: 6px; background: var(--bg-surface); color: var(--text-primary); }
+.jobs-table-mini { display: flex; flex-direction: column; gap: 1px; background: var(--border-primary); border-radius: 10px; overflow: hidden; margin-top: 16px; }
+.table-header-mini { display: grid; grid-template-columns: 120px 100px 180px 100px; gap: 16px; padding: 12px 16px; background: var(--bg-primary); font-weight: 600; font-size: 13px; color: var(--text-muted); }
+.table-row-mini { display: grid; grid-template-columns: 120px 100px 180px 100px; gap: 16px; padding: 12px 16px; background: var(--bg-surface); align-items: center; font-size: 13px; }
+.job-id { font-family: monospace; color: var(--text-muted); }
+.status-badge-mini { font-size: 11px; padding: 4px 8px; border-radius: 4px; display: inline-block; }
+.status-badge-mini.pending { background: #ffd33d22; color: #ffd33d; }
+.status-badge-mini.running { background: #58a6ff22; color: #58a6ff; }
+.status-badge-mini.completed { background: #3fb95022; color: #3fb950; }
+.status-badge-mini.failed { background: #f8514922; color: #f85149; }
+.btn-action-mini { padding: 6px 12px; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 4px; color: var(--text-secondary); cursor: pointer; font-size: 12px; }
+.btn-action-mini:hover { border-color: var(--accent); }
+.btn-sm { padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 6px; cursor: pointer; font-size: 13px; }
+.btn-sm:hover { border-color: var(--accent); }
+.btn-install-large { padding: 10px 20px; background: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; }
+.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
+.modal-content { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 12px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; }
 </style>
+<template>
+  <div class="jobs-panel">
+    <AppNav />
+    <div class="panel-container">
+      <!-- 头部 -->
+      <div class="panel-header">
+        <h1>📋 任务面板</h1>
+        <div class="header-actions">
+          <button class="btn-create-job" @click="showCreateModal = true">
+            ➕ 创建任务
+          </button>
+          <button class="btn-refresh" @click="loadJobs">
+            🔄 刷新
+          </button>
+        </div>
+      </div>
+
+      <!-- 筛选栏 -->
+      <div class="filter-bar">
+        <div class="filter-group">
+          <label>状态:</label>
+          <select v-model="statusFilter" @change="loadJobs">
+            <option value="">全部</option>
+            <option value="pending">⏳ 待处理</option>
+            <option value="running">🔄 运行中</option>
+            <option value="completed">✅ 完成</option>
+            <option value="failed">❌ 失败</option>
+          </select>
+        </div>
+        <div class="filter-group">
+          <label>技能:</label>
+          <select v-model="skillFilter" @change="loadJobs">
+            <option value="">全部</option>
+            <option v-for="skill in availableSkills" :key="skill" :value="skill">
+              {{ skill }}
+            </option>
+          </select>
+        </div>
+      </div>
+
+      <!-- 任务列表 -->
+      <div v-if="loading" class="loading-state">
+        <span class="loading-spinner">⏳ 加载中...</span>
+      </div>
+
+      <div v-else-if="jobs.length === 0" class="empty-state">
+        <span class="empty-icon">📋</span>
+        <p>暂无任务，请创建新任务</p>
+      </div>
+
+      <div v-else class="jobs-table">
+        <div class="table-header">
+          <span class="col-id">ID</span>
+          <span class="col-skill">技能</span>
+          <span class="col-status">状态</span>
+          <span class="col-input">输入</span>
+          <span class="col-time">创建时间</span>
+          <span class="col-actions">操作</span>
+        </div>
+        <div
+          v-for="job in jobs"
+          :key="job.id"
+          class="table-row"
+          @click="selectJob(job)"
+        >
+          <span class="col-id">{{ job.id?.substring(0, 8) || '-' }}</span>
+          <span class="col-skill">
+            <span class="skill-badge">{{ job.skillId || job.skill || '-' }}</span>
+          </span>
+          <span class="col-status">
+            <span class="status-badge" :class="job.status">
+              {{ statusLabel(job.status) }}
+            </span>
+          </span>
+          <span class="col-input">
+            <span class="input-preview">{{ formatInput(job.input) }}</span>
+          </span>
+          <span class="col-time">{{ formatDate(job.startedAt || job.createdAt) }}</span>
+          <span class="col-actions">
+            <button class="btn-action" @click.stop="viewJobDetail(job)">
+              👁 查看
+            </button>
+            <button
+              v-if="job.status === 'failed'"
+              class="btn-action retry"
+              @click.stop="retryJob(job.id)"
+            >
+              🔁 重试
+            </button>
+          </span>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="totalPages > 1" class="pagination">
+        <button
+          :disabled="currentPage === 1"
+          @click="goToPage(currentPage - 1)"
+        >
+          ‹ 上一页
+        </button>
+        <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
+        <button
+          :disabled="currentPage === totalPages"
+          @click="goToPage(currentPage + 1)"
+        >
+          下一页 ›
+        </button>
+      </div>
+    </div>
+
+    <!-- 创建任务弹窗 -->
+    <div v-if="showCreateModal" class="modal-overlay" @click="showCreateModal = false">
+      <div class="modal-content create-job-modal" @click.stop>
+        <div class="modal-header">
+          <h2>创建新任务</h2>
+          <button class="btn-close" @click="showCreateModal = false">✕</button>
+        </div>
+        <div class="modal-body">
+          <div class="form-group">
+            <label>选择技能</label>
+            <select v-model="newJob.skillId" required>
+              <option value="">请选择技能...</option>
+              <option v-for="skill in availableSkills" :key="skill" :value="skill">
+                {{ skill }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label>输入参数 (JSON)</label>
+            <textarea
+              v-model="newJob.input"
+              placeholder='{"query": "..."}'
+              rows="6"
+            ></textarea>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-cancel" @click="showCreateModal = false">取消</button>
+          <button class="btn-submit" @click="createJob" :disabled="!newJob.skillId">
+            ➕ 创建
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 任务详情弹窗 -->
+    <div v-if="selectedJobDetail" class="modal-overlay" @click="selectedJobDetail = null">
+      <div class="modal-content job-detail-modal" @click.stop>
+        <div class="modal-header">
+          <h2>任务详情</h2>
+          <button class="btn-close" @click="selectedJobDetail = null">✕</button>
+        </div>
+        <div class="modal-body">
+          <div class="detail-row">
+            <span class="detail-label">ID:</span>
+            <span class="detail-value">{{ selectedJobDetail.id }}</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">状态:</span>
+            <span class="status-badge" :class="selectedJobDetail.status">
+              {{ statusLabel(selectedJobDetail.status) }}
+            </span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">技能:</span>
+            <span class="detail-value">{{ selectedJobDetail.skillId || selectedJobDetail.skill }}</span>
+          </div>
+          <div class="detail-section">
+            <h4>输入</h4>
+            <pre>{{ JSON.stringify(selectedJobDetail.input, null, 2) }}</pre>
+          </div>
+          <div v-if="selectedJobDetail.output" class="detail-section">
+            <h4>输出</h4>
+            <pre>{{ JSON.stringify(selectedJobDetail.output, null, 2) }}</pre>
+          </div>
+          <div v-if="selectedJobDetail.error" class="detail-section">
+            <h4>错误</h4>
+            <pre class="error-output">{{ selectedJobDetail.error }}</pre>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button
+            v-if="selectedJobDetail.status === 'failed'"
+            class="btn-retry"
+            @click="retryJob(selectedJobDetail.id); selectedJobDetail = null"
+          >
+            🔁 重试
+          </button>
+          <button class="btn-close-footer" @click="selectedJobDetail = null">
+            关闭
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import AppNav from '@/components/AppNav.vue'
+
+// 状态
+const jobs = ref([])
+const loading = ref(false)
+const currentPage = ref(1)
+const totalPages = ref(1)
+const total = ref(0)
+const statusFilter = ref('')
+const skillFilter = ref('')
+const availableSkills = ref([])
+const showCreateModal = ref(false)
+const selectedJobDetail = ref(null)
+
+const newJob = ref({
+  skillId: '',
+  input: '{}'
+})
+
+// API 基础
+const API_BASE = '/api/open'
+
+// 加载任务列表
+const loadJobs = async () => {
+  loading.value = true
+  try {
+    const params = new URLSearchParams()
+    if (statusFilter.value) params.append('status', statusFilter.value)
+    if (skillFilter.value) params.append('skill', skillFilter.value)
+    params.append('page', currentPage.value)
+    params.append('limit', 20)
+
+    const response = await fetch(`${API_BASE}/jobs?${params}`)
+    const data = await response.json()
+    jobs.value = data.jobs || data.results || []
+    total.value = data.total || 0
+    totalPages.value = Math.ceil(total.value / 20) || 1
+  } catch (error) {
+    console.error('加载任务失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载可用技能
+const loadAvailableSkills = async () => {
+  try {
+    const response = await fetch(`${API_BASE}/skills/search?q=&limit=100`)
+    const data = await response.json()
+    availableSkills.value = (data.results || []).map(s => s.name)
+  } catch (error) {
+    console.error('加载技能列表失败:', error)
+  }
+}
+
+// 创建任务
+const createJob = async () => {
+  try {
+    let inputObj = {}
+    try {
+      inputObj = JSON.parse(newJob.value.input || '{}')
+    } catch (e) {
+      alert('输入参数必须是有效的 JSON 格式')
+      return
+    }
+
+    const response = await fetch(`${API_BASE}/jobs`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        skillId: newJob.value.skillId,
+        input: inputObj
+      })
+    })
+
+    if (response.ok) {
+      alert('✅ 任务创建成功！')
+      showCreateModal.value = false
+      newJob.value = { skillId: '', input: '{}' }
+      loadJobs()
+    } else {
+      alert('❌ 创建失败')
+    }
+  } catch (error) {
+    console.error('创建任务失败:', error)
+    alert('❌ 创建失败')
+  }
+}
+
+// 查看任务详情
+const viewJobDetail = async (job) => {
+  try {
+    const response = await fetch(`${API_BASE}/jobs/${job.id}`)
+    const data = await response.json()
+    selectedJobDetail.value = data.job || data
+  } catch (error) {
+    console.error('获取任务详情失败:', error)
+    selectedJobDetail.value = job
+  }
+}
+
+// 重试任务
+const retryJob = async (jobId) => {
+  try {
+    const response = await fetch(`${API_BASE}/jobs/${jobId}/retry`, {
+      method: 'POST'
+    })
+    if (response.ok) {
+      alert('✅ 任务已重新执行')
+      loadJobs()
+    } else {
+      alert('❌ 重试失败')
+    }
+  } catch (error) {
+    console.error('重试失败:', error)
+    alert('❌ 重试失败')
+  }
+}
+
+// 选择任务
+const selectJob = (job) => {
+  viewJobDetail(job)
+}
+
+// 分页
+const goToPage = (page) => {
+  currentPage.value = page
+  loadJobs()
+}
+
+// 格式化
+const statusLabel = (status) => {
+  const labels = {
+    pending: '待处理',
+    running: '运行中',
+    completed: '完成',
+    failed: '失败'
+  }
+  return labels[status] || status
+}
+
+const formatDate = (dateStr) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleString('zh-CN')
+}
+
+const formatInput = (input) => {
+  if (!input) return '-'
+  const str = typeof input === 'string' ? input : JSON.stringify(input)
+  return str.length > 50 ? str.substring(0, 50) + '...' : str
+}
+
+// 初始化
+onMounted(() => {
+  loadJobs()
+  loadAvailableSkills()
+})
+</script>
+
+<style scoped>
+.jobs-panel {
+  min-height: 100vh;
+  background: var(--bg-primary, #0d1117);
+  color: var(--text-primary, #e6edf3);
+}
+
+.panel-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.panel-header h1 {
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.btn-create-job,
+.btn-refresh {
+  padding: 10px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  border: none;
+}
+
+.btn-create-job {
+  background: var(--accent, #58a6ff);
+  color: white;
+}
+
+.btn-refresh {
+  background: var(--bg-secondary, #161b22);
+  border: 1px solid var(--border-color, #30363d);
+  color: var(--text-secondary, #8b949e);
+}
+
+.filter-bar {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--bg-secondary, #161b22);
+  border-radius: 8px;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-group label {
+  color: var(--text-secondary, #8b949e);
+  font-size: 14px;
+}
+
+.filter-group select {
+  padding: 8px 12px;
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 6px;
+  background: var(--bg-primary, #0d1117);
+  color: var(--text-primary, #e6edf3);
+  font-size: 14px;
+}
+
+.loading-state,
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-secondary, #8b949e);
+}
+
+.empty-icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.jobs-table {
+  background: var(--bg-secondary, #161b22);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.table-header,
+.table-row {
+  display: grid;
+  grid-template-columns: 100px 150px 100px 1fr 180px 140px;
+  gap: 16px;
+  padding: 12px 16px;
+  align-items: center;
+}
+
+.table-header {
+  background: var(--bg-primary, #0d1117);
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--text-secondary, #8b949e);
+  border-bottom: 1px solid var(--border-color, #30363d);
+}
+
+.table-row {
+  border-bottom: 1px solid var(--border-color, #30363d);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.table-row:hover {
+  background: rgba(88, 166, 255, 0.1);
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.skill-badge {
+  font-size: 12px;
+  padding: 4px 8px;
+  background: var(--bg-primary, #0d1117);
+  border-radius: 4px;
+}
+
+.status-badge {
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.status-badge.pending { background: #ffd33d22; color: #ffd33d; }
+.status-badge.running { background: #58a6ff22; color: #58a6ff; }
+.status-badge.completed { background: #3fb95022; color: #3fb950; }
+.status-badge.failed { background: #f8514922; color: #f85149; }
+
+.input-preview {
+  font-size: 13px;
+  color: var(--text-secondary, #8b949e);
+}
+
+.btn-action {
+  padding: 6px 12px;
+  background: var(--bg-primary, #0d1117);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 4px;
+  color: var(--text-primary, #e6edf3);
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.btn-action.retry {
+  color: #58a6ff;
+  border-color: #58a6ff;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+}
+
+.pagination button {
+  padding: 8px 16px;
+  background: var(--bg-secondary, #161b22);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 6px;
+  color: var(--text-primary, #e6edf3);
+  cursor: pointer;
+}
+
+.pagination button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: var(--bg-secondary, #161b22);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 12px;
+  max-width: 600px;
+  width: 90%;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid var(--border-color, #30363d);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 20px;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: var(--text-secondary, #8b949e);
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: var(--text-secondary, #8b949e);
+}
+
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 6px;
+  background: var(--bg-primary, #0d1117);
+  color: var(--text-primary, #e6edf3);
+  font-size: 14px;
+  font-family: monospace;
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 20px;
+  border-top: 1px solid var(--border-color, #30363d);
+}
+
+.btn-cancel {
+  padding: 10px 16px;
+  background: var(--bg-primary, #0d1117);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 6px;
+  color: var(--text-secondary, #8b949e);
+  cursor: pointer;
+}
+
+.btn-submit {
+  padding: 10px 16px;
+  background: var(--accent, #58a6ff);
+  border: none;
+  border-radius: 6px;
+  color: white;
+  cursor: pointer;
+}
+
+.btn-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.detail-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.detail-label {
+  color: var(--text-secondary, #8b949e);
+  min-width: 60px;
+}
+
+.detail-section {
+  margin-top: 16px;
+}
+
+.detail-section h4 {
+  font-size: 14px;
+  color: var(--text-secondary, #8b949e);
+  margin-bottom: 8px;
+}
+
+.detail-section pre {
+  background: var(--bg-primary, #0d1117);
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  overflow-x: auto;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.error-output {
+  color: #f85149;
+}
+
+.btn-retry {
+  padding: 10px 16px;
+  background: #58a6ff;
+  border: none;
+  border-radius: 6px;
+  color: white;
+  cursor: pointer;
+}
+
+.btn-close-footer {
+  padding: 10px 16px;
+  background: var(--bg-primary, #0d1117);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 6px;
+  color: var(--text-secondary, #8b949e);
+  cursor: pointer;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div class="pipeline-editor">
+    <AppNav />
+    <div class="editor-container">
+      <!-- 头部 -->
+      <div class="editor-header">
+        <h1>⚙️ Pipeline 编辑器</h1>
+        <div class="header-actions">
+          <button class="btn-create" @click="showCreateModal = true">
+            ➕ 新建 Pipeline
+          </button>
+          <button class="btn-refresh" @click="loadPipelines">
+            🔄 刷新
+          </button>
+        </div>
+      </div>
+
+      <!-- Pipeline 列表 -->
+      <div v-if="loading" class="loading-state">
+        <span class="loading-spinner">⏳ 加载中...</span>
+      </div>
+
+      <div v-else-if="pipelines.length === 0" class="empty-state">
+        <span class="empty-icon">🔗</span>
+        <p>暂无 Pipeline，请创建新的任务流水线</p>
+        <button class="btn-create-first" @click="showCreateModal = true">
+          创建第一个 Pipeline
+        </button>
+      </div>
+
+      <div v-else class="pipelines-grid">
+        <div
+          v-for="pipeline in pipelines"
+          :key="pipeline.id"
+          class="pipeline-card"
+        >
+          <div class="pipeline-header">
+            <h3>{{ pipeline.name || pipeline.id }}</h3>
+            <span class="status-badge" :class="pipeline.status">
+              {{ statusLabel(pipeline.status) }}
+            </span>
+          </div>
+          <div class="pipeline-meta">
+            <span class="meta-item">
+              📅 创建: {{ formatDate(pipeline.createdAt) }}
+            </span>
+            <span v-if="pipeline.lastRun" class="meta-item">
+              🏃 最近: {{ formatDate(pipeline.lastRun) }}
+            </span>
+          </div>
+          <div v-if="pipeline.config" class="pipeline-stages">
+            <div
+              v-for="(stage, idx) in pipeline.config.stages || []"
+              :key="idx"
+              class="stage-item"
+            >
+              <span class="stage-num">{{ idx + 1 }}</span>
+              <span class="stage-name">{{ stage.name || stage.skill || 'Stage ' + (idx + 1) }}</span>
+            </div>
+          </div>
+          <div class="pipeline-actions">
+            <button class="btn-action" @click="editPipeline(pipeline)">
+              ✏️ 编辑
+            </button>
+            <button class="btn-action" @click="runPipeline(pipeline.id)">
+              ▶️ 运行
+            </button>
+            <button class="btn-action delete" @click="deletePipeline(pipeline.id)">
+              🗑️ 删除
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 详细视图弹窗 -->
+      <div v-if="selectedPipeline" class="modal-overlay" @click="selectedPipeline = null">
+        <div class="modal-content pipeline-detail-modal" @click.stop>
+          <div class="modal-header">
+            <h2>{{ selectedPipeline.name || selectedPipeline.id }}</h2>
+            <button class="btn-close" @click="selectedPipeline = null">✕</button>
+          </div>
+          <div class="modal-body">
+            <div class="detail-section">
+              <h4>状态</h4>
+              <span class="status-badge large" :class="selectedPipeline.status">
+                {{ statusLabel(selectedPipeline.status) }}
+              </span>
+            </div>
+            <div class="detail-section">
+              <h4>配置</h4>
+              <pre>{{ JSON.stringify(selectedPipeline.config, null, 2) }}</pre>
+            </div>
+            <div v-if="selectedPipeline.history" class="detail-section">
+              <h4>运行历史</h4>
+              <div class="history-list">
+                <div
+                  v-for="(run, idx) in selectedPipeline.history"
+                  :key="idx"
+                  class="history-item"
+                >
+                  <span class="run-status" :class="run.status"></span>
+                  <span class="run-time">{{ formatDate(run.startedAt) }}</span>
+                  <span class="run-duration">{{ run.duration || '-' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn-run" @click="runPipeline(selectedPipeline.id); selectedPipeline = null">
+              ▶️ 运行 Pipeline
+            </button>
+            <button class="btn-close-footer" @click="selectedPipeline = null">
+              关闭
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 创建/编辑弹窗 -->
+      <div v-if="showCreateModal || editingPipeline" class="modal-overlay" @click="closeModal">
+        <div class="modal-content create-pipeline-modal" @click.stop>
+          <div class="modal-header">
+            <h2>{{ editingPipeline ? '编辑 Pipeline' : '创建 Pipeline' }}</h2>
+            <button class="btn-close" @click="closeModal">✕</button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label>Pipeline 名称</label>
+              <input
+                v-model="pipelineForm.name"
+                type="text"
+                placeholder="输入 Pipeline 名称"
+              />
+            </div>
+            <div class="form-group">
+              <label>描述</label>
+              <textarea
+                v-model="pipelineForm.description"
+                placeholder="描述这个 Pipeline 的用途"
+                rows="2"
+              ></textarea>
+            </div>
+            <div class="form-group">
+              <label>阶段配置</label>
+              <div class="stages-editor">
+                <div
+                  v-for="(stage, idx) in pipelineForm.stages"
+                  :key="idx"
+                  class="stage-editor"
+                >
+                  <span class="stage-number">{{ idx + 1 }}</span>
+                  <input
+                    v-model="stage.name"
+                    type="text"
+                    placeholder="阶段名称"
+                    class="stage-name-input"
+                  />
+                  <select v-model="stage.skill" class="stage-skill-select">
+                    <option value="">选择技能...</option>
+                    <option v-for="skill in availableSkills" :key="skill" :value="skill">
+                      {{ skill }}
+                    </option>
+                  </select>
+                  <input
+                    v-model="stage.config"
+                    type="text"
+                    placeholder='{"key": "value"}'
+                    class="stage-config-input"
+                  />
+                  <button class="btn-remove-stage" @click="removeStage(idx)">✕</button>
+                </div>
+                <button class="btn-add-stage" @click="addStage">
+                  ➕ 添加阶段
+                </button>
+              </div>
+            </div>
+            <div class="form-group">
+              <label>
+                <input type="checkbox" v-model="pipelineForm.autoRun" />
+                自动运行
+              </label>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn-cancel" @click="closeModal">取消</button>
+            <button class="btn-submit" @click="savePipeline">
+              💾 保存
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import AppNav from '@/components/AppNav.vue'
+
+// 状态
+const pipelines = ref([])
+const loading = ref(false)
+const selectedPipeline = ref(null)
+const showCreateModal = ref(false)
+const editingPipeline = ref(null)
+const availableSkills = ref([])
+
+const pipelineForm = ref({
+  name: '',
+  description: '',
+  stages: [],
+  autoRun: false
+})
+
+// API
+const API_BASE = '/api/open'
+
+// 加载 Pipelines
+const loadPipelines = async () => {
+  loading.value = true
+  try {
+    const response = await fetch(`${API_BASE}/pipelines`)
+    const data = await response.json()
+    pipelines.value = data.pipelines || data.results || []
+  } catch (error) {
+    console.error('加载 Pipelines 失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载可用技能
+const loadAvailableSkills = async () => {
+  try {
+    const response = await fetch(`${API_BASE}/skills/search?q=&limit=100`)
+    const data = await response.json()
+    availableSkills.value = (data.results || []).map(s => s.name)
+  } catch (error) {
+    console.error('加载技能列表失败:', error)
+  }
+}
+
+// 保存 Pipeline
+const savePipeline = async () => {
+  try {
+    const payload = {
+      name: pipelineForm.value.name,
+      description: pipelineForm.value.description,
+      config: {
+        stages: pipelineForm.value.stages.map(s => ({
+          name: s.name,
+          skill: s.skill,
+          config: s.config ? JSON.parse(s.config) : {}
+        })),
+        autoRun: pipelineForm.value.autoRun
+      }
+    }
+
+    const url = editingPipeline.value
+      ? `${API_BASE}/pipelines/${editingPipeline.value.id}`
+      : `${API_BASE}/pipelines`
+    const method = editingPipeline.value ? 'PUT' : 'POST'
+
+    const response = await fetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    })
+
+    if (response.ok) {
+      alert('✅ Pipeline 保存成功！')
+      closeModal()
+      loadPipelines()
+    } else {
+      alert('❌ 保存失败')
+    }
+  } catch (error) {
+    console.error('保存失败:', error)
+    alert('❌ 保存失败')
+  }
+}
+
+// 运行 Pipeline
+const runPipeline = async (pipelineId) => {
+  try {
+    const response = await fetch(`${API_BASE}/pipelines/${pipelineId}/run`, {
+      method: 'POST'
+    })
+    if (response.ok) {
+      alert('✅ Pipeline 已开始运行！')
+      loadPipelines()
+    } else {
+      alert('❌ 运行失败')
+    }
+  } catch (error) {
+    console.error('运行失败:', error)
+    alert('❌ 运行失败')
+  }
+}
+
+// 删除 Pipeline
+const deletePipeline = async (pipelineId) => {
+  if (!confirm('确定要删除这个 Pipeline 吗？')) return
+
+  try {
+    const response = await fetch(`${API_BASE}/pipelines/${pipelineId}`, {
+      method: 'DELETE'
+    })
+    if (response.ok) {
+      alert('✅ Pipeline 已删除')
+      loadPipelines()
+    } else {
+      alert('❌ 删除失败')
+    }
+  } catch (error) {
+    console.error('删除失败:', error)
+    alert('❌ 删除失败')
+  }
+}
+
+// 编辑 Pipeline
+const editPipeline = (pipeline) => {
+  editingPipeline.value = pipeline
+  pipelineForm.value = {
+    name: pipeline.name || '',
+    description: pipeline.description || '',
+    stages: (pipeline.config?.stages || []).map(s => ({
+      name: s.name || '',
+      skill: s.skill || '',
+      config: s.config ? JSON.stringify(s.config) : ''
+    })),
+    autoRun: pipeline.config?.autoRun || false
+  }
+}
+
+// 添加阶段
+const addStage = () => {
+  pipelineForm.value.stages.push({
+    name: '',
+    skill: '',
+    config: ''
+  })
+}
+
+// 移除阶段
+const removeStage = (idx) => {
+  pipelineForm.value.stages.splice(idx, 1)
+}
+
+// 关闭弹窗
+const closeModal = () => {
+  showCreateModal.value = false
+  editingPipeline.value = null
+  pipelineForm.value = {
+    name: '',
+    description: '',
+    stages: [],
+    autoRun: false
+  }
+}
+
+// 格式化
+const statusLabel = (status) => {
+  const labels = {
+    idle: '空闲',
+    running: '运行中',
+    completed: '已完成',
+    failed: '失败'
+  }
+  return labels[status] || status || '未知'
+}
+
+const formatDate = (dateStr) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleString('zh-CN')
+}
+
+// 初始化
+onMounted(() => {
+  loadPipelines()
+  loadAvailableSkills()
+})
+</script>
+
+<style scoped>
+.pipeline-editor {
+  min-height: 100vh;
+  background: var(--bg-primary, #0d1117);
+  color: var(--text-primary, #e6edf3);
+}
+
+.editor-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.editor-header h1 {
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.btn-create,
+.btn-refresh {
+  padding: 10px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  border: none;
+}
+
+.btn-create {
+  background: var(--accent, #58a6ff);
+  color: white;
+}
+
+.btn-refresh {
+  background: var(--bg-secondary, #161b22);
+  border: 1px solid var(--border-color, #30363d);
+  color: var(--text-secondary, #8b949e);
+}
+
+.loading-state,
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-secondary, #8b949e);
+}
+
+.empty-icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.btn-create-first {
+  margin-top: 16px;
+  padding: 12px 24px;
+  background: var(--accent, #58a6ff);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.pipelines-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 20px;
+}
+
+.pipeline-card {
+  background: var(--bg-secondary, #161b22);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.pipeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.pipeline-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.status-badge {
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.status-badge.idle { background: #8b949e22; color: #8b949e; }
+.status-badge.running { background: #58a6ff22; color: #58a6ff; }
+.status-badge.completed { background: #3fb95022; color: #3fb950; }
+.status-badge.failed { background: #f8514922; color: #f85149; }
+
+.status-badge.large {
+  font-size: 14px;
+  padding: 8px 16px;
+}
+
+.pipeline-meta {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--text-secondary, #8b949e);
+  margin-bottom: 16px;
+}
+
+.pipeline-stages {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.stage-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--bg-primary, #0d1117);
+  border-radius: 16px;
+  font-size: 13px;
+}
+
+.stage-num {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent, #58a6ff);
+  border-radius: 50%;
+  font-size: 11px;
+  color: white;
+}
+
+.pipeline-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-action {
+  flex: 1;
+  padding: 8px 12px;
+  background: var(--bg-primary, #0d1117);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 6px;
+  color: var(--text-primary, #e6edf3);
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn-action:hover {
+  border-color: var(--accent, #58a6ff);
+}
+
+.btn-action.delete:hover {
+  border-color: #f85149;
+}
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: var(--bg-secondary, #161b22);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 12px;
+  max-width: 700px;
+  width: 90%;
+  max-height: 85vh;
+  overflow-y: auto;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid var(--border-color, #30363d);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 20px;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: var(--text-secondary, #8b949e);
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: var(--text-secondary, #8b949e);
+}
+
+.form-group input[type="text"],
+.form-group textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 6px;
+  background: var(--bg-primary, #0d1117);
+  color: var(--text-primary, #e6edf3);
+  font-size: 14px;
+}
+
+.form-group input[type="checkbox"] {
+  margin-right: 8px;
+}
+
+.stages-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.stage-editor {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.stage-number {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent, #58a6ff);
+  border-radius: 50%;
+  font-size: 12px;
+  color: white;
+  flex-shrink: 0;
+}
+
+.stage-name-input {
+  width: 120px;
+}
+
+.stage-skill-select {
+  width: 150px;
+  padding: 8px;
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 6px;
+  background: var(--bg-primary, #0d1117);
+  color: var(--text-primary, #e6edf3);
+}
+
+.stage-config-input {
+  flex: 1;
+  font-size: 12px;
+}
+
+.btn-remove-stage {
+  width: 28px;
+  height: 28px;
+  background: none;
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 4px;
+  color: #f85149;
+  cursor: pointer;
+}
+
+.btn-add-stage {
+  padding: 10px;
+  background: var(--bg-primary, #0d1117);
+  border: 1px dashed var(--border-color, #30363d);
+  border-radius: 6px;
+  color: var(--text-secondary, #8b949e);
+  cursor: pointer;
+}
+
+.btn-add-stage:hover {
+  border-color: var(--accent, #58a6ff);
+  color: var(--accent, #58a6ff);
+}
+
+.detail-section {
+  margin-bottom: 20px;
+}
+
+.detail-section h4 {
+  font-size: 14px;
+  color: var(--text-secondary, #8b949e);
+  margin-bottom: 8px;
+}
+
+.detail-section pre {
+  background: var(--bg-primary, #0d1117);
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  overflow-x: auto;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: var(--bg-primary, #0d1117);
+  border-radius: 6px;
+}
+
+.run-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.run-status.completed { background: #3fb950; }
+.run-status.failed { background: #f85149; }
+.run-status.running { background: #58a6ff; }
+
+.run-time {
+  font-size: 13px;
+  color: var(--text-secondary, #8b949e);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 20px;
+  border-top: 1px solid var(--border-color, #30363d);
+}
+
+.btn-cancel,
+.btn-submit,
+.btn-run,
+.btn-close-footer {
+  padding: 10px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  border: none;
+}
+
+.btn-cancel {
+  background: var(--bg-primary, #0d1117);
+  border: 1px solid var(--border-color, #30363d);
+  color: var(--text-secondary, #8b949e);
+}
+
+.btn-submit {
+  background: var(--accent, #58a6ff);
+  color: white;
+}
+
+.btn-run {
+  background: #3fb950;
+  color: white;
+}
+
+.btn-close-footer {
+  background: var(--bg-primary, #0d1117);
+  border: 1px solid var(--border-color, #30363d);
+  color: var(--text-secondary, #8b949e);
+}
+</style>
 \ No newline at end of file
+<template>
+  <div class="skills-market">
+    <AppNav />
+    <div class="market-container">
+      <!-- 搜索和筛选 -->
+      <div class="market-header">
+        <h1>🛒 Skills 市场</h1>
+        <div class="search-bar">
+          <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="搜索 Skills..."
+            @input="handleSearch"
+          />
+          <button class="btn-search" @click="searchSkills">🔍 搜索</button>
+        </div>
+      </div>
+
+      <!-- 分类标签 -->
+      <div class="category-tabs">
+        <button
+          v-for="cat in categories"
+          :key="cat.id"
+          class="tab-btn"
+          :class="{ active: activeCategory === cat.id }"
+          @click="filterByCategory(cat.id)"
+        >
+          {{ cat.icon }} {{ cat.name }}
+        </button>
+      </div>
+
+      <!-- Skills 列表 -->
+      <div v-if="loading" class="loading-state">
+        <span class="loading-spinner">⏳ 加载中...</span>
+      </div>
+
+      <div v-else-if="skills.length === 0" class="empty-state">
+        <span class="empty-icon">📦</span>
+        <p>暂无 Skills，请尝试其他搜索条件</p>
+      </div>
+
+      <div v-else class="skills-grid">
+        <div
+          v-for="skill in skills"
+          :key="skill.id"
+          class="skill-card"
+          @click="showSkillDetail(skill)"
+        >
+          <div class="skill-header">
+            <span class="skill-icon">{{ skill.icon || '⚡' }}</span>
+            <h3>{{ skill.name }}</h3>
+          </div>
+          <p class="skill-desc">{{ skill.description || '暂无描述' }}</p>
+          <div class="skill-meta">
+            <span class="meta-tag">{{ skill.version || 'v1.0' }}</span>
+            <span class="meta-tag">{{ formatDate(skill.createdAt) }}</span>
+          </div>
+          <div class="skill-actions">
+            <button class="btn-install" @click.stop="installSkill(skill)">
+              📥 安装
+            </button>
+            <button class="btn-preview" @click.stop="previewSkill(skill)">
+              👁 预览
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="totalPages > 1" class="pagination">
+        <button
+          :disabled="currentPage === 1"
+          @click="goToPage(currentPage - 1)"
+        >
+          ‹ 上一页
+        </button>
+        <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
+        <button
+          :disabled="currentPage === totalPages"
+          @click="goToPage(currentPage + 1)"
+        >
+          下一页 ›
+        </button>
+      </div>
+    </div>
+
+    <!-- Skill 详情弹窗 -->
+    <div v-if="selectedSkill" class="modal-overlay" @click="closeModal">
+      <div class="modal-content skill-detail-modal" @click.stop>
+        <div class="modal-header">
+          <h2>{{ selectedSkill.name }}</h2>
+          <button class="btn-close" @click="closeModal">✕</button>
+        </div>
+        <div class="modal-body">
+          <div class="detail-section">
+            <h4>描述</h4>
+            <p>{{ selectedSkill.description || '暂无描述' }}</p>
+          </div>
+          <div class="detail-section">
+            <h4>版本</h4>
+            <span class="version-badge">{{ selectedSkill.version || 'v1.0' }}</span>
+          </div>
+          <div v-if="selectedSkill.manifest" class="detail-section">
+            <h4>Manifest</h4>
+            <pre>{{ JSON.stringify(selectedSkill.manifest, null, 2) }}</pre>
+          </div>
+          <div v-if="selectedSkill.taxonomy" class="detail-section">
+            <h4>分类</h4>
+            <div class="taxonomy-tags">
+              <span
+                v-for="(value, key) in selectedSkill.taxonomy"
+                :key="key"
+                class="taxonomy-tag"
+              >
+                {{ key }}: {{ value }}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-install-large" @click="installSkill(selectedSkill)">
+            📥 安装到我的公司
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import AppNav from '@/components/AppNav.vue'
+
+const router = useRouter()
+
+// 状态
+const searchQuery = ref('')
+const skills = ref([])
+const loading = ref(false)
+const currentPage = ref(1)
+const totalPages = ref(1)
+const total = ref(0)
+const activeCategory = ref('all')
+const selectedSkill = ref(null)
+
+// 分类
+const categories = ref([
+  { id: 'all', name: '全部', icon: '📦' },
+  { id: 'developer', name: '开发', icon: '💻' },
+  { id: 'designer', name: '设计', icon: '🎨' },
+  { id: 'writer', name: '写作', icon: '✍️' },
+  { id: 'analyst', name: '分析', icon: '📊' },
+  { id: 'manager', name: '管理', icon: '📋' },
+])
+
+// API
+const API_BASE = '/api/open'
+
+// 加载 Skills
+const loadSkills = async () => {
+  loading.value = true
+  try {
+    const url = `${API_BASE}/skills/search?q=${encodeURIComponent(searchQuery.value)}&page=${currentPage.value}&limit=12`
+    const response = await fetch(url)
+    const data = await response.json()
+    skills.value = data.results || []
+    total.value = data.total || 0
+    totalPages.value = Math.ceil(total.value / 12) || 1
+  } catch (error) {
+    console.error('加载 Skills 失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  currentPage.value = 1
+  loadSkills()
+}
+
+const searchSkills = () => {
+  handleSearch()
+}
+
+// 分类筛选
+const filterByCategory = (category) => {
+  activeCategory.value = category
+  currentPage.value = 1
+  loadSkills()
+}
+
+// 分页
+const goToPage = (page) => {
+  currentPage.value = page
+  loadSkills()
+}
+
+// 格式化日期
+const formatDate = (dateStr) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('zh-CN')
+}
+
+// 显示详情
+const showSkillDetail = (skill) => {
+  selectedSkill.value = skill
+}
+
+// 关闭弹窗
+const closeModal = () => {
+  selectedSkill.value = null
+}
+
+// 安装 Skill
+const installSkill = async (skill) => {
+  try {
+    const response = await fetch(`${API_BASE}/skills/${skill.name}/install`, {
+      method: 'POST',
+    })
+    if (response.ok) {
+      alert(`✅ ${skill.name} 安装成功！`)
+      closeModal()
+    } else {
+      alert('❌ 安装失败')
+    }
+  } catch (error) {
+    console.error('安装失败:', error)
+    alert('❌ 安装失败')
+  }
+}
+
+// 预览 Skill
+const previewSkill = (skill) => {
+  window.open(`${API_BASE}/skills/${skill.name}/SKILL.md`, '_blank')
+}
+
+// 初始化
+onMounted(() => {
+  loadSkills()
+})
+</script>
+
+<style scoped>
+.skills-market {
+  min-height: 100vh;
+  background: var(--bg-primary, #0d1117);
+  color: var(--text-primary, #e6edf3);
+}
+
+.market-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.market-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.market-header h1 {
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.search-bar {
+  display: flex;
+  gap: 12px;
+}
+
+.search-bar input {
+  width: 300px;
+  padding: 10px 16px;
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 8px;
+  background: var(--bg-secondary, #161b22);
+  color: var(--text-primary, #e6edf3);
+  font-size: 14px;
+}
+
+.search-bar input:focus {
+  outline: none;
+  border-color: var(--accent, #58a6ff);
+}
+
+.btn-search {
+  padding: 10px 20px;
+  background: var(--accent, #58a6ff);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.btn-search:hover {
+  opacity: 0.9;
+}
+
+.category-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+
+.tab-btn {
+  padding: 8px 16px;
+  background: var(--bg-secondary, #161b22);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 20px;
+  color: var(--text-secondary, #8b949e);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tab-btn:hover {
+  border-color: var(--accent, #58a6ff);
+}
+
+.tab-btn.active {
+  background: var(--accent, #58a6ff);
+  color: white;
+  border-color: var(--accent, #58a6ff);
+}
+
+.loading-state,
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-secondary, #8b949e);
+}
+
+.empty-icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.skills-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.skill-card {
+  background: var(--bg-secondary, #161b22);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 12px;
+  padding: 20px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.skill-card:hover {
+  border-color: var(--accent, #58a6ff);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.skill-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.skill-icon {
+  font-size: 24px;
+}
+
+.skill-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.skill-desc {
+  color: var(--text-secondary, #8b949e);
+  font-size: 14px;
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+.skill-meta {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.meta-tag {
+  font-size: 12px;
+  padding: 4px 8px;
+  background: var(--bg-primary, #0d1117);
+  border-radius: 4px;
+  color: var(--text-secondary, #8b949e);
+}
+
+.skill-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-install,
+.btn-preview {
+  flex: 1;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  border: none;
+}
+
+.btn-install {
+  background: var(--accent, #58a6ff);
+  color: white;
+}
+
+.btn-install:hover {
+  opacity: 0.9;
+}
+
+.btn-preview {
+  background: var(--bg-primary, #0d1117);
+  color: var(--text-secondary, #8b949e);
+  border: 1px solid var(--border-color, #30363d);
+}
+
+.btn-preview:hover {
+  border-color: var(--accent, #58a6ff);
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+.pagination button {
+  padding: 8px 16px;
+  background: var(--bg-secondary, #161b22);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 6px;
+  color: var(--text-primary, #e6edf3);
+  cursor: pointer;
+}
+
+.pagination button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.page-info {
+  color: var(--text-secondary, #8b949e);
+}
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: var(--bg-secondary, #161b22);
+  border: 1px solid var(--border-color, #30363d);
+  border-radius: 12px;
+  max-width: 600px;
+  width: 90%;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid var(--border-color, #30363d);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 20px;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: var(--text-secondary, #8b949e);
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+.detail-section {
+  margin-bottom: 20px;
+}
+
+.detail-section h4 {
+  font-size: 14px;
+  color: var(--text-secondary, #8b949e);
+  margin-bottom: 8px;
+}
+
+.detail-section pre {
+  background: var(--bg-primary, #0d1117);
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  overflow-x: auto;
+}
+
+.version-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  background: var(--accent, #58a6ff);
+  border-radius: 4px;
+  font-size: 12px;
+  color: white;
+}
+
+.taxonomy-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.taxonomy-tag {
+  font-size: 12px;
+  padding: 4px 8px;
+  background: var(--bg-primary, #0d1117);
+  border-radius: 4px;
+}
+
+.modal-footer {
+  padding: 20px;
+  border-top: 1px solid var(--border-color, #30363d);
+  text-align: center;
+}
+
+.btn-install-large {
+  padding: 12px 24px;
+  background: var(--accent, #58a6ff);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.btn-install-large:hover {
+  opacity: 0.9;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div class="template-agents-page">
+    <AppNav />
+
+    <div class="main-layout">
+      <!-- ═══ Left Sidebar (Template List) ═══ -->
+      <aside class="sidebar-panel">
+        <div class="sidebar-header">
+          <h3>📦 模板库库 ({{ templates.length }})</h3>
+        </div>
+        <div class="sidebar-search">
+          <input type="text" v-model="searchQuery" placeholder="搜索模板..." />
+        </div>
+        <div class="template-list-scroll">
+          <div 
+            v-for="tpl in filteredTemplates" :key="tpl.id"
+            class="template-item"
+            :class="{ active: selectedTemplateId === tpl.id }"
+            @click="selectTemplate(tpl.id)"
+          >
+            <div class="tpl-icon">{{ agentEmoji(tpl.type) }}</div>
+            <div class="tpl-info">
+              <div class="tpl-name">{{ tpl.name }}</div>
+              <div class="tpl-type">{{ tpl.type }}</div>
+            </div>
+            <div v-if="tpl.benchmarkScore" class="tpl-score">⭐ {{ tpl.benchmarkScore }}</div>
+          </div>
+          <div v-if="filteredTemplates.length === 0" class="empty-mini">未找到匹配模板</div>
+        </div>
+      </aside>
+
+      <!-- ═══ Right Content (Detail & Files) ═══ -->
+      <main class="content-panel">
+        <div v-if="selectedTemplate" class="template-detail">
+          
+          <div class="detail-header">
+            <div class="header-main">
+              <span class="header-icon">{{ agentEmoji(selectedTemplate.type) }}</span>
+              <div>
+                <h2>{{ selectedTemplate.name }}</h2>
+                <div class="meta-row">
+                  <span class="badge badge-type">{{ selectedTemplate.type }}</span>
+                  <span class="badge badge-used">被使用: {{ selectedTemplate.usedCount }} 次</span>
+                  <span v-if="selectedTemplate.benchmarkScore" class="badge badge-score">评分: {{ selectedTemplate.benchmarkScore }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- File Explorer -->
+          <div class="files-layout">
+            <div class="files-tree-panel">
+              <div class="panel-title">
+                📁 模板文件结构
+                <span class="file-count-badge">{{ templateFiles?.totalFiles || 0 }} 文件</span>
+              </div>
+              <div class="files-tree-scroll">
+                <div v-if="templateFiles?.tree?.length > 0">
+                  <template v-for="node in templateFiles.tree" :key="node.path">
+                    <CompanyFileNode :node="node" :depth="0" :selected="selectedFilePath" @select="previewTemplateFile" />
+                  </template>
+                </div>
+                <div v-else class="empty-mini">暂无文件或系统隐藏</div>
+              </div>
+            </div>
+
+            <div class="files-preview-panel">
+              <div class="panel-title">
+                👁️ {{ selectedFilePath || '文件预览' }}
+                <span v-if="filePreviewSize" class="file-size-badge">{{ formatFileSize(filePreviewSize) }}</span>
+              </div>
+              <div class="files-preview-scroll">
+                <pre v-if="filePreviewContent !== null" class="file-preview-code">{{ filePreviewContent }}</pre>
+                <div v-else class="empty-mini">← 点击左侧文件树以预览内容</div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div v-else class="empty-state">
+          <div class="empty-icon">📦</div>
+          <h3>请在左侧选择一个 Agent 模板</h3>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import axios from 'axios'
+import AppNav from '@/components/AppNav.vue'
+import CompanyFileNode from '@/components/CompanyFileNode.vue'
+
+const router = useRouter()
+const route = useRoute()
+
+const templates = ref([])
+const searchQuery = ref('')
+const selectedTemplateId = ref(null)
+
+const templateFiles = ref(null)
+const selectedFilePath = ref(null)
+const filePreviewContent = ref(null)
+const filePreviewSize = ref(0)
+
+const filteredTemplates = computed(() => {
+  if (!searchQuery.value) return templates.value;
+  const q = searchQuery.value.toLowerCase();
+  return templates.value.filter(t => t.id.toLowerCase().includes(q) || (t.name && t.name.toLowerCase().includes(q)));
+})
+
+const selectedTemplate = computed(() => {
+  return templates.value.find(t => t.id === selectedTemplateId.value) || null;
+})
+
+function agentEmoji(type) {
+  const map = { cxo: '👔', role: '🏢', skill: '⚙️', specialist: '🔬', writer: '✍️', 'data-analyst': '📈' }
+  return map[type] || '🤖'
+}
+
+function formatFileSize(bytes) {
+  if (!bytes) return ''
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1048576) return `${(bytes/1024).toFixed(1)} KB`
+  return `${(bytes/1048576).toFixed(1)} MB`
+}
+
+async function loadTemplates() {
+  try {
+    const { data } = await axios.get('/api/company/templates')
+    templates.value = data
+    
+    // Auto select from route if valid
+    if (route.params.agentId && templates.value.some(t => t.id === route.params.agentId)) {
+      selectedTemplateId.value = route.params.agentId;
+      await loadTemplateFiles(route.params.agentId);
+    } else if (templates.value.length > 0) {
+      // Default auto-select the first one and replace route
+      selectTemplate(templates.value[0].id)
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+function selectTemplate(id) {
+  selectedTemplateId.value = id;
+  // Clear file preview selection
+  selectedFilePath.value = null;
+  filePreviewContent.value = null;
+  filePreviewSize.value = 0;
+  
+  router.push(`/templates/${id}`);
+}
+
+async function loadTemplateFiles(id) {
+  try {
+    const { data } = await axios.get(`/api/company/templates/${id}/files`);
+    templateFiles.value = data;
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+async function previewTemplateFile(filePath) {
+  if (!selectedTemplateId.value) return;
+  selectedFilePath.value = filePath;
+  try {
+    const { data } = await axios.get(`/api/company/templates/${selectedTemplateId.value}/files/content`, {
+      params: { path: filePath }
+    });
+    filePreviewContent.value = data.content;
+    filePreviewSize.value = data.size || 0;
+  } catch (e) {
+    filePreviewContent.value = '(加载失败)';
+    filePreviewSize.value = 0;
+  }
+}
+
+watch(() => route.params.agentId, (newId) => {
+  if (newId && newId !== selectedTemplateId.value) {
+    selectedTemplateId.value = newId;
+    loadTemplateFiles(newId);
+  }
+})
+
+watch(selectedTemplateId, (newId) => {
+  if (newId) {
+    loadTemplateFiles(newId);
+  }
+})
+
+onMounted(() => {
+  loadTemplates()
+})
+</script>
+
+<style scoped>
+.template-agents-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+}
+
+.main-layout {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* ═══ Sidebar ═══ */
+.sidebar-panel {
+  width: 280px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-primary);
+  display: flex;
+  flex-direction: column;
+}
+.sidebar-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-primary);
+}
+.sidebar-header h3 {
+  font-size: 16px; font-weight: 700; margin: 0; color: var(--text-primary);
+}
+.sidebar-search {
+  padding: 12px;
+  border-bottom: 1px solid var(--border-primary);
+}
+.sidebar-search input {
+  width: 100%; padding: 8px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px; background: var(--bg-input);
+  color: var(--text-primary); font-size: 13px;
+  transition: all 0.2s;
+}
+.sidebar-search input:focus {
+  outline: none; border-color: var(--accent); background: var(--bg-input-focus);
+}
+.template-list-scroll {
+  flex: 1; overflow-y: auto; padding: 12px;
+  display: flex; flex-direction: column; gap: 8px;
+}
+.template-item {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px; border-radius: 10px; cursor: pointer;
+  border: 1px solid transparent; transition: all 0.2s;
+}
+.template-item:hover {
+  background: var(--bg-surface-hover);
+}
+.template-item.active {
+  background: var(--bg-surface);
+  border-color: var(--border-active);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+}
+.tpl-icon { font-size: 24px; }
+.tpl-info { flex: 1; min-width: 0; }
+.tpl-name { 
+  font-size: 14px; font-weight: 700; color: var(--text-primary); 
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.tpl-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }
+.tpl-score { font-size: 11px; color: var(--yellow-text); font-weight: 700; }
+
+.empty-mini { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
+
+/* ═══ Main Content ═══ */
+.content-panel {
+  flex: 1; display: flex; flex-direction: column;
+  background: var(--bg-primary); padding: 24px;
+}
+.empty-state {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  height: 100%; color: var(--text-muted);
+}
+.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
+.template-detail {
+  display: flex; flex-direction: column; height: 100%; gap: 24px;
+}
+.detail-header {
+  background: var(--bg-secondary); border: 1px solid var(--border-primary);
+  border-radius: 16px; padding: 24px; display: flex; justify-content: space-between; align-items: center;
+}
+.header-main { display: flex; align-items: center; gap: 20px; }
+.header-icon { font-size: 48px; }
+.header-main h2 { font-size: 24px; font-weight: 800; margin: 0 0 8px 0; color: var(--text-primary); }
+.meta-row { display: flex; gap: 12px; }
+.badge { padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }
+.badge-type { background: var(--bg-surface-hover); color: var(--text-secondary); border: 1px solid var(--border-primary); text-transform: uppercase; }
+.badge-used { background: rgba(59,130,246,0.1); color: var(--blue-text); }
+.badge-score { background: rgba(251,191,36,0.1); color: var(--yellow-text); }
+
+/* ═══ Files Layout ═══ */
+.files-layout {
+  display: flex; gap: 0; flex: 1; min-height: 0;
+  border: 1px solid var(--border-primary); border-radius: 12px; overflow: hidden;
+  background: var(--bg-surface);
+}
+.files-tree-panel {
+  width: 300px; min-width: 240px; border-right: 1px solid var(--border-primary);
+  display: flex; flex-direction: column; background: var(--bg-overlay);
+}
+.files-preview-panel {
+  flex: 1; display: flex; flex-direction: column; min-width: 0;
+}
+.panel-title {
+  padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-primary);
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.files-tree-scroll { flex: 1; overflow-y: auto; padding: 8px; }
+.files-preview-scroll { flex: 1; overflow: auto; padding: 12px; background: var(--bg-input); }
+.file-preview-code {
+  font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: 13px;
+  line-height: 1.6; color: var(--text-secondary); white-space: pre-wrap;
+  word-break: break-all; margin: 0; padding: 4px;
+}
+.file-count-badge {
+  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
+  background: var(--accent-bg); color: var(--accent); flex-shrink: 0;
+}
+.file-size-badge {
+  padding: 2px 8px; border-radius: 6px; font-size: 11px;
+  background: var(--purple-bg, rgba(139,92,246,0.1)); color: var(--purple-text, #a78bfa);
+  flex-shrink: 0; font-weight: 600;
+}
+</style>