feat(web): add Company Dashboard frontend

- CompanyDashboard.vue: full company management UI - Company list grid with status badges - Company detail view with tabs (Agents/Pipelines/Goals) - Create company modal - Hire agent modal with template/training feedback - Template library slide-out panel - Pipeline flow visualization (step nodes with arrows) - Pipeline run history with status - OKR goals list - Route: /company registered in Vue Router - Build verified: all assets compiled successfully

feat(web): add Company Dashboard frontend
- CompanyDashboard.vue: full company management UI - Company list grid with status badges - Company detail view with tabs (Agents/Pipelines/Goals) - Create company modal - Hire agent modal with template/training feedback - Template library slide-out panel - Pipeline flow visualization (step nodes with arrows) - Pipeline run history with status - OKR goals list - Route: /company registered in Vue Router - Build verified: all assets compiled successfully
yibo
1 parent 6d03688f
Showing 2 changed files with 647 additions and 0 deletions
web/src/router/index.js
web/src/views/CompanyDashboard.vue
@@ -16,6 +16,11 @@ const routes = [
     props: true,
   },
   {
+    path: '/company',
+    name: 'CompanyDashboard',
+    component: () => import('@/views/CompanyDashboard.vue'),
+  },
+  {
     path: '/okr',
     name: 'OkrDashboard',
     component: () => import('@/views/OkrDashboard.vue'),
+<template>
+  <div class="company-dashboard">
+    <!-- ═══ Top Bar ═══ -->
+    <header class="top-bar">
+      <div class="top-bar-left">
+        <span class="logo">🏢</span>
+        <h1 class="title">Company Dashboard</h1>
+      </div>
+      <div class="top-bar-right">
+        <button class="btn-create" @click="showCreateModal = true">
+          <span>＋</span> 创建公司
+        </button>
+        <button class="btn-templates" @click="showTemplates = !showTemplates">
+          📦 模板库 ({{ templates.length }})
+        </button>
+      </div>
+    </header>
+
+    <!-- ═══ Company List ═══ -->
+    <section class="company-grid" v-if="!selectedCompany">
+      <div
+        v-for="company in companies"
+        :key="company.id"
+        class="company-card"
+        :class="[`status-${company.status}`]"
+        @click="selectCompany(company.id)"
+      >
+        <div class="card-header">
+          <span class="card-emoji">🏢</span>
+          <span class="card-status" :class="company.status">{{ statusLabel(company.status) }}</span>
+        </div>
+        <h3 class="card-name">{{ company.name }}</h3>
+        <div class="card-meta">
+          <span>👥 {{ company.agentCount }} 人</span>
+          <span v-if="company.ceo">👔 {{ company.ceo }}</span>
+        </div>
+      </div>
+
+      <!-- Empty state -->
+      <div v-if="companies.length === 0" class="empty-state">
+        <span class="empty-icon">🏗️</span>
+        <p>还没有任何公司</p>
+        <button class="btn-create" @click="showCreateModal = true">创建第一家公司</button>
+      </div>
+    </section>
+
+    <!-- ═══ Company Detail ═══ -->
+    <section class="company-detail" v-if="selectedCompany">
+      <div class="detail-header">
+        <button class="btn-back" @click="selectedCompany = null">← 返回列表</button>
+        <div class="detail-title-row">
+          <h2>{{ selectedCompany.name }}</h2>
+          <span class="card-status" :class="selectedCompany.status">{{ statusLabel(selectedCompany.status) }}</span>
+        </div>
+        <p class="detail-desc">{{ selectedCompany.description || '暂无描述' }}</p>
+      </div>
+
+      <!-- Tabs -->
+      <div class="tabs">
+        <button
+          v-for="tab in tabs"
+          :key="tab.key"
+          :class="{ active: activeTab === tab.key }"
+          @click="switchTab(tab.key)"
+        >
+          {{ tab.icon }} {{ tab.label }}
+        </button>
+      </div>
+
+      <!-- Tab: Agents -->
+      <div v-if="activeTab === 'agents'" class="tab-content">
+        <div class="section-header">
+          <h3>团队成员</h3>
+          <button class="btn-sm" @click="showHireModal = true">＋ 招聘</button>
+        </div>
+        <div class="agents-grid">
+          <div v-for="agent in companyAgents" :key="agent.id" class="agent-card">
+            <div class="agent-avatar">{{ agentEmoji(agent.type) }}</div>
+            <div class="agent-info">
+              <span class="agent-name">{{ agent.name }}</span>
+              <span class="agent-type">{{ agent.type }}</span>
+            </div>
+            <span class="agent-status" :class="agent.status">{{ agent.status }}</span>
+          </div>
+          <div v-if="companyAgents.length === 0" class="empty-mini">暂无成员</div>
+        </div>
+      </div>
+
+      <!-- Tab: Pipelines -->
+      <div v-if="activeTab === 'pipelines'" class="tab-content">
+        <div class="section-header">
+          <h3>SOP 流水线</h3>
+        </div>
+        <div class="pipeline-list">
+          <div v-for="p in pipelines" :key="p.id" class="pipeline-card" @click="loadPipelineDetail(p.id)">
+            <div class="pipeline-header">
+              <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>
+          <div v-if="pipelines.length === 0" class="empty-mini">暂无流水线</div>
+        </div>
+
+        <!-- Pipeline Detail -->
+        <div v-if="selectedPipeline" class="pipeline-detail">
+          <h4>{{ selectedPipeline.name }}</h4>
+          <div class="step-flow">
+            <div
+              v-for="(step, idx) in selectedPipeline.steps"
+              :key="idx"
+              class="step-node"
+            >
+              <div class="step-index">{{ idx + 1 }}</div>
+              <div class="step-info">
+                <span class="step-name">{{ step.name }}</span>
+                <span class="step-agent">🤖 {{ step.agent }}</span>
+              </div>
+              <div v-if="idx < selectedPipeline.steps.length - 1" class="step-arrow">→</div>
+            </div>
+          </div>
+          <div v-if="selectedPipeline.cron" class="cron-badge">
+            🔄 自动触发: 每 {{ selectedPipeline.cron.intervalHours }} 小时
+          </div>
+        </div>
+
+        <!-- Runs -->
+        <div v-if="pipelineRuns.length > 0" class="runs-section">
+          <h4>运行记录</h4>
+          <div v-for="run in pipelineRuns" :key="run.runId" class="run-card">
+            <div class="run-header">
+              <span class="run-id">{{ run.runId }}</span>
+              <span class="card-status" :class="run.status">{{ run.status }}</span>
+            </div>
+            <div class="run-meta">
+              <span>📌 {{ run.pipelineName }}</span>
+              <span>步骤 {{ run.currentStep + 1 }}/{{ run.totalSteps }}</span>
+              <span>🚀 {{ run.trigger }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tab: Goals -->
+      <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>
+            <h4 class="goal-title">{{ g.title }}</h4>
+            <div class="goal-meta">
+              <span>👤 {{ g.owner }}</span>
+            </div>
+          </div>
+          <div v-if="goals.length === 0" class="empty-mini">暂无目标</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ═══ Create Company Modal ═══ -->
+    <div v-if="showCreateModal" class="modal-overlay" @click.self="showCreateModal = false">
+      <div class="modal">
+        <h3>🏢 创建新公司</h3>
+        <label>公司 ID (英文)</label>
+        <input v-model="newCompany.id" placeholder="media-co" />
+        <label>公司名称</label>
+        <input v-model="newCompany.name" placeholder="柠檬自媒体" />
+        <label>公司使命</label>
+        <textarea v-model="newCompany.description" placeholder="描述公司的使命..." rows="3"></textarea>
+        <div class="modal-actions">
+          <button class="btn-cancel" @click="showCreateModal = false">取消</button>
+          <button class="btn-create" @click="createCompany" :disabled="!newCompany.id || !newCompany.name">创建</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ Hire Modal ═══ -->
+    <div v-if="showHireModal" class="modal-overlay" @click.self="showHireModal = false">
+      <div class="modal">
+        <h3>👔 招聘 Agent</h3>
+        <label>角色 ID</label>
+        <input v-model="hireForm.role" placeholder="content-writer" />
+        <label>角色名称</label>
+        <input v-model="hireForm.name" placeholder="内容写手" />
+        <label>类型</label>
+        <select v-model="hireForm.type">
+          <option value="skill">skill (执行层)</option>
+          <option value="cxo">cxo (管理层)</option>
+          <option value="role">role (职能层)</option>
+        </select>
+        <div class="modal-actions">
+          <button class="btn-cancel" @click="showHireModal = false">取消</button>
+          <button class="btn-create" @click="hireAgent" :disabled="!hireForm.role">招聘</button>
+        </div>
+        <div v-if="hireResult" class="hire-result" :class="hireResult.status">
+          {{ hireResult.status === 'hired_from_template' ? '✅ 从模板招聘成功' : 
+             hireResult.status === 'training' ? '🎓 骨架已创建，需要训练' :
+             hireResult.status === 'already_exists' ? '⚠️ 已存在' : hireResult.status }}
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ Templates Panel ═══ -->
+    <div v-if="showTemplates" class="templates-panel">
+      <div class="panel-header">
+        <h3>📦 模板库</h3>
+        <button @click="showTemplates = false">✕</button>
+      </div>
+      <div class="template-list">
+        <div v-for="tpl in templates" :key="tpl.id" class="template-card">
+          <div class="tpl-name">{{ tpl.name }}</div>
+          <div class="tpl-meta">
+            <span class="tpl-type">{{ tpl.type }}</span>
+            <span v-if="tpl.benchmarkScore" class="tpl-score">⭐ {{ tpl.benchmarkScore }}</span>
+            <span class="tpl-used">用 {{ tpl.usedCount }} 次</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+
+const companies = ref([])
+const selectedCompany = ref(null)
+const companyAgents = ref([])
+const pipelines = ref([])
+const pipelineRuns = ref([])
+const selectedPipeline = ref(null)
+const goals = ref([])
+const templates = ref([])
+const activeTab = ref('agents')
+const showCreateModal = ref(false)
+const showHireModal = ref(false)
+const showTemplates = ref(false)
+
+const tabs = [
+  { key: 'agents', icon: '👥', label: '团队' },
+  { key: 'pipelines', icon: '⚙️', label: '流水线' },
+  { key: 'goals', icon: '🎯', label: 'OKR' },
+]
+
+const newCompany = ref({ id: '', name: '', description: '' })
+const hireForm = ref({ role: '', name: '', type: 'skill' })
+const hireResult = ref(null)
+
+function statusLabel(status) {
+  const map = { creating: '创建中', running: '运行中', paused: '已暂停', shutdown: '已关停' }
+  return map[status] || status
+}
+
+function agentEmoji(type) {
+  const map = { cxo: '👔', role: '🏢', skill: '⚙️', specialist: '🔬' }
+  return map[type] || '🤖'
+}
+
+async function loadCompanies() {
+  try {
+    const { data } = await axios.get('/api/company/list')
+    companies.value = data
+  } catch (e) { console.error(e) }
+}
+
+async function loadTemplates() {
+  try {
+    const { data } = await axios.get('/api/company/templates')
+    templates.value = data
+  } catch (e) { console.error(e) }
+}
+
+async function selectCompany(id) {
+  try {
+    const { data } = await axios.get(`/api/company/${id}`)
+    selectedCompany.value = data
+    activeTab.value = 'agents'
+    await loadCompanyAgents(id)
+  } catch (e) { console.error(e) }
+}
+
+async function loadCompanyAgents(id) {
+  try {
+    const { data } = await axios.get(`/api/company/${id}/agents`)
+    companyAgents.value = data
+  } catch (e) { console.error(e) }
+}
+
+async function loadPipelines(id) {
+  try {
+    const { data } = await axios.get(`/api/company/${id}/pipelines`)
+    pipelines.value = data
+    selectedPipeline.value = null
+    // load runs
+    const { data: runs } = await axios.get(`/api/company/${id}/pipelines/runs/list`)
+    pipelineRuns.value = runs
+  } catch (e) { console.error(e) }
+}
+
+async function loadPipelineDetail(pipelineId) {
+  try {
+    const { data } = await axios.get(`/api/company/${selectedCompany.value.id}/pipelines/${pipelineId}`)
+    selectedPipeline.value = data
+  } catch (e) { console.error(e) }
+}
+
+async function loadGoals(id) {
+  try {
+    const { data } = await axios.get(`/api/company/${id}/goals`)
+    goals.value = data
+  } catch (e) { console.error(e) }
+}
+
+function switchTab(key) {
+  activeTab.value = key
+  const id = selectedCompany.value?.id
+  if (!id) return
+  if (key === 'agents') loadCompanyAgents(id)
+  if (key === 'pipelines') loadPipelines(id)
+  if (key === 'goals') loadGoals(id)
+}
+
+async function createCompany() {
+  try {
+    await axios.post('/api/company/create', newCompany.value)
+    showCreateModal.value = false
+    newCompany.value = { id: '', name: '', description: '' }
+    await loadCompanies()
+  } catch (e) { alert(e.response?.data?.error || e.message) }
+}
+
+async function hireAgent() {
+  try {
+    const { data } = await axios.post(`/api/company/${selectedCompany.value.id}/hire`, hireForm.value)
+    hireResult.value = data
+    await loadCompanyAgents(selectedCompany.value.id)
+    setTimeout(() => { hireResult.value = null }, 3000)
+  } catch (e) { alert(e.response?.data?.error || e.message) }
+}
+
+onMounted(() => {
+  loadCompanies()
+  loadTemplates()
+})
+</script>
+
+<style scoped>
+.company-dashboard {
+  min-height: 100vh;
+  padding: 0;
+  background: var(--bg-primary);
+}
+
+/* ═══ Top Bar ═══ */
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 32px;
+  border-bottom: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  backdrop-filter: blur(20px);
+  position: sticky; top: 0; z-index: 100;
+}
+.top-bar-left { display: flex; align-items: center; gap: 12px; }
+.logo { font-size: 28px; }
+.title { font-size: 20px; font-weight: 700; color: var(--text-primary); }
+.top-bar-right { display: flex; gap: 12px; }
+
+/* ═══ Buttons ═══ */
+.btn-create {
+  background: linear-gradient(135deg, var(--accent), #059669);
+  color: #fff; border: none; padding: 8px 20px;
+  border-radius: 10px; font-size: 14px; font-weight: 600;
+  cursor: pointer; transition: all 0.2s;
+  display: flex; align-items: center; gap: 6px;
+}
+.btn-create:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(16,185,129,0.3); }
+.btn-create:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+
+.btn-templates {
+  background: var(--bg-surface); color: var(--text-secondary);
+  border: 1px solid var(--border-primary); padding: 8px 16px;
+  border-radius: 10px; font-size: 13px; cursor: pointer;
+  transition: all 0.2s;
+}
+.btn-templates:hover { background: var(--bg-surface-hover); }
+
+.btn-sm {
+  background: var(--accent-bg); color: var(--accent);
+  border: 1px solid var(--border-active); padding: 6px 14px;
+  border-radius: 8px; font-size: 12px; font-weight: 600;
+  cursor: pointer; transition: all 0.2s;
+}
+.btn-sm:hover { background: var(--accent-bg-hover); }
+
+.btn-back {
+  background: none; border: none; color: var(--text-tertiary);
+  font-size: 14px; cursor: pointer; padding: 4px 0;
+  transition: color 0.2s;
+}
+.btn-back:hover { color: var(--accent); }
+
+.btn-cancel {
+  background: var(--bg-surface); color: var(--text-secondary);
+  border: 1px solid var(--border-primary); padding: 8px 20px;
+  border-radius: 10px; font-size: 14px; cursor: pointer;
+}
+
+/* ═══ Company Grid ═══ */
+.company-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px; padding: 32px;
+}
+
+.company-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 16px; padding: 24px; cursor: pointer;
+  transition: all 0.25s ease;
+}
+.company-card:hover {
+  border-color: var(--border-active);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(16,185,129,0.08);
+}
+.company-card.status-running { border-left: 3px solid var(--accent); }
+.company-card.status-shutdown { opacity: 0.5; }
+
+.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+.card-emoji { font-size: 32px; }
+.card-status {
+  padding: 4px 10px; border-radius: 20px;
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+}
+.card-status.running { background: rgba(16,185,129,0.15); color: var(--accent-light); }
+.card-status.creating { background: rgba(59,130,246,0.15); color: var(--blue-text); }
+.card-status.paused { background: rgba(251,191,36,0.15); color: var(--yellow-text); }
+.card-status.shutdown { background: rgba(255,255,255,0.05); color: var(--text-muted); }
+.card-status.active { background: rgba(16,185,129,0.15); color: var(--accent-light); }
+.card-status.completed { background: rgba(16,185,129,0.15); color: var(--accent-light); }
+.card-status.failed { background: rgba(239,68,68,0.15); color: #f87171; }
+.card-status.training { background: rgba(139,92,246,0.15); color: var(--purple-text); }
+.card-status.suspended { background: rgba(255,255,255,0.05); color: var(--text-muted); }
+.card-status.ready { background: rgba(59,130,246,0.15); color: var(--blue-text); }
+
+.card-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
+.card-meta { display: flex; gap: 16px; font-size: 13px; color: var(--text-tertiary); }
+
+/* ═══ Empty State ═══ */
+.empty-state {
+  grid-column: 1 / -1;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  text-align: center; padding: 80px 20px;
+  color: var(--text-muted);
+}
+.empty-icon { font-size: 64px; display: block; margin-bottom: 16px; }
+.empty-mini { padding: 32px; text-align: center; color: var(--text-muted); font-size: 14px; }
+
+/* ═══ Company Detail ═══ */
+.company-detail { padding: 32px; }
+.detail-header { margin-bottom: 24px; }
+.detail-title-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
+.detail-title-row h2 { font-size: 24px; font-weight: 800; }
+.detail-desc { color: var(--text-tertiary); font-size: 14px; }
+
+/* ═══ Tabs ═══ */
+.tabs {
+  display: flex; gap: 4px;
+  border-bottom: 1px solid var(--border-primary);
+  margin-bottom: 24px;
+}
+.tabs button {
+  background: none; border: none; padding: 12px 20px;
+  font-size: 14px; font-weight: 500; cursor: pointer;
+  color: var(--text-tertiary); border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+.tabs button:hover { color: var(--text-primary); }
+.tabs button.active {
+  color: var(--accent); border-bottom-color: var(--accent);
+}
+
+.tab-content { animation: fadeIn 0.3s ease; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.section-header h3 { font-size: 16px; font-weight: 700; }
+
+/* ═══ Agents Grid ═══ */
+.agents-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 12px;
+}
+.agent-card {
+  display: flex; align-items: center; gap: 12px;
+  background: var(--bg-surface); border: 1px solid var(--border-primary);
+  border-radius: 12px; padding: 16px; transition: all 0.2s;
+}
+.agent-card:hover { border-color: var(--border-active); }
+.agent-avatar { font-size: 28px; }
+.agent-info { flex: 1; }
+.agent-name { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); }
+.agent-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
+.agent-status { font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: 600; }
+.agent-status.active { background: rgba(16,185,129,0.15); color: var(--accent-light); }
+.agent-status.training { background: rgba(139,92,246,0.15); color: var(--purple-text); }
+.agent-status.ready { background: rgba(59,130,246,0.15); color: var(--blue-text); }
+.agent-status.suspended { background: rgba(255,255,255,0.05); color: var(--text-muted); }
+
+/* ═══ Pipelines ═══ */
+.pipeline-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
+.pipeline-card {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 16px 20px; background: var(--bg-surface);
+  border: 1px solid var(--border-primary); border-radius: 12px;
+  cursor: pointer; transition: all 0.2s;
+}
+.pipeline-card:hover { border-color: var(--border-active); }
+.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-detail {
+  background: var(--bg-surface); border: 1px solid var(--border-primary);
+  border-radius: 12px; padding: 24px; margin-bottom: 24px;
+}
+.pipeline-detail h4 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
+
+.step-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+.step-node { display: flex; align-items: center; gap: 8px; }
+.step-index {
+  width: 28px; height: 28px; border-radius: 50%;
+  background: var(--accent-bg); color: var(--accent);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 12px; font-weight: 700;
+}
+.step-info { display: flex; flex-direction: column; }
+.step-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+.step-agent { font-size: 11px; color: var(--text-muted); }
+.step-arrow { font-size: 18px; color: var(--text-muted); margin: 0 4px; }
+
+.cron-badge {
+  margin-top: 12px; padding: 8px 14px;
+  background: rgba(139,92,246,0.1); color: var(--purple-text);
+  border-radius: 8px; font-size: 12px; font-weight: 600;
+  display: inline-block;
+}
+
+.runs-section h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--text-secondary); }
+.run-card {
+  padding: 14px 18px; background: var(--bg-surface);
+  border: 1px solid var(--border-primary); border-radius: 10px;
+  margin-bottom: 8px;
+}
+.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); }
+
+/* ═══ Modal ═══ */
+.modal-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
+  display: flex; align-items: center; justify-content: center; z-index: 200;
+  backdrop-filter: blur(4px);
+}
+.modal {
+  background: var(--bg-secondary); border: 1px solid var(--border-primary);
+  border-radius: 20px; padding: 32px; width: 420px; max-width: 90vw;
+  animation: slideUp 0.3s ease;
+}
+@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
+
+.modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
+.modal label {
+  display: block; font-size: 12px; font-weight: 600;
+  color: var(--text-muted); margin: 12px 0 6px; text-transform: uppercase;
+}
+.modal input, .modal textarea, .modal select {
+  width: 100%; padding: 10px 14px; border-radius: 10px;
+  border: 1px solid var(--border-primary); background: var(--bg-input);
+  color: var(--text-primary); font-size: 14px; font-family: inherit;
+  transition: border-color 0.2s;
+}
+.modal input:focus, .modal textarea:focus, .modal select:focus {
+  outline: none; border-color: var(--accent);
+  background: var(--bg-input-focus);
+}
+.modal-actions { display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end; }
+
+.hire-result {
+  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
+  font-size: 13px; font-weight: 600; animation: fadeIn 0.3s;
+}
+.hire-result.hired_from_template { background: rgba(16,185,129,0.1); color: var(--accent-light); }
+.hire-result.training { background: rgba(139,92,246,0.1); color: var(--purple-text); }
+.hire-result.already_exists { background: rgba(251,191,36,0.1); color: var(--yellow-text); }
+
+/* ═══ Templates Panel ═══ */
+.templates-panel {
+  position: fixed; right: 0; top: 0; bottom: 0; width: 340px;
+  background: var(--bg-secondary); border-left: 1px solid var(--border-primary);
+  z-index: 150; padding: 24px; overflow-y: auto;
+  animation: slideLeft 0.3s ease;
+}
+@keyframes slideLeft { from { transform: translateX(100%); } to { transform: none; } }
+
+.panel-header {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 20px;
+}
+.panel-header h3 { font-size: 16px; font-weight: 700; }
+.panel-header button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; }
+
+.template-list { display: flex; flex-direction: column; gap: 8px; }
+.template-card {
+  padding: 14px 16px; background: var(--bg-surface);
+  border: 1px solid var(--border-primary); border-radius: 10px;
+}
+.tpl-name { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
+.tpl-meta { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); }
+.tpl-type { background: var(--bg-surface-hover); padding: 2px 8px; border-radius: 6px; text-transform: uppercase; }
+.tpl-score { color: var(--yellow-text); }
+</style>