diff --git a/apps/web/app/projects/[id]/page.tsx b/apps/web/app/projects/[id]/page.tsx
index 3b0c931..58517ea 100644
--- a/apps/web/app/projects/[id]/page.tsx
+++ b/apps/web/app/projects/[id]/page.tsx
@@ -9,12 +9,17 @@ import { useOvertimeStore } from '@/stores/useOvertimeStore';
 import { useVersionPlanStore } from '@/stores/useVersionPlanStore';
 import { useDevTaskStore } from '@/stores/useDevTaskStore';
 import { useTestCaseStore } from '@/stores/useTestCaseStore';
+import { useBugStore } from '@/stores/useBugStore';
 import { getProjectDetail, VersionWithContext } from '@/lib/derive';
 import { Stage, Role, STAGES, ROLES, STAGE_INDEX, ROLE_LABEL } from '@/lib/stage';
 import { VersionStatus, VERSION_STATUS_LABEL, VERSION_STATUS_BG } from '@/lib/version-status';
-import { STATUS_PROGRESS } from '@/lib/dev-task';
+import { STATUS_PROGRESS, calcGroupProgress as calcDevTaskProgress } from '@/lib/dev-task';
 import { CapsuleStages } from '@/components/version/CapsuleStages';
 import { MemberChips } from '@/components/version/MemberChips';
