diff --git a/public/index-v1.html b/public/index-v1.html
new file mode 100644
index 0000000..bd31d1e
--- /dev/null
+++ b/public/index-v1.html
@@ -0,0 +1,459 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>多智能体任务管理系统</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      padding: 20px;
+    }
+
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+    }
+
+    header {
+      text-align: center;
+      color: white;
+      margin-bottom: 30px;
+    }
+
+    h1 {
+      font-size: 2.5em;
+      margin-bottom: 10px;
+    }
+
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 15px;
+      margin-bottom: 30px;
+    }
+
+    .stat-card {
+      background: white;
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      text-align: center;
+    }
+
+    .stat-card h3 {
+      color: #666;
+      font-size: 0.9em;
+      margin-bottom: 10px;
+    }
+
+    .stat-card .number {
+      font-size: 2em;
+      font-weight: bold;
+      color: #667eea;
+    }
+
+    .main-content {
+      display: grid;
+      grid-template-columns: 1fr 2fr;
+      gap: 20px;
+    }
+
+    .panel {
+      background: white;
+      border-radius: 10px;
+      padding: 20px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    .panel h2 {
+      color: #333;
+      margin-bottom: 20px;
+      padding-bottom: 10px;
+      border-bottom: 2px solid #667eea;
+    }
+
+    .agent-item, .task-item {
+      padding: 15px;
+      margin-bottom: 10px;
+      border-radius: 8px;
+      background: #f8f9fa;
+      border-left: 4px solid #667eea;
+    }
+
+    .agent-item.busy {
+      border-left-color: #f39c12;
+      background: #fff9e6;
+    }
+
+    .agent-item.offline {
+      border-left-color: #95a5a6;
+      background: #ecf0f1;
+    }
+
+    .task-item.pending {
+      border-left-color: #3498db;
+    }
+
+    .task-item.in_progress {
+      border-left-color: #f39c12;
+      background: #fff9e6;
+    }
+
+    .task-item.completed {
+      border-left-color: #27ae60;
+      background: #e8f8f5;
+    }
+
+    .badge {
+      display: inline-block;
+      padding: 4px 12px;
+      border-radius: 20px;
+      font-size: 0.85em;
+      font-weight: bold;
+      margin-left: 10px;
+    }
+
+    .badge.idle {
+      background: #3498db;
+      color: white;
+    }
+
+    .badge.busy {
+      background: #f39c12;
+      color: white;
+    }
+
+    .badge.pending {
+      background: #3498db;
+      color: white;
+    }
+
+    .badge.in_progress {
+      background: #f39c12;
+      color: white;
+    }
+
+    .badge.completed {
+      background: #27ae60;
+      color: white;
+    }
+
+    .badge.high {
+      background: #e74c3c;
+      color: white;
+    }
+
+    .badge.normal {
+      background: #3498db;
+      color: white;
+    }
+
+    .badge.low {
+      background: #95a5a6;
+      color: white;
+    }
+
+    button {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 5px;
+      background: #667eea;
+      color: white;
+      font-weight: bold;
+      cursor: pointer;
+      transition: all 0.3s;
+    }
+
+    button:hover {
+      background: #764ba2;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+
+    .form-group {
+      margin-bottom: 15px;
+    }
+
+    .form-group label {
+      display: block;
+      margin-bottom: 5px;
+      color: #333;
+      font-weight: bold;
+    }
+
+    .form-group input, .form-group textarea, .form-group select {
+      width: 100%;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      font-size: 1em;
+    }
+
+    .form-group textarea {
+      resize: vertical;
+      min-height: 80px;
+    }
+
+    .task-meta {
+      font-size: 0.85em;
+      color: #666;
+      margin-top: 8px;
+    }
+
+    .empty-state {
+      text-align: center;
+      color: #999;
+      padding: 40px;
+    }
+
+    #createTaskForm {
+      margin-top: 20px;
+    }
+
+    .refresh-btn {
+      float: right;
+      padding: 5px 15px;
+      font-size: 0.9em;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>🤖 多智能体任务管理系统</h1>
+      <p>Multi-Agent Task Management System</p>
+    </header>
+
+    <div class="stats" id="stats">
+      <!-- 统计数据将动态加载 -->
+    </div>
+
+    <div class="main-content">
+      <div class="panel">
+        <h2>
+          智能体列表
+          <button class="refresh-btn" onclick="loadAgents()">刷新</button>
+        </h2>
+        <div id="agentList">
+          <div class="empty-state">加载中...</div>
+        </div>
+      </div>
+
+      <div class="panel">
+        <h2>
+          任务列表
+          <button class="refresh-btn" onclick="loadTasks()">刷新</button>
+        </h2>
+        
+        <div id="taskList">
+          <div class="empty-state">加载中...</div>
+        </div>
+
+        <form id="createTaskForm">
+          <h3 style="margin-top: 30px; margin-bottom: 15px;">创建新任务</h3>
+          <div class="form-group">
+            <label>任务标题 *</label>
+            <input type="text" id="taskTitle" required placeholder="输入任务标题">
+          </div>
+          <div class="form-group">
+            <label>任务描述</label>
+            <textarea id="taskDescription" placeholder="详细描述任务内容"></textarea>
+          </div>
+          <div class="form-group">
+            <label>优先级</label>
+            <select id="taskPriority">
+              <option value="low">低</option>
+              <option value="normal" selected>普通</option>
+              <option value="high">高</option>
+            </select>
+          </div>
+          <button type="submit">创建任务</button>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const API_BASE = '';
+
+    // 加载统计数据
+    async function loadStats() {
+      try {
+        const response = await fetch(`${API_BASE}/api/stats`);
+        const stats = await response.json();
+        
+        document.getElementById('stats').innerHTML = `
+          <div class="stat-card">
+            <h3>智能体总数</h3>
+            <div class="number">${stats.total_agents || 0}</div>
+          </div>
+          <div class="stat-card">
+            <h3>活跃智能体</h3>
+            <div class="number">${stats.active_agents || 0}</div>
+          </div>
+          <div class="stat-card">
+            <h3>待处理任务</h3>
+            <div class="number">${stats.pending_tasks || 0}</div>
+          </div>
+          <div class="stat-card">
+            <h3>进行中任务</h3>
+            <div class="number">${stats.in_progress_tasks || 0}</div>
+          </div>
+          <div class="stat-card">
+            <h3>已完成任务</h3>
+            <div class="number">${stats.completed_tasks || 0}</div>
+          </div>
+          <div class="stat-card">
+            <h3>任务总数</h3>
+            <div class="number">${stats.total_tasks || 0}</div>
+          </div>
+        `;
+      } catch (error) {
+        console.error('加载统计数据失败:', error);
+      }
+    }
+
+    // 加载智能体列表
+    async function loadAgents() {
+      try {
+        const response = await fetch(`${API_BASE}/api/agents`);
+        const agents = await response.json();
+        
+        const agentList = document.getElementById('agentList');
+        
+        if (agents.length === 0) {
+          agentList.innerHTML = '<div class="empty-state">暂无智能体注册</div>';
+          return;
+        }
+
+        agentList.innerHTML = agents.map(agent => {
+          const statusClass = agent.status === 'busy' ? 'busy' : 'idle';
+          const lastHeartbeat = new Date(agent.last_heartbeat).toLocaleString('zh-CN');
+          
+          return `
+            <div class="agent-item ${statusClass}">
+              <strong>${agent.name}</strong>
+              <span class="badge ${agent.status}">${agent.status === 'idle' ? '空闲' : '忙碌'}</span>
+              <div class="task-meta">
+                类型: ${agent.type || '通用'} | 
+                注册时间: ${new Date(agent.registered_at).toLocaleString('zh-CN')} |
+                最后心跳: ${lastHeartbeat}
+              </div>
+            </div>
+          `;
+        }).join('');
+      } catch (error) {
+        console.error('加载智能体列表失败:', error);
+        document.getElementById('agentList').innerHTML = 
+          '<div class="empty-state">加载失败</div>';
+      }
+    }
+
+    // 加载任务列表
+    async function loadTasks() {
+      try {
+        const response = await fetch(`${API_BASE}/api/tasks`);
+        const tasks = await response.json();
+        
+        const taskList = document.getElementById('taskList');
+        
+        if (tasks.length === 0) {
+          taskList.innerHTML = '<div class="empty-state">暂无任务</div>';
+          return;
+        }
+
+        taskList.innerHTML = tasks.map(task => {
+          const statusText = {
+            'pending': '待处理',
+            'in_progress': '进行中',
+            'completed': '已完成'
+          }[task.status] || task.status;
+
+          const priorityText = {
+            'low': '低',
+            'normal': '普通',
+            'high': '高'
+          }[task.priority] || task.priority;
+
+          return `
+            <div class="task-item ${task.status}">
+              <strong>${task.title}</strong>
+              <span class="badge ${task.status}">${statusText}</span>
+              <span class="badge ${task.priority}">${priorityText}</span>
+              ${task.description ? `<div style="margin-top: 8px; color: #666;">${task.description}</div>` : ''}
+              <div class="task-meta">
+                创建时间: ${new Date(task.created_at).toLocaleString('zh-CN')} |
+                ${task.assigned_to ? `执行者: ${task.assigned_to}` : '未分配'} |
+                ${task.completed_at ? `完成时间: ${new Date(task.completed_at).toLocaleString('zh-CN')}` : ''}
+              </div>
+              ${task.result ? `<div style="margin-top: 8px; padding: 8px; background: #e8f4f8; border-radius: 4px;"><strong>结果:</strong> ${task.result}</div>` : ''}
+            </div>
+          `;
+        }).join('');
+      } catch (error) {
+        console.error('加载任务列表失败:', error);
+        document.getElementById('taskList').innerHTML = 
+          '<div class="empty-state">加载失败</div>';
+      }
+    }
+
+    // 创建任务表单提交
+    document.getElementById('createTaskForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const title = document.getElementById('taskTitle').value;
+      const description = document.getElementById('taskDescription').value;
+      const priority = document.getElementById('taskPriority').value;
+
+      try {
+        const response = await fetch(`${API_BASE}/api/tasks`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            title,
+            description,
+            priority,
+            created_by: 'human'
+          })
+        });
+
+        const result = await response.json();
+        
+        if (response.ok) {
+          alert('✅ 任务创建成功！');
+          document.getElementById('createTaskForm').reset();
+          loadTasks();
+          loadStats();
+        } else {
+          alert('❌ 创建失败: ' + result.error);
+        }
+      } catch (error) {
+        alert('❌ 创建失败: ' + error.message);
+      }
+    });
+
+    // 初始加载
+    loadStats();
+    loadAgents();
+    loadTasks();
+
+    // 自动刷新（每10秒）
+    setInterval(() => {
+      loadStats();
+      loadAgents();
+      loadTasks();
+    }, 10000);
+  </script>
+</body>
+</html>
diff --git a/public/index.html b/public/index.html
index bd31d1e..ffd1277 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>多智能体任务管理系统</title>
+  <title>多智能体任务管理系统 v2.0</title>
   <style>
     * {
       margin: 0;
@@ -19,7 +19,7 @@
     }
 
     .container {
-      max-width: 1400px;
+      max-width: 1600px;
       margin: 0 auto;
     }
 
