feat: Agent action controls - chat, skills panel, train trigger

- Agent names are clickable links to chatbot page - Action button group per agent: heartbeat ▶/⏹, 💬 Chat, 📋 Skills, 🎓 Train - Expandable skills panel shows agent's loaded skills - Train button sends instruction to CEO to arrange Innovator training - Backend: GET /api/company/:id/agents/:agentId/skills API

feat: Agent action controls - chat, skills panel, train trigger
- Agent names are clickable links to chatbot page - Action button group per agent: heartbeat ▶/⏹, 💬 Chat, 📋 Skills, 🎓 Train - Expandable skills panel shows agent's loaded skills - Train button sends instruction to CEO to arrange Innovator training - Backend: GET /api/company/:id/agents/:agentId/skills API
Yi Bo
1 parent c5693e36
Showing 2 changed files with 169 additions and 42 deletions
server/routes/company.js
web/src/views/CompanyDashboard.vue
@@ -285,6 +285,32 @@ router.post(&#39;/:companyId/agents/:agentId/heartbeat/stop&#39;, (req, res) =&gt; {
 });
 // ═══════════════════════════════════════
+//  Agent 技能查询
+// ═══════════════════════════════════════
+
+// GET /api/company/:companyId/agents/:agentId/skills — 获取 Agent 技能列表
+router.get('/:companyId/agents/:agentId/skills', (req, res) => {
+  try {
+    const path = require('path');
+    const fs = require('fs');
+    const DATA_DIR = path.resolve(__dirname, '../../data');
+    const skillsDir = path.join(DATA_DIR, req.params.companyId, 'agents', req.params.agentId, 'skills');
+
+    if (!fs.existsSync(skillsDir)) {
+      return res.json([]);
+    }
+
+    const skills = fs.readdirSync(skillsDir, { withFileTypes: true })
+      .filter(d => d.isDirectory())
+      .map(d => d.name);
+
+    res.json(skills);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ═══════════════════════════════════════
 //  Agent 招聘
 // ═══════════════════════════════════════
@@ -123,48 +123,68 @@
                 <span class="col-heartbeat">心跳</span>
                 <span class="col-actions">操作</span>
               </div>
-              <div v-for="agent in companyStatus.agents" :key="agent.id" class="table-row">
-                <span class="col-name">
-                  <span class="agent-dot" :class="agent.heartbeatActive ? 'active' : 'inactive'"></span>
-                  {{ agent.name }}
-                </span>
-                <span class="col-type">
-                  <span class="type-badge">{{ agent.type }}</span>
-                </span>
-                <span class="col-status">
-                  <span class="card-status" :class="agent.status">{{ agent.status }}</span>
-                </span>
-                <span class="col-interval">
-                  <select
-                    class="interval-select"
-                    :value="agent.heartbeatInterval"
-                    @change="updateAgentInterval(agent.id, $event.target.value)"
-                  >
-                    <option :value="1">1 分钟</option>
-                    <option :value="5">5 分钟</option>
-                    <option :value="10">10 分钟</option>
-                    <option :value="15">15 分钟</option>
-                    <option :value="30">30 分钟</option>
-                    <option :value="60">60 分钟</option>
-                  </select>
-                </span>
-                <span class="col-heartbeat">
-                  <span v-if="agent.heartbeatActive" class="hb-active">💓 运行中</span>
-                  <span v-else class="hb-inactive">⏸️ 停止</span>
-                </span>
-                <span class="col-actions">
-                  <button
-                    v-if="!agent.heartbeatActive"
-                    class="btn-agent-start"
-                    @click="startAgentHeartbeat(agent.id)"
-                  >▶ 启动</button>
-                  <button
-                    v-else
-                    class="btn-agent-stop"
-                    @click="stopAgentHeartbeat(agent.id)"
-                  >⏹ 停止</button>
-                </span>
-              </div>
+              <template v-for="agent in companyStatus.agents" :key="agent.id">
+                <div class="table-row">
+                  <span class="col-name">
+                    <span class="agent-dot" :class="agent.heartbeatActive ? 'active' : 'inactive'"></span>
+                    <a class="agent-name-link" @click="goToAgentChat(agent.id)">{{ agent.name }}</a>
+                  </span>
+                  <span class="col-type">
+                    <span class="type-badge">{{ agent.type }}</span>
+                  </span>
+                  <span class="col-status">
+                    <span class="card-status" :class="agent.status">{{ agent.status }}</span>
+                  </span>
+                  <span class="col-interval">
+                    <select
+                      class="interval-select"
+                      :value="agent.heartbeatInterval"
+                      @change="updateAgentInterval(agent.id, $event.target.value)"
+                    >
+                      <option :value="1">1 分钟</option>
+                      <option :value="5">5 分钟</option>
+                      <option :value="10">10 分钟</option>
+                      <option :value="15">15 分钟</option>
+                      <option :value="30">30 分钟</option>
+                      <option :value="60">60 分钟</option>
+                    </select>
+                  </span>
+                  <span class="col-heartbeat">
+                    <span v-if="agent.heartbeatActive" class="hb-active">💓 运行中</span>
+                    <span v-else class="hb-inactive">⏸️ 停止</span>
+                  </span>
+                  <span class="col-actions">
+                    <div class="action-group">
+                      <button
+                        v-if="!agent.heartbeatActive"
+                        class="btn-agent-start"
+                        @click="startAgentHeartbeat(agent.id)"
+                        title="启动心跳"
+                      >▶</button>
+                      <button
+                        v-else
+                        class="btn-agent-stop"
+                        @click="stopAgentHeartbeat(agent.id)"
+                        title="停止心跳"
+                      >⏹</button>
+                      <button class="btn-action-chat" @click="goToAgentChat(agent.id)" title="聊天">💬</button>
+                      <button class="btn-action-skills" @click="toggleAgentSkills(agent.id)" title="技能">📋</button>
+                      <button class="btn-action-train" @click="triggerTrain(agent.id)" title="训练">🎓</button>
+                    </div>
+                  </span>
+                </div>
+                <!-- Expandable Skills Panel -->
+                <div v-if="expandedAgent === agent.id" class="agent-expand-panel">
+                  <div class="expand-header">
+                    <h4>📋 {{ agent.name }} 的技能列表</h4>
+                    <button class="btn-close-expand" @click="expandedAgent = null">✕</button>
+                  </div>
+                  <div v-if="agentSkills.length > 0" class="skills-grid">
+                    <div v-for="skill in agentSkills" :key="skill" class="skill-chip">⚡ {{ skill }}</div>
+                  </div>
+                  <div v-else class="empty-mini" style="padding:12px;">暂无技能（可通过 Innovator 训练获得）</div>
+                </div>
+              </template>
             </div>
             <div v-else class="empty-mini">暂无 Agent</div>
           </div>
@@ -312,6 +332,8 @@ const templates = ref([])
 const activeTab = ref('overview')
 const showTemplates = ref(false)
 const showDropdown = ref(false)
+const expandedAgent = ref(null)
+const agentSkills = ref([])
 function statusLabel(status) {
   const map = { creating: '创建中', running: '运行中', paused: '已暂停', shutdown: '已关停' }
@@ -482,6 +504,41 @@ async function stopAgentHeartbeat(agentId) {
   } catch (e) { console.error(e) }
 }
+function goToAgentChat(agentId) {
+  if (!selectedCompany.value) return
+  router.push(`/${selectedCompany.value.id}/agents/${agentId}`)
+}
+
+async function toggleAgentSkills(agentId) {
+  if (expandedAgent.value === agentId) {
+    expandedAgent.value = null
+    return
+  }
+  // Fetch skills from backend
+  try {
+    const { data } = await axios.get(`/api/company/${selectedCompany.value.id}/agents/${agentId}/skills`)
+    agentSkills.value = data
+  } catch {
+    agentSkills.value = []
+  }
+  expandedAgent.value = agentId
+}
+
+async function triggerTrain(agentId) {
+  if (!selectedCompany.value) return
+  const namespacedId = `${selectedCompany.value.id}:${agentId}`
+  if (!confirm(`确定要对 ${agentId} 发起 Innovator 训练？这将触发 agent-creator 重新定义并由 Innovator 训练该 Agent。`)) return
+  try {
+    await axios.post(`/api/agent/${selectedCompany.value.id}:ceo/chat`, {
+      message: `请安排 Innovator 对 ${namespacedId} 进行一次完整的技能训练/再训练。要求：1)评估当前技能缺口 2)使用 Innovator 进行 FDE 训练 3)训练完成后汇报结果`,
+      conversationId: `train-${agentId}-${Date.now().toString(36)}`,
+    })
+    alert(`✅ 训练指令已发送给 CEO，CEO 将安排 Innovator 训练 ${agentId}`)
+  } catch (e) {
+    alert(`❌ 发送训练指令失败: ${e.message}`)
+  }
+}
+
 // switchTab removed, handled by goToTab and router watcher
 onMounted(() => {
@@ -963,4 +1020,48 @@ function closeDropdown() {
 .hb-active { color: var(--accent-light); font-size: 12px; }
 .hb-inactive { color: var(--text-muted); font-size: 12px; }
+
+/* Agent Name Link */
+.agent-name-link {
+  color: var(--text-primary); cursor: pointer; text-decoration: none;
+  transition: color 0.15s;
+}
+.agent-name-link:hover { color: var(--accent-light); text-decoration: underline; }
+
+/* Action Button Group */
+.action-group { display: flex; gap: 4px; align-items: center; }
+.action-group button {
+  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-primary);
+  background: var(--bg-primary); cursor: pointer; font-size: 13px;
+  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
+  padding: 0;
+}
+.action-group button:hover { background: var(--bg-surface-hover); border-color: var(--border-active); transform: scale(1.1); }
+
+.btn-action-chat { color: var(--accent-light); }
+.btn-action-skills { color: var(--blue-text, #60a5fa); }
+.btn-action-train { color: var(--purple-text, #a78bfa); }
+
+/* Expandable Skills Panel */
+.agent-expand-panel {
+  padding: 16px 20px; background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-primary);
+  animation: fadeIn 0.2s ease;
+}
+.expand-header {
+  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
+}
+.expand-header h4 { font-size: 13px; font-weight: 700; margin: 0; }
+.btn-close-expand {
+  background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px;
+  padding: 4px 8px; border-radius: 4px; transition: all 0.15s;
+}
+.btn-close-expand:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
+
+.skills-grid { display: flex; flex-wrap: wrap; gap: 8px; }
+.skill-chip {
+  padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
+  background: rgba(139,92,246,0.08); color: var(--purple-text, #a78bfa);
+  border: 1px solid rgba(139,92,246,0.15);
+}
 </style>