zyflow 0.6.4

package/src/components/flow/FlowContent.tsx

@@ -0,0 +1,212 @@
+import { lazy, Suspense } from 'react'
+import { FolderOpen, Loader2 } from 'lucide-react'
+import type { SelectedItem } from '@/types'
+import { ProjectDashboard } from './ProjectDashboard'
+import { ChangeDetail } from './ChangeDetail'
+import { SpecDetail } from './SpecDetail'
+import { StandaloneTasks } from './StandaloneTasks'
+import { SettingsPage } from '@/components/settings'
+import { ProjectSettings } from '@/components/settings/ProjectSettings'
+import { useProjectsAllData } from '@/hooks/useProjects'
+import { useSelectedData } from '@/hooks/useFlowChanges'
+
+// Lazy load heavy components to reduce initial bundle size
+const AgentPage = lazy(() => import('@/components/agent').then(m => ({ default: m.AgentPage })))
+const ArchivedChangesPage = lazy(() => import('@/components/dashboard/ArchivedChangesPage').then(m => ({ default: m.ArchivedChangesPage })))
+const DocsViewer = lazy(() => import('@/components/docs').then(m => ({ default: m.DocsViewer })))
+const AlertCenter = lazy(() => import('@/components/alerts').then(m => ({ default: m.AlertCenter })))
+const BacklogView = lazy(() => import('./BacklogView').then(m => ({ default: m.BacklogView })))
+
+// Loading fallback for lazy components
+function LazyLoader() {
+  return (
+    <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
+      <Loader2 className="h-8 w-8 mb-4 animate-spin opacity-50" />
+      <p>로딩 중...</p>
+    </div>
+  )
+}
+
+interface FlowContentProps {
+  selectedItem: SelectedItem
+  onSelectItem?: (item: SelectedItem) => void
+}
+
+export function FlowContent({ selectedItem, onSelectItem }: FlowContentProps) {
+  const { data: projectsData, isLoading } = useProjectsAllData()
+  // 선택된 항목에 따라 관련 데이터 미리 가져오기 (성능 최적화)
+  useSelectedData(selectedItem)
+
+  if (!selectedItem) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
+        <FolderOpen className="h-12 w-12 mb-4 opacity-50" />
+        <p className="text-lg">프로젝트를 선택하세요</p>
+        <p className="text-sm mt-1">
+          왼쪽 사이드바에서 프로젝트 또는 Change를 선택하세요
+        </p>
+      </div>
+    )
+  }
+
+  // 프로젝트 데이터 로딩 중이면 로딩 표시
+  if (isLoading) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
+        <Loader2 className="h-8 w-8 mb-4 animate-spin opacity-50" />
+        <p>로딩 중...</p>
+      </div>
+    )
+  }
+
+  // Settings 페이지는 프로젝트 선택 없이 표시
+  if (selectedItem.type === 'settings') {
+    return <SettingsPage />
+  }
+
+  // 프로젝트 ID 해결: URL에서 이름으로 접근한 경우 실제 ID로 변환
+  if ('projectId' in selectedItem && projectsData?.projects) {
+    const urlProjectId = selectedItem.projectId
+
+    // 1. ID로 프로젝트 찾기
+    let foundProject = projectsData.projects.find((p) => p.id === urlProjectId)
+
+    // 2. ID로 못 찾으면 이름으로 찾기 (URL에 이름이 들어온 경우)
+    if (!foundProject) {
+      foundProject = projectsData.projects.find((p) => p.name === urlProjectId)
+
+      // 이름으로 찾았으면 올바른 ID로 리다이렉트
+      if (foundProject && onSelectItem) {
+        const correctedItem = { ...selectedItem, projectId: foundProject.id }
+        // 비동기로 실행하여 렌더 중 상태 변경 방지
+        setTimeout(() => onSelectItem(correctedItem as typeof selectedItem), 0)
+        return (
+          <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
+            <Loader2 className="h-8 w-8 mb-4 animate-spin opacity-50" />
+            <p>리다이렉트 중...</p>
+          </div>
+        )
+      }
+    }
+
+    // 3. 프로젝트를 전혀 찾지 못한 경우 에러 표시
+    if (!foundProject) {
+      return (
+        <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
+          <FolderOpen className="h-12 w-12 mb-4 opacity-50" />
+          <p className="text-lg">프로젝트를 찾을 수 없습니다</p>
+          <p className="text-sm mt-1">
+            &apos;{urlProjectId}&apos; 프로젝트가 등록되지 않았습니다
+          </p>
+          <p className="text-xs mt-2 text-muted-foreground/60">
+            사이드바에서 프로젝트를 선택하거나 추가하세요
+          </p>
+        </div>
+      )
+    }
+  }
+
+  // 선택된 프로젝트가 활성 프로젝트와 다르면 렌더링하지 않음 (404 방지)
+  // 프로젝트 전환 중일 때 이전 프로젝트의 Change를 요청하지 않도록 함
+  if ('projectId' in selectedItem && selectedItem.projectId !== projectsData?.activeProjectId) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
+        <Loader2 className="h-8 w-8 mb-4 animate-spin opacity-50" />
+        <p>프로젝트 전환 중...</p>
+      </div>
+    )
+  }
+
+  // 프로젝트 찾기 (project-settings에서 사용)
+  const selectedProject = projectsData?.projects.find(
+    (p) => 'projectId' in selectedItem && p.id === selectedItem.projectId
+  )
+
+  switch (selectedItem.type) {
+    case 'project':
+      return <ProjectDashboard projectId={selectedItem.projectId} />
+    case 'change':
+      return (
+        <ChangeDetail
+          projectId={selectedItem.projectId}
+          changeId={selectedItem.changeId}
+          onArchived={() => {
+            // 아카이브 후 프로젝트 대시보드로 이동
+            onSelectItem?.({ type: 'project', projectId: selectedItem.projectId })
+          }}
+        />
+      )
+    case 'spec':
+      return (
+        <SpecDetail
+          projectId={selectedItem.projectId}
+          specId={selectedItem.specId}
+        />
+      )
+    case 'standalone-tasks':
+      return <StandaloneTasks projectId={selectedItem.projectId} />
+    case 'project-settings':
+      if (!selectedProject) {
+        return (
+          <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
+            <p>프로젝트를 찾을 수 없습니다</p>
+          </div>
+        )
+      }
+      return <ProjectSettings project={selectedProject} />
+    case 'agent':
+      return (
+        <Suspense fallback={<LazyLoader />}>
+          <AgentPage
+            projectId={selectedItem.projectId}
+            changeId={selectedItem.changeId}
+            projectPath={selectedProject?.path}
+          />
+        </Suspense>
+      )
+    case 'archived':
+      return (
+        <Suspense fallback={<LazyLoader />}>
+          <ArchivedChangesPage
+            projectId={selectedItem.projectId}
+            initialArchivedChangeId={selectedItem.archivedChangeId}
+          />
+        </Suspense>
+      )
+    case 'docs':
+      if (!selectedProject?.path) {
+        return (
+          <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
+            <p>프로젝트 경로를 찾을 수 없습니다</p>
+          </div>
+        )
+      }
+      return (
+        <Suspense fallback={<LazyLoader />}>
+          <DocsViewer
+            projectPath={selectedProject.path}
+            remote={selectedProject.remote}
+            initialDocPath={selectedItem.docPath}
+            onClose={() => {
+              // 문서 뷰어를 닫고 프로젝트 대시보드로 이동
+              onSelectItem?.({ type: 'project', projectId: selectedItem.projectId })
+            }}
+          />
+        </Suspense>
+      )
+    case 'alerts':
+      return (
+        <Suspense fallback={<LazyLoader />}>
+          <AlertCenter projectId={selectedItem.projectId} />
+        </Suspense>
+      )
+    case 'backlog':
+      return (
+        <Suspense fallback={<LazyLoader />}>
+          <BacklogView projectId={selectedItem.projectId} />
+        </Suspense>
+      )
+    default:
+      return null
+  }
+}