@@ -34,6 +34,51 @@
       margin-bottom: 10px;
     }
 
+    .version {
+      background: rgba(255,255,255,0.2);
+      padding: 5px 15px;
+      border-radius: 20px;
+      display: inline-block;
+      font-size: 0.9em;
+    }
+
+    .tabs {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 20px;
+      background: white;
+      padding: 10px;
+      border-radius: 10px;
+      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    }
+
+    .tab {
+      padding: 12px 24px;
+      border: none;
+      background: #f0f0f0;
+      border-radius: 8px;
+      cursor: pointer;
+      font-weight: bold;
+      transition: all 0.3s;
+    }
+
+    .tab.active {
+      background: #667eea;
+      color: white;
+    }
+
+    .tab:hover:not(.active) {
+      background: #e0e0e0;
+    }
+
+    .tab-content {
+      display: none;
+    }
+
+    .tab-content.active {
+      display: block;
+    }
+
     .stats {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -61,17 +106,12 @@
       color: #667eea;
     }
 
-    .main-content {
-      display: grid;
-      grid-template-columns: 1fr 2fr;
-      gap: 20px;
-    }
-
     .panel {
       background: white;
       border-radius: 10px;
       padding: 20px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      margin-bottom: 20px;
     }
 
     .panel h2 {
@@ -81,85 +121,37 @@
       border-bottom: 2px solid #667eea;
     }
 