+import type { VersionPlan } from '@/lib/version-plan';
+import type { DevTask } from '@/lib/dev-task';
+import type { TestCase } from '@/lib/test-case';
+import type { Bug } from '@/lib/bug';
 
 /* ─── StatCard ─── */
 function StatCard({ value, label }: { value: number | string; label: string }) {
@@ -43,20 +48,115 @@ function ProgressBar({ role, percent, daysSpent }: { role: Role; percent: number
 }
 
 /* ─── VersionCard ─── */
-function VersionCard({ version, progress, onNavigate }: { version: VersionWithContext; progress: number; onNavigate: (id: string) => void }) {
+function VersionCard({ version, progress, plans, devTasks, testCases, bugs, requirements, onNavigate }: {
+  version: VersionWithContext;
+  progress: number;
+  plans: VersionPlan[];
+  devTasks: DevTask[];
+  testCases: TestCase[];
+  bugs: Bug[];
+  requirements: { id: string; versionId?: string }[];
+  onNavigate: (id: string) => void;
+}) {
   const [expanded, setExpanded] = useState(false);
 
-  // Calculate actual elapsed days from dates instead of old progress data
-  const totalDays = useMemo(() => {
-    if (!version.startDate) return 0;
-    const start = new Date(version.startDate);
-    start.setHours(0, 0, 0, 0);
-    const end = version.status === 'released' && version.releaseDate
-      ? new Date(version.releaseDate)
-      : new Date();
-    end.setHours(0, 0, 0, 0);
-    return Math.max(0, Math.floor((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)));
-  }, [version.startDate, version.releaseDate, version.status]);
+  // 与版本详情一致：取所有阶段最早的实际开始
+  const versionData = useMemo(() => {
+    const vPlans = plans.filter((p) => p.versionId === version.id);
+    const vReqIds = new Set(requirements.filter((r) => r.versionId === version.id).map((r) => r.id));
+    const vDevTasks = devTasks.filter((t) => vReqIds.has(t.requirementId));
+    const vTCs = testCases.filter((c) => c.versionId === version.id);
+    const vBugs = bugs.filter((b) => b.versionId === version.id);
+
+    const startDates: string[] = [];
+    vPlans.forEach((p) => {
+      if (p.actualStartAt) startDates.push(p.actualStartAt);
+      else if (p.status === 'pending' && p.startTime && new Date(p.startTime) <= new Date()) startDates.push(p.startTime);
+    });
+    vDevTasks.forEach((t) => { if (t.startDate) startDates.push(t.startDate); });
+    vTCs.forEach((c) => { if (c.startedAt) startDates.push(c.startedAt); });
+
+    const earliestStart = startDates.length > 0 ? startDates.sort()[0] : version.startDate;
+
+    let totalDays = 0;
+    if (earliestStart) {
+      const start = new Date(earliestStart);
+      start.setHours(0, 0, 0, 0);
+      const end = version.status === 'released' && version.releaseDate ? new Date(version.releaseDate) : new Date();
+      end.setHours(0, 0, 0, 0);
+      totalDays = Math.max(0, Math.floor((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)));
+    }
+
+    return { vPlans, vDevTasks, vTCs, vBugs, totalDays };
+  }, [version, plans, devTasks, testCases, bugs, requirements]);
+
+  // 状态胶囊数据 — 与版本详情一致
+  const stageProgress = useMemo(() => {
+    const { vPlans, vDevTasks, vTCs, vBugs } = versionData;
+    const sp: any = {};
+
+    const calcGroupProgress = (group: VersionPlan[], type: 'research' | 'product' | 'ui') => {
+      if (group.length === 0) return 0;
+      let totalItems = 0;
+      let doneItems = 0;
+      for (const p of group) {
+        if (type === 'research') {
+          const tasks = p.tasks || [];
+          const count = Math.max(tasks.length, 1);
+          totalItems += count;
+          if (p.status === 'completed') doneItems += count;
+          else doneItems += tasks.filter((t) => t.status === 'completed').length;
+        } else {
+          const linked = p.linkedRequirementIds || [];
+          const count = Math.max(linked.length, 1);
+          totalItems += count;
+          if (p.status === 'completed') doneItems += count;
+          else {
+            const completed = p.completedRequirementIds || [];
+            doneItems += completed.filter((id) => linked.includes(id)).length;
+          }
+        }
+      }
+      return totalItems > 0 ? Math.round((doneItems / totalItems) * 100) : 0;
+    };
+
+    const getPlanStatus = (group: VersionPlan[]): 'idle' | 'active' | 'done' => {
+      if (group.length === 0) return 'idle';
+      if (group.every((p) => p.status === 'completed')) return 'done';
+      if (group.some((p) => p.status === 'in_progress')) return 'active';
+      return 'idle';
+    };
+
+    const research = vPlans.filter((p) => p.type === 'research');
+    const product = vPlans.filter((p) => p.type === 'product');
+    const ui = vPlans.filter((p) => p.type === 'ui');
+    if (research.length > 0) sp['requirement'] = { percent: calcGroupProgress(research, 'research'), status: getPlanStatus(research) };
+    if (product.length > 0) sp['product_design'] = { percent: calcGroupProgress(product, 'product'), status: getPlanStatus(product) };
+    if (ui.length > 0) sp['ui_design'] = { percent: calcGroupProgress(ui, 'ui'), status: getPlanStatus(ui) };
+
+    if (vDevTasks.length > 0) {
+      const devProgress = calcDevTaskProgress(vDevTasks);
+      const allSubmitted = vDevTasks.every((t) => t.status === 'submitted');
+      const hasActive = vDevTasks.some((t) => t.status === 'in_progress' || t.status === 'testing');
+      sp['dev'] = { percent: devProgress, status: allSubmitted ? 'done' : hasActive ? 'active' : 'idle' };
+    }
+    if (vTCs.length > 0) {
+      const executed = vTCs.filter((c) => c.status === 'passed' || c.status === 'failed' || c.status === 'blocked').length;
+      const tp = Math.round((executed / vTCs.length) * 100);
+      const allPassed = vTCs.every((c) => c.status === 'passed');
+      const hasRunning = vTCs.some((c) => c.status === 'running');
+      sp['testing'] = { percent: tp, status: allPassed ? 'done' : (hasRunning || executed > 0) ? 'active' : 'idle' };
+    }
+    if (vBugs.length > 0) {
+      const closedBugs = vBugs.filter((b) => b.status === 'closed' || b.status === 'rejected').length;
+      const bp = Math.round((closedBugs / vBugs.length) * 100);
+      const allClosed = vBugs.every((b) => b.status === 'closed' || b.status === 'rejected');
+      sp['bug'] = { percent: bp, status: allClosed ? 'done' : closedBugs > 0 || vBugs.length > 0 ? 'active' : 'idle' };
+    }
+    return sp;
+  }, [versionData]);
+
+  const totalDays = versionData.totalDays;
 
   const displayStatus = VERSION_STATUS_LABEL[version.status] ?? '开发中';
   const displayBg = VERSION_STATUS_BG[version.status] ?? 'bg-blue-500/10 text-blue-600';
@@ -92,7 +192,7 @@ function VersionCard({ version, progress, onNavigate }: { version: VersionWithCo
         </button>
         {expanded && (
           <div className="px-4 pb-4 pt-2 border-t border-[var(--line-soft)] space-y-3">
-            <CapsuleStages />
+            <CapsuleStages stageProgress={stageProgress} />
             <MemberChips members={version.members ?? []} />
           </div>
         )}
@@ -199,6 +299,7 @@ export default function ProjectDetailPage() {
   const { plans, fetchPlans } = useVersionPlanStore();
   const { tasks: devTasks, fetchTasks: fetchDevTasks } = useDevTaskStore();
   const { testCases, fetchTestCases } = useTestCaseStore();
+  const { bugs, fetchBugs } = useBugStore();
   const [statusFilter, setStatusFilter] = useState<string>('all');
 
   useEffect(() => { fetchOverview(); }, [fetchOverview]);
@@ -296,22 +397,14 @@ export default function ProjectDetailPage() {
   }, [project, plans, requirements, devTasks, testCases]);
 
   const stats = useMemo(() => {
-    if (!project) return { total: 0, developing: 0, released: 0, totalDays: 0, reqCount: 0, overtimeHours: 0 };
+    if (!project) return { total: 0, released: 0, reqCount: 0, bugCount: 0 };
     const total = project.versions.length;
-    const developing = project.versions.filter((v) => v.status === 'developing').length;
     const released = project.versions.filter((v) => v.status === 'released').length;
-    const totalDays = project.versions.reduce((sum, v) => {
-      if (!v.startDate) return sum;
-      const start = new Date(v.startDate);
-      start.setHours(0, 0, 0, 0);
-      const end = v.status === 'released' && v.releaseDate ? new Date(v.releaseDate) : new Date();
-      end.setHours(0, 0, 0, 0);
-      return sum + Math.max(0, Math.floor((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)));
-    }, 0);
     const reqCount = requirements.filter((r) => r.projectId === projectId).length;
-    const overtimeHours = Math.round(records.filter((r) => r.projectId === projectId).reduce((sum, r) => sum + r.duration, 0) * 10) / 10;
-    return { total, developing, released, totalDays, reqCount, overtimeHours };
-  }, [project, requirements, records, projectId]);
+    const versionIds = new Set(project.versions.map((v) => v.id));
+    const bugCount = bugs.filter((b) => versionIds.has(b.versionId)).length;
+    return { total, released, reqCount, bugCount };
+  }, [project, requirements, bugs, projectId]);
 
   const teamByRole = useMemo(() => {
     if (!project) return {} as Record<string, Record<string, number>>;
@@ -352,13 +445,11 @@ export default function ProjectDetailPage() {
 
       <div className="flex-1 overflow-y-auto p-5 bg-[var(--bg)]">
         <div className="space-y-5">
-          <div className="grid grid-cols-6 gap-4">
+          <div className="grid grid-cols-4 gap-4">
             <StatCard value={stats.total} label="总版本数" />
-            <StatCard value={stats.developing} label="进行中" />
-            <StatCard value={stats.released} label="已发布" />
-            <StatCard value={stats.totalDays} label="总耗时(天)" />
+            <StatCard value={stats.released} label="已开发" />
             <StatCard value={stats.reqCount} label="需求数" />
-            <StatCard value={stats.overtimeHours} label="加班(h)" />
+            <StatCard value={stats.bugCount} label="Bug 总数" />
           </div>
 
           <TeamSection teamByRole={teamByRole} />
@@ -385,7 +476,7 @@ export default function ProjectDetailPage() {
               {sortedVersions.length === 0 ? (
                 <div className="rounded-xl border border-dashed border-[var(--line)] p-6 text-center text-xs text-[var(--ink-muted)]">暂无版本</div>
               ) : (
-                sortedVersions.map((v) => <VersionCard key={v.id} version={v} progress={versionProgressMap[v.id] ?? 0} onNavigate={(id) => router.push(`/versions/${id}`)} />)
+                sortedVersions.map((v) => <VersionCard key={v.id} version={v} progress={versionProgressMap[v.id] ?? 0} plans={plans} devTasks={devTasks} testCases={testCases} bugs={bugs} requirements={requirements} onNavigate={(id) => router.push(`/versions/${id}`)} />)
               )}
             </div>
           </section>