package/src/components/flow/FlowPage.tsx

@@ -0,0 +1,9 @@
+import { ChangeList } from './ChangeList'
+
+export function FlowPage() {
+  return (
+    <div className="w-full max-w-4xl mx-auto">
+      <ChangeList />
+    </div>
+  )
+}

package/src/components/flow/PipelineBar.tsx

@@ -0,0 +1,214 @@
+import { cn } from '@/lib/utils'
+import type { Stage, StageInfo } from '@/types'
+import { STAGES, STAGE_CONFIG } from '@/constants/stages'
+import { Check, Loader2 } from 'lucide-react'
+
+interface PipelineBarProps {
+  stages?: Record<Stage, StageInfo>
+  currentStage: Stage
+  activeTab: Stage
+  onTabChange: (stage: Stage) => void
+}
+
+function getStageStatus(stageInfo?: StageInfo): 'completed' | 'in-progress' | 'pending' {
+  if (!stageInfo || stageInfo.total === 0) return 'pending'
+  if (stageInfo.completed === stageInfo.total) return 'completed'
+  if (stageInfo.completed > 0) return 'in-progress'
+  return 'pending'
+}
+
+// Stage gradient colors for visual distinction
+const STAGE_GRADIENTS: Record<Stage, { bg: string; active: string; border: string }> = {
+  spec: {
+    bg: 'from-violet-500/10 to-purple-500/10',
+    active: 'from-violet-500 to-purple-600',
+    border: 'border-violet-400/50'
+  },
+  changes: {
+    bg: 'from-indigo-500/10 to-blue-500/10',
+    active: 'from-indigo-500 to-blue-600',
+    border: 'border-indigo-400/50'
+  },
+  task: {
+    bg: 'from-sky-500/10 to-cyan-500/10',
+    active: 'from-sky-500 to-cyan-600',
+    border: 'border-sky-400/50'
+  },
+  code: {
+    bg: 'from-emerald-500/10 to-green-500/10',
+    active: 'from-emerald-500 to-green-600',
+    border: 'border-emerald-400/50'
+  },
+  test: {
+    bg: 'from-amber-500/10 to-orange-500/10',
+    active: 'from-amber-500 to-orange-600',
+    border: 'border-amber-400/50'
+  },
+  commit: {
+    bg: 'from-teal-500/10 to-cyan-500/10',
+    active: 'from-teal-500 to-cyan-600',
+    border: 'border-teal-400/50'
+  },
+  docs: {
+    bg: 'from-slate-500/10 to-gray-500/10',
+    active: 'from-slate-500 to-gray-600',
+    border: 'border-slate-400/50'
+  }
+}
+
+export function PipelineBar({ stages, currentStage, activeTab, onTabChange }: PipelineBarProps) {
+  return (
+    <div className="w-full">
+      {/* Pipeline Container */}
+      <div className="relative bg-gradient-to-r from-muted/30 via-muted/50 to-muted/30 rounded-2xl p-1.5 shadow-inner">
+        {/* Progress Line (background) */}
+        <div className="absolute top-1/2 left-4 right-4 h-0.5 bg-border/50 -translate-y-1/2 rounded-full" />
+
+        {/* Stages Grid */}
+        <div
+          className="relative grid grid-cols-7 gap-1"
+          role="tablist"
+          aria-label="Development pipeline stages"
+        >
+          {STAGES.map((stage, index) => {
+            const stageInfo = stages?.[stage]
+            const status = getStageStatus(stageInfo)
+            const isActive = activeTab === stage
+            const isCurrent = currentStage === stage
+            const gradient = STAGE_GRADIENTS[stage]
+            const progress = stageInfo ? (stageInfo.total > 0 ? (stageInfo.completed / stageInfo.total) * 100 : 0) : 0
+            const IconComponent = STAGE_CONFIG[stage].icon
+
+            return (
+              <button
+                key={stage}
+                onClick={() => onTabChange(stage)}
+                className={cn(
+                  'relative flex flex-col items-center gap-2 py-3 px-1 rounded-xl transition-all duration-300',
+                  'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+                  'group',
+                  isActive && 'bg-background shadow-lg scale-[1.02] z-10',
+                  !isActive && 'hover:bg-background/60 hover:shadow-md'
+                )}
+                role="tab"
+                aria-selected={isActive}
+                tabIndex={isActive ? 0 : -1}
+              >
+                {/* Current Stage Indicator */}
+                {isCurrent && (
+                  <div className="absolute -top-0.5 left-1/2 -translate-x-1/2 flex items-center gap-1">
+                    <span className="relative flex h-2 w-2">
+                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+                      <span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
+                    </span>
+                  </div>
+                )}
+
+                {/* Icon Circle with Progress Ring */}
+                <div className="relative">
+                  {/* Progress Ring */}
+                  <svg className="w-11 h-11 -rotate-90" viewBox="0 0 36 36">
+                    {/* Background circle */}
+                    <circle
+                      cx="18"
+                      cy="18"
+                      r="15"
+                      fill="none"
+                      className="stroke-muted"
+                      strokeWidth="2.5"
+                    />
+                    {/* Progress circle */}
+                    <circle
+                      cx="18"
+                      cy="18"
+                      r="15"
+                      fill="none"
+                      className={cn(
+                        'transition-all duration-500',
+                        status === 'completed' ? 'stroke-green-500' :
+                        status === 'in-progress' ? 'stroke-blue-500' :
+                        'stroke-transparent'
+                      )}
+                      strokeWidth="2.5"
+                      strokeLinecap="round"
+                      strokeDasharray={`${progress * 0.94} 100`}
+                    />
+                  </svg>
+
+                  {/* Icon Container */}
+                  <div
+                    className={cn(
+                      'absolute inset-1.5 rounded-full flex items-center justify-center transition-all duration-300',
+                      status === 'completed' && `bg-gradient-to-br ${gradient.active} text-white shadow-md`,
+                      status === 'in-progress' && `bg-gradient-to-br ${gradient.bg} ${gradient.border} border-2`,
+                      status === 'pending' && 'bg-muted/80 text-muted-foreground',
+                      isActive && status === 'pending' && `bg-gradient-to-br ${gradient.bg}`,
+                      'group-hover:scale-110 group-hover:shadow-md'
+                    )}
+                  >
+                    {status === 'completed' ? (
+                      <Check className="h-4 w-4" strokeWidth={3} />
+                    ) : status === 'in-progress' ? (
+                      <span className="relative">
+                        <IconComponent className="h-4 w-4" />
+                        <Loader2 className="absolute -bottom-0.5 -right-0.5 h-3 w-3 animate-spin text-blue-500" />
+                      </span>
+                    ) : (
+                      <IconComponent className="h-4 w-4" />
+                    )}
+                  </div>
+                </div>
+
+                {/* Label */}
+                <span
+                  className={cn(
+                    'text-[11px] font-semibold tracking-tight transition-colors',
+                    isActive ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground'
+                  )}
+                >
+                  {STAGE_CONFIG[stage].label}
+                </span>
+
+                {/* Progress Count Badge */}
+                {stageInfo && stageInfo.total > 0 && (
+                  <div
+                    className={cn(
+                      'absolute -bottom-1 left-1/2 -translate-x-1/2',
+                      'px-1.5 py-0.5 rounded-full text-[9px] font-bold',
+                      'transition-all duration-300',
+                      status === 'completed' && 'bg-green-500 text-white',
+                      status === 'in-progress' && 'bg-blue-500 text-white',
+                      status === 'pending' && 'bg-muted text-muted-foreground'
+                    )}
+                  >
+                    {stageInfo.completed}/{stageInfo.total}
+                  </div>
+                )}
+
+                {/* Active Indicator */}
+                {isActive && (
+                  <div
+                    className={cn(
+                      'absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-6 h-1 rounded-full',
+                      `bg-gradient-to-r ${gradient.active}`
+                    )}
+                  />
+                )}
+
+                {/* Connector Line */}
+                {index < STAGES.length - 1 && (
+                  <div
+                    className={cn(
+                      'absolute top-1/2 -right-1 w-2 h-0.5 -translate-y-1/2 rounded-full transition-colors',
+                      status === 'completed' ? 'bg-green-400' : 'bg-border'
+                    )}
+                  />
+                )}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/flow/ProjectDashboard.tsx

@@ -0,0 +1,222 @@
+import { Loader2, GitBranch, CheckCircle2, BarChart3, Link2, GitFork } from 'lucide-react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Progress } from '@/components/ui/progress'
+import { Badge } from '@/components/ui/badge'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { useFlowChanges } from '@/hooks/useFlowChanges'
+import { useProjectsAllData } from '@/hooks/useProjects'
+import { useHideCompletedSpecs } from '@/hooks/useHideCompletedSpecs'
+import { ProjectIntegrations } from '@/components/integrations'
+import { ProjectDiagramTab } from '@/components/diagram/ProjectDiagramTab'
+
+interface ProjectDashboardProps {
+  projectId: string
+}
+
+export function ProjectDashboard({ projectId }: ProjectDashboardProps) {
+  const { data: projectsData } = useProjectsAllData()
+  const { isLoading } = useFlowChanges()
+  const { hideCompleted, setHideCompleted } = useHideCompletedSpecs()
+
+  const project = projectsData?.projects.find((p) => p.id === projectId)
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+        <Loader2 className="h-8 w-8 mb-4 animate-spin opacity-50" />
+        <p>로딩 중...</p>
+      </div>
+    )
+  }
+
+  if (!project) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+        <p>프로젝트를 찾을 수 없습니다</p>
+      </div>
+    )
+  }
+
+  // Use project.changes for better type information (includes type: 'spec' | 'openspec')
+  type ChangeWithType = { id: string; title: string; progress: number; type?: string; status?: string; updatedAt?: string; currentStage?: string }
+  const allProjectChanges = (project?.changes ?? []) as ChangeWithType[]
+
+  // Filter by type for summary cards
+  const moaiSpecs = allProjectChanges.filter((c) => c.type === 'spec')
+  const openspecChanges = allProjectChanges.filter((c) => c.type === 'openspec')
+
+  // Filter for Changes list (apply hideCompleted toggle)
+  const filteredChanges = allProjectChanges.filter((c) => {
+    if (hideCompleted && c.status === 'completed') return false
+    return true
+  })
+
+  // Completed changes for summary
+  const completedChanges = allProjectChanges.filter((c) => c.status === 'completed')
+
+  // Calculate average progress from non-completed items
+  const activeItems = allProjectChanges.filter((c) => c.status !== 'completed')
+  const totalProgress = activeItems.length > 0
+    ? Math.round(activeItems.reduce((sum, c) => sum + (c.progress || 0), 0) / activeItems.length)
+    : 0
+
+  return (
+    <div className="w-full max-w-4xl mx-auto space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold">{project.name}</h1>
+        <p className="text-sm text-muted-foreground mt-1">{project.path}</p>
+      </div>
+
+      <Tabs defaultValue="overview" className="space-y-4">
+        <div className="flex items-center justify-between">
+          <TabsList>
+            <TabsTrigger value="overview" className="flex items-center gap-2">
+              <BarChart3 className="h-4 w-4" />
+              Overview
+            </TabsTrigger>
+            <TabsTrigger value="diagram" className="flex items-center gap-2">
+              <GitFork className="h-4 w-4" />
+              Diagram
+            </TabsTrigger>
+            <TabsTrigger value="integrations" className="flex items-center gap-2">
+              <Link2 className="h-4 w-4" />
+              Integrations
+            </TabsTrigger>
+          </TabsList>
+          <div className="flex items-center gap-2">
+            <Switch
+              id="hide-completed-dashboard"
+              checked={hideCompleted}
+              onCheckedChange={setHideCompleted}
+            />
+            <Label
+              htmlFor="hide-completed-dashboard"
+              className="text-sm text-muted-foreground cursor-pointer"
+            >
+              완료 숨기기
+            </Label>
+          </div>
+        </div>
+
+        <TabsContent value="overview" className="space-y-6">
+          {/* Summary Cards */}
+          <div className="grid gap-4 md:grid-cols-4">
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">MoAI SPEC</CardTitle>
+                <span className="text-purple-600 dark:text-purple-400 text-[10px] font-semibold">SPEC</span>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">
+                  {hideCompleted
+                    ? moaiSpecs.filter((s) => s.status !== 'completed').length
+                    : moaiSpecs.length}
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {hideCompleted ? '활성 MoAI SPECs' : '전체 MoAI SPECs'}
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">OpenSpec</CardTitle>
+                <span className="text-blue-600 dark:text-blue-400 text-[10px] font-semibold">OPEN</span>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{openspecChanges.length}</div>
+                <p className="text-xs text-muted-foreground">
+                  OpenSpec Changes
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">완료</CardTitle>
+                <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{completedChanges.length}</div>
+                <p className="text-xs text-muted-foreground">
+                  완료된 항목
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">평균 진행률</CardTitle>
+                <BarChart3 className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{totalProgress}%</div>
+                <Progress value={totalProgress} className="mt-2" />
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Changes List */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <GitBranch className="h-5 w-5" />
+                Changes
+              </CardTitle>
+              <CardDescription>
+                프로젝트의 모든 변경 제안 목록입니다
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {filteredChanges.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-8">
+                  {hideCompleted ? '진행중인 Change가 없습니다' : 'Change가 없습니다'}
+                </p>
+              ) : (
+                <div className="space-y-4">
+                  {filteredChanges.map((change) => (
+                    <div
+                      key={change.id}
+                      className="flex items-center justify-between p-4 rounded-lg border"
+                    >
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2">
+                          {/* Type label */}
+                          {change.type === 'spec' ? (
+                            <span className="text-purple-600 dark:text-purple-400 text-[10px] font-semibold shrink-0">SPEC</span>
+                          ) : change.type === 'openspec' ? (
+                            <span className="text-blue-600 dark:text-blue-400 text-[10px] font-semibold shrink-0">OPEN</span>
+                          ) : null}
+                          <p className="font-medium">{change.title}</p>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Badge variant="outline" className="text-xs">
+                            {change.currentStage || 'spec'}
+                          </Badge>
+                          <span className="text-xs text-muted-foreground">
+                            {change.progress}% 완료
+                          </span>
+                        </div>
+                      </div>
+                      <div className="w-24">
+                        <Progress value={change.progress} />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="diagram">
+          <ProjectDiagramTab projectId={projectId} projectPath={project.path} />
+        </TabsContent>
+
+        <TabsContent value="integrations">
+          <ProjectIntegrations projectId={projectId} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}