-    .agent-item, .task-item {
-      padding: 15px;
-      margin-bottom: 10px;
-      border-radius: 8px;
-      background: #f8f9fa;
-      border-left: 4px solid #667eea;
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
     }
 
-    .agent-item.busy {
-      border-left-color: #f39c12;
-      background: #fff9e6;
+    .form-group {
+      margin-bottom: 15px;
     }
 
-    .agent-item.offline {
-      border-left-color: #95a5a6;
-      background: #ecf0f1;
-    }
-
-    .task-item.pending {
-      border-left-color: #3498db;
-    }
-
-    .task-item.in_progress {
-      border-left-color: #f39c12;
-      background: #fff9e6;
-    }
-
-    .task-item.completed {
-      border-left-color: #27ae60;
-      background: #e8f8f5;
-    }
-
-    .badge {
-      display: inline-block;
-      padding: 4px 12px;
-      border-radius: 20px;
-      font-size: 0.85em;
+    .form-group label {
+      display: block;
+      margin-bottom: 5px;
+      color: #333;
       font-weight: bold;
-      margin-left: 10px;
     }
 
-    .badge.idle {
-      background: #3498db;
-      color: white;
+    .form-group input,
+    .form-group textarea,
+    .form-group select {
+      width: 100%;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      font-size: 1em;
     }
 
-    .badge.busy {
-      background: #f39c12;
-      color: white;
-    }
-
-    .badge.pending {
-      background: #3498db;
-      color: white;
-    }
-
-    .badge.in_progress {
-      background: #f39c12;
-      color: white;
-    }
-
-    .badge.completed {
-      background: #27ae60;
-      color: white;
-    }
-
-    .badge.high {
-      background: #e74c3c;
-      color: white;
-    }
-
-    .badge.normal {
-      background: #3498db;
-      color: white;
-    }
-
-    .badge.low {
-      background: #95a5a6;
-      color: white;
+    .form-group textarea {
+      resize: vertical;
+      min-height: 100px;
+      font-family: 'Courier New', monospace;
     }
 
     button {
@@ -179,44 +171,126 @@
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     }
 
-    .form-group {
-      margin-bottom: 15px;
+    button.secondary {
+      background: #95a5a6;
     }
 
-    .form-group label {
-      display: block;
-      margin-bottom: 5px;
-      color: #333;
-      font-weight: bold;
+    button.secondary:hover {
+      background: #7f8c8d;
     }
 
-    .form-group input, .form-group textarea, .form-group select {
-      width: 100%;
-      padding: 10px;
-      border: 1px solid #ddd;
-      border-radius: 5px;
-      font-size: 1em;
+    button.danger {
+      background: #e74c3c;
     }
 
-    .form-group textarea {
-      resize: vertical;
-      min-height: 80px;
+    button.danger:hover {
+      background: #c0392b;
     }
 
-    .task-meta {
+    .item-card {
+      padding: 15px;
+      margin-bottom: 10px;
+      border-radius: 8px;
+      background: #f8f9fa;
+      border-left: 4px solid #667eea;
+      cursor: pointer;
+      transition: all 0.3s;
+    }
+
+    .item-card:hover {
+      transform: translateX(5px);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+
+    .item-card.selected {
+      background: #e8f4f8;
+      border-left-color: #3498db;
+    }
+
+    .badge {
+      display: inline-block;
+      padding: 4px 12px;
+      border-radius: 20px;
       font-size: 0.85em;
-      color: #666;
-      margin-top: 8px;
+      font-weight: bold;
+      margin-left: 10px;
     }
 
+    .badge.initial { background: #3498db; color: white; }
+    .badge.in_progress { background: #f39c12; color: white; }
+    .badge.testing_pending { background: #9b59b6; color: white; }
+    .badge.testing { background: #e67e22; color: white; }
+    .badge.completed { background: #27ae60; color: white; }
+    .badge.high { background: #e74c3c; color: white; }
+    .badge.normal { background: #3498db; color: white; }
+    .badge.low { background: #95a5a6; color: white; }
+    .badge.requirement { background: #9b59b6; color: white; }
+    .badge.design { background: #3498db; color: white; }
+    .badge.development { background: #2ecc71; color: white; }
+    .badge.testing { background: #e67e22; color: white; }
+    .badge.deployment { background: #e74c3c; color: white; }
+
     .empty-state {
       text-align: center;
       color: #999;
       padding: 40px;
     }
 
-    #createTaskForm {
-      margin-top: 20px;
+    .markdown-preview {
+      background: #f8f9fa;
+      padding: 15px;
+      border-radius: 5px;
+      border: 1px solid #ddd;
+      margin-top: 10px;
+    }
+
+    .markdown-preview h1 { font-size: 1.8em; margin-bottom: 10px; }
+    .markdown-preview h2 { font-size: 1.5em; margin-bottom: 8px; }
+    .markdown-preview h3 { font-size: 1.2em; margin-bottom: 5px; }
+    .markdown-preview p { margin-bottom: 10px; line-height: 1.6; }
+    .markdown-preview ul, .markdown-preview ol { margin-left: 20px; margin-bottom: 10px; }
+    .markdown-preview code { background: #e8e8e8; padding: 2px 6px; border-radius: 3px; }
+    .markdown-preview pre { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; overflow-x: auto; }
+
+    .note-item {
+      background: #fff9e6;
+      padding: 15px;
+      margin-bottom: 10px;
+      border-radius: 8px;
+      border-left: 4px solid #f39c12;
+    }
+
+    .note-meta {
+      font-size: 0.85em;
+      color: #666;
+      margin-top: 8px;
+    }
+
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0,0,0,0.5);
+      z-index: 1000;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .modal.active {
+      display: flex;
+    }
+
+    .modal-content {
+      background: white;
+      padding: 30px;
+      border-radius: 10px;
+      max-width: 600px;
+      width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
     }
 
     .refresh-btn {
@@ -224,74 +298,201 @@
       padding: 5px 15px;
       font-size: 0.9em;
     }
+
+    #rulesEditor {
+      font-family: 'Courier New', monospace;
+      min-height: 200px;
+    }
   </style>
 </head>
 <body>
   <div class="container">
     <header>
       <h1>🤖 多智能体任务管理系统</h1>
-      <p>Multi-Agent Task Management System</p>
+      <span class="version">v2.0 - 项目管理版</span>
     </header>
 
-    <div class="stats" id="stats">
-      <!-- 统计数据将动态加载 -->
+    <div class="stats" id="stats"></div>
+
+    <div class="tabs">
+      <button class="tab active" onclick="switchTab('projects')">📁 项目管理</button>
+      <button class="tab" onclick="switchTab('tasks')">📋 任务列表</button>
+      <button class="tab" onclick="switchTab('agents')">🤖 智能体</button>
+      <button class="tab" onclick="switchTab('rules')">📜 协作规约</button>
     </div>
 
-    <div class="main-content">
-      <div class="panel">
-        <h2>
-          智能体列表
-          <button class="refresh-btn" onclick="loadAgents()">刷新</button>
-        </h2>
-        <div id="agentList">
-          <div class="empty-state">加载中...</div>
+    <!-- 项目管理标签页 -->
+    <div id="tab-projects" class="tab-content active">
+      <div class="grid-2">
+        <div class="panel">
+          <h2>项目列表 <button class="refresh-btn" onclick="loadProjects()">刷新</button></h2>
+          <div id="projectList"></div>
+          <button onclick="showCreateProjectModal()" style="margin-top: 15px;">创建新项目</button>
         </div>
+
+        <div class="panel">
+          <h2>项目详情</h2>
+          <div id="projectDetail">
+            <div class="empty-state">请选择一个项目</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 任务列表标签页 -->
+    <div id="tab-tasks" class="tab-content">
+      <div class="panel">
+        <h2>任务列表 <button class="refresh-btn" onclick="loadTasks()">刷新</button></h2>
+        
+        <div style="margin-bottom: 15px;">
+          <select id="filterProject" onchange="loadTasks()" style="width: 200px; margin-right: 10px;">
+            <option value="">所有项目</option>
+          </select>
+          <select id="filterStatus" onchange="loadTasks()" style="width: 150px; margin-right: 10px;">
+            <option value="">所有状态</option>
+            <option value="initial">初始</option>
+            <option value="in_progress">进行中</option>
+            <option value="testing_pending">待测试</option>
+            <option value="testing">测试中</option>
+            <option value="completed">完成</option>
+          </select>
+        </div>
+
+        <div id="taskList"></div>
+        <button onclick="showCreateTaskModal()" style="margin-top: 15px;">创建新任务</button>
+      </div>
+    </div>
+
+    <!-- 智能体标签页 -->
+    <div id="tab-agents" class="tab-content">
+      <div class="panel">
+        <h2>智能体列表 <button class="refresh-btn" onclick="loadAgents()">刷新</button></h2>
+        <div id="agentList"></div>
+      </div>
+    </div>
+
+    <!-- 协作规约标签页 -->
+    <div id="tab-rules" class="tab-content">
+      <div class="panel">
+        <h2>全局协作规约</h2>
+        <div id="globalRulesContent"></div>
+        <button onclick="showEditGlobalRulesModal()">编辑全局规约</button>
       </div>
 
       <div class="panel">
-        <h2>
-          任务列表
-          <button class="refresh-btn" onclick="loadTasks()">刷新</button>
-        </h2>
-        
-        <div id="taskList">
-          <div class="empty-state">加载中...</div>
-        </div>
-
-        <form id="createTaskForm">
-          <h3 style="margin-top: 30px; margin-bottom: 15px;">创建新任务</h3>
-          <div class="form-group">
-            <label>任务标题 *</label>
-            <input type="text" id="taskTitle" required placeholder="输入任务标题">
-          </div>
-          <div class="form-group">
-            <label>任务描述</label>
-            <textarea id="taskDescription" placeholder="详细描述任务内容"></textarea>
-          </div>
-          <div class="form-group">
-            <label>优先级</label>
-            <select id="taskPriority">
-              <option value="low">低</option>
-              <option value="normal" selected>普通</option>
-              <option value="high">高</option>
-            </select>
-          </div>
-          <button type="submit">创建任务</button>
-        </form>
+        <h2>项目协作规约</h2>
+        <p style="color: #666; margin-bottom: 15px;">请在"项目管理"标签页中选择项目后设置项目规约</p>
       </div>
     </div>
   </div>
 
+  <!-- 创建项目模态框 -->
+  <div id="createProjectModal" class="modal">
+    <div class="modal-content">
+      <h2>创建新项目</h2>
+      <form id="createProjectForm">
+        <div class="form-group">
+          <label>项目名称 *</label>
+          <input type="text" id="projectName" required>
+        </div>
+        <div class="form-group">
+          <label>项目描述</label>
+          <textarea id="projectDesc"></textarea>
+        </div>
+        <button type="submit">创建</button>
+        <button type="button" class="secondary" onclick="closeModal('createProjectModal')">取消</button>
+      </form>
+    </div>
+  </div>
+
+  <!-- 创建任务模态框 -->
+  <div id="createTaskModal" class="modal">
+    <div class="modal-content">
+      <h2>创建新任务</h2>
+      <form id="createTaskForm">
+        <div class="form-group">
+          <label>所属项目 *</label>
+          <select id="taskProject" required></select>
+        </div>
+        <div class="form-group">
+          <label>任务标题 *</label>
+          <input type="text" id="taskTitle" required>
+        </div>
+        <div class="form-group">
+          <label>任务描述（Markdown）</label>
+          <textarea id="taskDesc"></textarea>
+        </div>
+        <div class="form-group">
+          <label>任务类型</label>
+          <select id="taskType">
+            <option value="requirement">需求</option>
+            <option value="design">设计</option>
+            <option value="development" selected>开发</option>
+            <option value="testing">测试</option>
+            <option value="deployment">部署</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>优先级</label>
+          <select id="taskPriority">
+            <option value="low">低</option>
+            <option value="normal" selected>普通</option>
+            <option value="high">高</option>
+          </select>
+        </div>
+        <button type="submit">创建</button>
+        <button type="button" class="secondary" onclick="closeModal('createTaskModal')">取消</button>
+      </form>
+    </div>
+  </div>
+
+  <!-- 编辑全局规约模态框 -->
+  <div id="editGlobalRulesModal" class="modal">
+    <div class="modal-content">
+      <h2>编辑全局协作规约</h2>
+      <form id="editGlobalRulesForm">
+        <div class="form-group">
+          <label>规约内容（Markdown）</label>
+          <textarea id="rulesEditor"></textarea>
+        </div>
+        <button type="submit">保存</button>
+        <button type="button" class="secondary" onclick="closeModal('editGlobalRulesModal')">取消</button>
+      </form>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script>
-    const API_BASE = '';
+    const API_BASE = '/api';
+    let currentProject = null;
+    let projects = [];
+
+    // 标签页切换
+    function switchTab(tabName) {
+      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
+      
+      event.target.classList.add('active');
+      document.getElementById(`tab-${tabName}`).classList.add('active');
+
+      // 加载对应数据
+      if (tabName === 'projects') loadProjects();
+      if (tabName === 'tasks') loadTasks();
+      if (tabName === 'agents') loadAgents();
+      if (tabName === 'rules') loadGlobalRules();
+    }
 
     // 加载统计数据
     async function loadStats() {
       try {
-        const response = await fetch(`${API_BASE}/api/stats`);
+        const response = await fetch(`${API_BASE}/stats`);
         const stats = await response.json();
         
         document.getElementById('stats').innerHTML = `
+          <div class="stat-card">
+            <h3>项目总数</h3>
+            <div class="number">${stats.total_projects || 0}</div>
+          </div>
           <div class="stat-card">
             <h3>智能体总数</h3>
             <div class="number">${stats.total_agents || 0}</div>
@@ -301,20 +502,16 @@
             <div class="number">${stats.active_agents || 0}</div>
           </div>
           <div class="stat-card">
-            <h3>待处理任务</h3>
-            <div class="number">${stats.pending_tasks || 0}</div>
+            <h3>任务总数</h3>
+            <div class="number">${stats.total_tasks || 0}</div>
           </div>
           <div class="stat-card">
             <h3>进行中任务</h3>
-            <div class="number">${stats.in_progress_tasks || 0}</div>
+            <div class="number">${stats.tasks_by_status.in_progress || 0}</div>
           </div>
           <div class="stat-card">
             <h3>已完成任务</h3>
-            <div class="number">${stats.completed_tasks || 0}</div>
-          </div>
-          <div class="stat-card">
-            <h3>任务总数</h3>
-            <div class="number">${stats.total_tasks || 0}</div>
+            <div class="number">${stats.tasks_by_status.completed || 0}</div>
           </div>
         `;
       } catch (error) {
@@ -322,46 +519,110 @@
       }
     }
 
-    // 加载智能体列表
-    async function loadAgents() {
+    // 加载项目列表
+    async function loadProjects() {
       try {
-        const response = await fetch(`${API_BASE}/api/agents`);
-        const agents = await response.json();
+        const response = await fetch(`${API_BASE}/projects`);
+        projects = await response.json();
         
-        const agentList = document.getElementById('agentList');
+        const projectList = document.getElementById('projectList');
         
-        if (agents.length === 0) {
-          agentList.innerHTML = '<div class="empty-state">暂无智能体注册</div>';
+        if (projects.length === 0) {
+          projectList.innerHTML = '<div class="empty-state">暂无项目</div>';
           return;
         }
 
-        agentList.innerHTML = agents.map(agent => {
-          const statusClass = agent.status === 'busy' ? 'busy' : 'idle';
-          const lastHeartbeat = new Date(agent.last_heartbeat).toLocaleString('zh-CN');
-          
-          return `
-            <div class="agent-item ${statusClass}">
-              <strong>${agent.name}</strong>
-              <span class="badge ${agent.status}">${agent.status === 'idle' ? '空闲' : '忙碌'}</span>
-              <div class="task-meta">
-                类型: ${agent.type || '通用'} | 
-                注册时间: ${new Date(agent.registered_at).toLocaleString('zh-CN')} |
-                最后心跳: ${lastHeartbeat}
-              </div>
+        projectList.innerHTML = projects.map(project => `
+          <div class="item-card ${currentProject?.id === project.id ? 'selected' : ''}" 
+               onclick="selectProject('${project.id}')">
+            <strong>${project.name}</strong>
+            <span class="badge" style="background: ${project.status === 'active' ? '#27ae60' : '#95a5a6'}">${project.status === 'active' ? '活跃' : '归档'}</span>
+            <div style="margin-top: 8px; font-size: 0.9em; color: #666;">
+              ${project.description || '无描述'}
             </div>
-          `;
-        }).join('');
+            <div style="margin-top: 5px; font-size: 0.85em; color: #999;">
+              创建时间: ${new Date(parseInt(project.created_at)).toLocaleString('zh-CN')}
+            </div>
+          </div>
+        `).join('');
+
+        // 更新任务创建表单中的项目选择
+        updateProjectSelects();
       } catch (error) {
-        console.error('加载智能体列表失败:', error);
-        document.getElementById('agentList').innerHTML = 
-          '<div class="empty-state">加载失败</div>';
+        console.error('加载项目列表失败:', error);
+      }
+    }
+
+    // 选择项目
+    async function selectProject(projectId) {
+      currentProject = projects.find(p => p.id === projectId);
+      loadProjects(); // 重新渲染高亮
+      
+      // 加载项目详情
+      const detail = document.getElementById('projectDetail');
+      detail.innerHTML = '<div style="text-align: center; padding: 20px;">加载中...</div>';
+      
+      try {
+        // 获取项目任务
+        const tasksResponse = await fetch(`${API_BASE}/tasks?project_id=${projectId}`);
+        const tasks = await tasksResponse.json();
+        
+        // 获取项目规约
+        const rulesResponse = await fetch(`${API_BASE}/projects/${projectId}/rules`);
+        const rules = await rulesResponse.json();
+        
+        // 获取项目笔记
+        const notesResponse = await fetch(`${API_BASE}/projects/${projectId}/notes`);
+        const notes = await notesResponse.json();
+        
+        detail.innerHTML = `
+          <h3>${currentProject.name}</h3>
+          <p style="color: #666; margin-bottom: 20px;">${currentProject.description || '无描述'}</p>
+          
+          <h4>📋 任务统计</h4>
+          <div style="margin-bottom: 20px;">
+            <span class="badge">总计: ${tasks.length}</span>
+            <span class="badge initial">初始: ${tasks.filter(t => t.status === 'initial').length}</span>
+            <span class="badge in_progress">进行中: ${tasks.filter(t => t.status === 'in_progress').length}</span>
+            <span class="badge completed">完成: ${tasks.filter(t => t.status === 'completed').length}</span>
+          </div>
+          
+          <h4>📜 项目规约</h4>
+          <div style="margin-bottom: 20px;">
+            ${rules ? `<div class="markdown-preview">${marked.parse(rules.content)}</div>` : '<p style="color: #999;">未设置项目规约</p>'}
+            <button onclick="editProjectRules('${projectId}')" style="margin-top: 10px;">编辑规约</button>
+          </div>
+          
+          <h4>📝 信息共享清单 (${notes.length})</h4>
+          <div id="projectNotes">
+            ${notes.length > 0 ? notes.map(note => `
+              <div class="note-item">
+                <div class="markdown-preview">${marked.parse(note.content)}</div>
+                <div class="note-meta">
+                  由 ${note.created_by} 创建于 ${new Date(parseInt(note.created_at)).toLocaleString('zh-CN')}
+                </div>
+              </div>
+            `).join('') : '<p style="color: #999;">暂无共享笔记</p>'}
+          </div>
+          <button onclick="addProjectNote('${projectId}')">添加笔记</button>
+        `;
+      } catch (error) {
+        detail.innerHTML = '<div class="empty-state">加载失败</div>';
+        console.error('加载项目详情失败:', error);
       }
     }
 
     // 加载任务列表
     async function loadTasks() {
       try {
-        const response = await fetch(`${API_BASE}/api/tasks`);
+        const projectFilter = document.getElementById('filterProject')?.value || '';
+        const statusFilter = document.getElementById('filterStatus')?.value || '';
+        
+        let url = `${API_BASE}/tasks?`;
+        if (projectFilter) url += `project_id=${projectFilter}&`;
+        if (statusFilter) url += `status=${statusFilter}&`;
+        
+        const response = await fetch(url);
         const tasks = await response.json();
         
         const taskList = document.getElementById('taskList');
@@ -373,11 +634,21 @@
 
         taskList.innerHTML = tasks.map(task => {
           const statusText = {
-            'pending': '待处理',
+            'initial': '初始',
             'in_progress': '进行中',
-            'completed': '已完成'
+            'testing_pending': '待测试',
+            'testing': '测试中',
+            'completed': '完成'
           }[task.status] || task.status;
 
+          const typeText = {
+            'requirement': '需求',
+            'design': '设计',
+            'development': '开发',
+            'testing': '测试',
+            'deployment': '部署'
+          }[task.task_type] || task.task_type;
+
           const priorityText = {
             'low': '低',
             'normal': '普通',
@@ -385,75 +656,229 @@
           }[task.priority] || task.priority;
 
           return `
-            <div class="task-item ${task.status}">
+            <div class="item-card">
               <strong>${task.title}</strong>
               <span class="badge ${task.status}">${statusText}</span>
+              <span class="badge ${task.task_type}">${typeText}</span>
               <span class="badge ${task.priority}">${priorityText}</span>
-              ${task.description ? `<div style="margin-top: 8px; color: #666;">${task.description}</div>` : ''}
-              <div class="task-meta">
-                创建时间: ${new Date(task.created_at).toLocaleString('zh-CN')} |
-                ${task.assigned_to ? `执行者: ${task.assigned_to}` : '未分配'} |
-                ${task.completed_at ? `完成时间: ${new Date(task.completed_at).toLocaleString('zh-CN')}` : ''}
+              ${task.description ? `<div class="markdown-preview" style="margin-top: 10px;">${marked.parse(task.description)}</div>` : ''}
+              <div style="margin-top: 8px; font-size: 0.85em; color: #666;">
+                创建时间: ${new Date(parseInt(task.created_at)).toLocaleString('zh-CN')} |
+                ${task.assigned_to ? `执行者: ${task.assigned_to}` : '未分配'}
               </div>
-              ${task.result ? `<div style="margin-top: 8px; padding: 8px; background: #e8f4f8; border-radius: 4px;"><strong>结果:</strong> ${task.result}</div>` : ''}
             </div>
           `;
         }).join('');
       } catch (error) {
         console.error('加载任务列表失败:', error);
-        document.getElementById('taskList').innerHTML = 
-          '<div class="empty-state">加载失败</div>';
       }
     }
 
-    // 创建任务表单提交
-    document.getElementById('createTaskForm').addEventListener('submit', async (e) => {
+    // 加载智能体列表
+    async function loadAgents() {
+      try {
+        const response = await fetch(`${API_BASE}/agents`);
+        const agents = await response.json();
+        
+        const agentList = document.getElementById('agentList');
+        
+        if (agents.length === 0) {
+          agentList.innerHTML = '<div class="empty-state">暂无智能体</div>';
+          return;
+        }
+
+        agentList.innerHTML = agents.map(agent => `
+          <div class="item-card">
+            <strong>${agent.name}</strong>
+            <span class="badge ${agent.status}">${agent.status === 'idle' ? '空闲' : '忙碌'}</span>
+            <div style="margin-top: 8px; font-size: 0.9em; color: #666;">
+              类型: ${agent.type} | 最后心跳: ${new Date(parseInt(agent.last_heartbeat)).toLocaleString('zh-CN')}
+            </div>
+          </div>
+        `).join('');
+      } catch (error) {
+        console.error('加载智能体列表失败:', error);
+      }
+    }
+
+    // 加载全局规约
+    async function loadGlobalRules() {
+      try {
+        const response = await fetch(`${API_BASE}/rules/global`);
+        const rules = await response.json();
+        
+        const content = document.getElementById('globalRulesContent');
+        
+        if (rules) {
+          content.innerHTML = `<div class="markdown-preview">${marked.parse(rules.content)}</div>`;
+        } else {
+          content.innerHTML = '<p style="color: #999;">未设置全局规约</p>';
+        }
+      } catch (error) {
+        console.error('加载全局规约失败:', error);
+      }
+    }
+
+    // 更新项目选择器
+    function updateProjectSelects() {
+      const selects = [document.getElementById('taskProject'), document.getElementById('filterProject')];
+      selects.forEach(select => {
+        if (!select) return;
+        const isFilter = select.id === 'filterProject';
+        select.innerHTML = (isFilter ? '<option value="">所有项目</option>' : '') + 
+          projects.map(p => `<option value="${p.id}">${p.name}</option>`).join('');
+      });
+    }
+
+    // 模态框控制
+    function showCreateProjectModal() {
+      document.getElementById('createProjectModal').classList.add('active');
+    }
+
+    function showCreateTaskModal() {
+      updateProjectSelects();
+      document.getElementById('createTaskModal').classList.add('active');
+    }
+
+    function showEditGlobalRulesModal() {
+      fetch(`${API_BASE}/rules/global`)
+        .then(r => r.json())
+        .then(rules => {
+          document.getElementById('rulesEditor').value = rules?.content || '';
+          document.getElementById('editGlobalRulesModal').classList.add('active');
+        });
+    }
+
+    function closeModal(modalId) {
+      document.getElementById(modalId).classList.remove('active');
+    }
+
+    function editProjectRules(projectId) {
+      fetch(`${API_BASE}/projects/${projectId}/rules`)
+        .then(r => r.json())
+        .then(rules => {
+          const content = prompt('编辑项目规约（Markdown）:', rules?.content || '');
+          if (content !== null) {
+            fetch(`${API_BASE}/projects/${projectId}/rules`, {
+              method: 'POST',
+              headers: {'Content-Type': 'application/json'},
+              body: JSON.stringify({content, created_by: 'human'})
+            }).then(() => {
+              alert('规约已更新');
+              selectProject(projectId);
+            });
+          }
+        });
+    }
+
+    function addProjectNote(projectId) {
+      const content = prompt('添加共享笔记（Markdown）:');
+      if (content) {
+        fetch(`${API_BASE}/projects/${projectId}/notes`, {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({content, created_by: 'human'})
+        }).then(() => {
+          alert('笔记已添加');
+          selectProject(projectId);
+        });
+      }
+    }
+
+    // 表单提交
+    document.getElementById('createProjectForm').addEventListener('submit', async (e) => {
       e.preventDefault();
       
-      const title = document.getElementById('taskTitle').value;
-      const description = document.getElementById('taskDescription').value;
-      const priority = document.getElementById('taskPriority').value;
+      const data = {
+        name: document.getElementById('projectName').value,
+        description: document.getElementById('projectDesc').value,
+        created_by: 'human'
+      };
 
       try {
-        const response = await fetch(`${API_BASE}/api/tasks`, {
+        const response = await fetch(`${API_BASE}/projects`, {
           method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({
-            title,
-            description,
-            priority,
-            created_by: 'human'
-          })
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify(data)
         });
 
-        const result = await response.json();
-        
         if (response.ok) {
-          alert('✅ 任务创建成功！');
-          document.getElementById('createTaskForm').reset();
-          loadTasks();
+          alert('✅ 项目创建成功！');
+          closeModal('createProjectModal');
+          document.getElementById('createProjectForm').reset();
+          loadProjects();
           loadStats();
-        } else {
-          alert('❌ 创建失败: ' + result.error);
         }
       } catch (error) {
         alert('❌ 创建失败: ' + error.message);
       }
     });
 
+    document.getElementById('createTaskForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const data = {
+        project_id: document.getElementById('taskProject').value,
+        title: document.getElementById('taskTitle').value,
+        description: document.getElementById('taskDesc').value,
+        task_type: document.getElementById('taskType').value,
+        priority: document.getElementById('taskPriority').value,
+        created_by: 'human'
+      };
+
+      try {
+        const response = await fetch(`${API_BASE}/tasks`, {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify(data)
+        });
+
+        if (response.ok) {
+          alert('✅ 任务创建成功！');
+          closeModal('createTaskModal');
+          document.getElementById('createTaskForm').reset();
+          loadTasks();
+          loadStats();
+        }
+      } catch (error) {
+        alert('❌ 创建失败: ' + error.message);
+      }
+    });
+
+    document.getElementById('editGlobalRulesForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const content = document.getElementById('rulesEditor').value;
+
+      try {
+        const response = await fetch(`${API_BASE}/rules/global`, {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({content, created_by: 'human'})
+        });
+
+        if (response.ok) {
+          alert('✅ 全局规约已更新！');
+          closeModal('editGlobalRulesModal');
+          loadGlobalRules();
+        }
+      } catch (error) {
+        alert('❌ 更新失败: ' + error.message);
+      }
+    });
+
     // 初始加载
     loadStats();
-    loadAgents();
-    loadTasks();
+    loadProjects();
 
-    // 自动刷新（每10秒）
+    // 自动刷新（每30秒）
     setInterval(() => {
       loadStats();
-      loadAgents();
-      loadTasks();
-    }, 10000);
+      const activeTab = document.querySelector('.tab.active').textContent;
+      if (activeTab.includes('项目')) loadProjects();
+      if (activeTab.includes('任务')) loadTasks();
+      if (activeTab.includes('智能体')) loadAgents();
+    }, 30000);
   </script>
 </body>
 </html>
