zyflow 0.6.4

package/src/components/flow/SpecDetail.tsx

@@ -0,0 +1,138 @@
+import { Loader2, Calendar, Clock } from 'lucide-react'
+import { useFlowChangeDetail } from '@/hooks/useFlowChanges'
+import { SpecProgressBar } from './SpecProgressBar'
+import { SpecDetailTabs } from './SpecDetailTabs'
+import { Badge } from '@/components/ui/badge'
+import { formatRelativeDate, formatDateTime } from '@/lib/utils'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import type { MoaiSpec, MoaiSpecProgress } from '@/types/flow'
+
+interface SpecDetailProps {
+  projectId: string
+  specId: string
+}
+
+export function SpecDetail({ projectId, specId }: SpecDetailProps) {
+  const { data, isLoading, error } = useFlowChangeDetail(specId, 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>SPEC 로딩 중...</p>
+      </div>
+    )
+  }
+
+  if (error || !data) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-destructive">
+        <p>SPEC을 불러올 수 없습니다</p>
+        {error && <p className="text-sm mt-1">{error.message}</p>}
+      </div>
+    )
+  }
+
+  // The API returns the change data
+  const change = data.change
+
+  // Build progress object - use plan.progress if available, fallback to change fields
+  const planProgress = (change as { plan?: { progress?: { completed?: number; total?: number; percentage?: number } } }).plan?.progress
+  const progress: MoaiSpecProgress = {
+    completed: planProgress?.completed ?? 0,
+    total: planProgress?.total ?? 0,
+    percentage: planProgress?.percentage ?? change.progress ?? 0,
+  }
+
+  // Build MoaiSpec object for SpecDetailTabs
+  const moaiSpec: MoaiSpec = {
+    type: 'spec',
+    id: change.id,
+    title: change.title,
+    status: change.status as 'active' | 'completed' | 'archived',
+    progress,
+    spec: {
+      content: (change as { spec?: { content?: string } }).spec?.content ?? '',
+      requirements: [],
+    },
+    plan: {
+      content: (change as { plan?: { content?: string } }).plan?.content ?? '',
+      tags: [],
+      progress,
+    },
+    acceptance: {
+      content: (change as { acceptance?: { content?: string } }).acceptance?.content ?? '',
+      criteria: [],
+    },
+    createdAt: change.createdAt,
+    updatedAt: change.updatedAt,
+  }
+
+  const statusColors = {
+    active: 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-200',
+    completed: 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-200',
+    archived: 'bg-gray-100 text-gray-800 dark:bg-gray-950 dark:text-gray-200',
+  }
+
+  const statusLabels = {
+    active: '진행 중',
+    completed: '완료',
+    archived: '아카이브',
+  }
+
+  return (
+    <div className="w-full max-w-4xl mx-auto space-y-6 p-6">
+      {/* Header */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <span className="bg-purple-100 text-purple-800 dark:bg-purple-950 dark:text-purple-200 px-2 py-1 rounded text-xs font-semibold">
+              SPEC
+            </span>
+            <h1 className="text-2xl font-bold">{change.title}</h1>
+          </div>
+          <Badge className={statusColors[change.status as keyof typeof statusColors]}>
+            {statusLabels[change.status as keyof typeof statusLabels] ?? change.status}
+          </Badge>
+        </div>
+
+        {/* Progress */}
+        <SpecProgressBar progress={progress} label="TAG 진행률" />
+
+        {/* Metadata */}
+        <TooltipProvider>
+          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="flex items-center gap-1 cursor-default">
+                  <Calendar className="h-3 w-3" />
+                  생성: {formatRelativeDate(change.createdAt)}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{formatDateTime(change.createdAt)}</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="flex items-center gap-1 cursor-default">
+                  <Clock className="h-3 w-3" />
+                  수정: {formatRelativeDate(change.updatedAt)}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{formatDateTime(change.updatedAt)}</TooltipContent>
+            </Tooltip>
+          </div>
+        </TooltipProvider>
+      </div>
+
+      {/* Spec Detail Tabs */}
+      <div className="border rounded-lg p-4">
+        <SpecDetailTabs spec={moaiSpec} />
+      </div>
+    </div>
+  )
+}

package/src/components/flow/SpecDetailTabs.tsx

@@ -0,0 +1,176 @@
+import { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { FileText, CheckSquare, FileCheck } from 'lucide-react'
+import type { MoaiSpec } from '@/types/flow'
+
+interface SpecDetailTabsProps {
+  spec: MoaiSpec
+}
+
+export function SpecDetailTabs({ spec }: SpecDetailTabsProps) {
+  const [activeTab, setActiveTab] = useState<'spec' | 'plan' | 'acceptance'>('spec')
+
+  return (
+    <Tabs
+      value={activeTab}
+      onValueChange={(value) => setActiveTab(value as 'spec' | 'plan' | 'acceptance')}
+      className="w-full"
+    >
+      {/* Tab List */}
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger value="spec" className="gap-2">
+          <FileText className="h-4 w-4" />
+          <span className="hidden sm:inline">Spec</span>
+        </TabsTrigger>
+        <TabsTrigger value="plan" className="gap-2">
+          <CheckSquare className="h-4 w-4" />
+          <span className="hidden sm:inline">Plan</span>
+        </TabsTrigger>
+        <TabsTrigger value="acceptance" className="gap-2">
+          <FileCheck className="h-4 w-4" />
+          <span className="hidden sm:inline">Acceptance</span>
+        </TabsTrigger>
+      </TabsList>
+
+      {/* Spec Tab */}
+      <TabsContent value="spec" className="space-y-4">
+        {spec.spec.content ? (
+          <div className="prose prose-sm dark:prose-invert max-w-none p-4 rounded-lg border bg-card">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {spec.spec.content}
+            </ReactMarkdown>
+          </div>
+        ) : (
+          <div className="p-4 rounded-lg border text-muted-foreground text-center text-sm">
+            Spec 문서가 없습니다
+          </div>
+        )}
+
+        {/* Requirements List */}
+        {spec.spec.requirements && spec.spec.requirements.length > 0 && (
+          <div className="space-y-2">
+            <h3 className="text-sm font-semibold">요구사항</h3>
+            <div className="space-y-1">
+              {spec.spec.requirements.map((req) => (
+                <div
+                  key={req.id}
+                  className="flex items-start gap-2 p-2 rounded border bg-muted/30"
+                >
+                  <span className={`
+                    px-1.5 py-0.5 rounded text-xs font-semibold shrink-0
+                    ${req.priority === 'critical' ? 'bg-red-500 text-white' : ''}
+                    ${req.priority === 'high' ? 'bg-orange-500 text-white' : ''}
+                    ${req.priority === 'medium' ? 'bg-yellow-500 text-white' : ''}
+                    ${req.priority === 'low' ? 'bg-blue-500 text-white' : ''}
+                  `}>
+                    {req.type === 'functional' ? 'F' : req.type === 'non-functional' ? 'NF' : 'C'}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium text-sm">{req.title}</p>
+                    <p className="text-xs text-muted-foreground">{req.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </TabsContent>
+
+      {/* Plan Tab */}
+      <TabsContent value="plan" className="space-y-4">
+        {spec.plan.content ? (
+          <div className="prose prose-sm dark:prose-invert max-w-none p-4 rounded-lg border bg-card">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {spec.plan.content}
+            </ReactMarkdown>
+          </div>
+        ) : (
+          <div className="p-4 rounded-lg border text-muted-foreground text-center text-sm">
+            Plan 문서가 없습니다
+          </div>
+        )}
+
+        {/* Tags/TAGs List */}
+        {spec.plan.tags && spec.plan.tags.length > 0 && (
+          <div className="space-y-2">
+            <h3 className="text-sm font-semibold">TAGs</h3>
+            <div className="flex flex-wrap gap-2">
+              {spec.plan.tags.map((tag) => (
+                <div
+                  key={tag.id}
+                  className="px-2 py-1 rounded text-xs font-medium border"
+                  style={{
+                    backgroundColor: tag.color ? `${tag.color}20` : undefined,
+                    borderColor: tag.color || undefined,
+                    color: tag.color || undefined,
+                  }}
+                >
+                  {tag.name}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Plan Progress */}
+        <div className="space-y-2 p-3 rounded-lg border bg-muted/30">
+          <p className="text-sm font-medium">Plan 진행률</p>
+          <div className="flex items-center gap-2">
+            <div className="flex-1 h-2 rounded-full overflow-hidden bg-muted/50 border border-muted">
+              <div
+                className="h-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-500"
+                style={{ width: `${spec.plan.progress.percentage}%` }}
+              />
+            </div>
+            <span className="text-sm font-semibold text-blue-600 dark:text-blue-400 w-12 text-right">
+              {spec.plan.progress.completed}/{spec.plan.progress.total}
+            </span>
+          </div>
+        </div>
+      </TabsContent>
+
+      {/* Acceptance Criteria Tab */}
+      <TabsContent value="acceptance" className="space-y-4">
+        {spec.acceptance.content ? (
+          <div className="prose prose-sm dark:prose-invert max-w-none p-4 rounded-lg border bg-card">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {spec.acceptance.content}
+            </ReactMarkdown>
+          </div>
+        ) : (
+          <div className="p-4 rounded-lg border text-muted-foreground text-center text-sm">
+            수용 기준 문서가 없습니다
+          </div>
+        )}
+
+        {/* Acceptance Criteria List */}
+        {spec.acceptance.criteria && spec.acceptance.criteria.length > 0 && (
+          <div className="space-y-2">
+            <h3 className="text-sm font-semibold">수용 기준</h3>
+            <div className="space-y-1">
+              {spec.acceptance.criteria.map((criterion) => (
+                <div
+                  key={criterion.id}
+                  className="flex items-start gap-2 p-2 rounded border bg-muted/30"
+                >
+                  <span className={`
+                    px-1.5 py-0.5 rounded text-xs font-semibold shrink-0
+                    ${criterion.priority === 'critical' ? 'bg-red-500 text-white' : ''}
+                    ${criterion.priority === 'high' ? 'bg-orange-500 text-white' : ''}
+                    ${criterion.priority === 'medium' ? 'bg-yellow-500 text-white' : ''}
+                    ${criterion.priority === 'low' ? 'bg-blue-500 text-white' : ''}
+                  `}>
+                    {criterion.priority.charAt(0).toUpperCase()}
+                  </span>
+                  <p className="text-sm flex-1">{criterion.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </TabsContent>
+    </Tabs>
+  )
+}

package/src/components/flow/SpecItem.tsx

@@ -0,0 +1,93 @@
+import { ChevronRight, ChevronDown, Calendar } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { SpecProgressBar } from './SpecProgressBar'
+import { SpecDetailTabs } from './SpecDetailTabs'
+import { formatRelativeDate } from '@/lib/utils'
+import type { MoaiSpec } from '@/types/flow'
+
+interface SpecItemProps {
+  spec: MoaiSpec
+  isExpanded: boolean
+  onToggle: () => void
+}
+
+export function SpecItem({ spec, isExpanded, onToggle }: SpecItemProps) {
+  const statusColors = {
+    active: 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-200',
+    completed: 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-200',
+    archived: 'bg-gray-100 text-gray-800 dark:bg-gray-950 dark:text-gray-200',
+  }
+
+  return (
+    <div className="border rounded-lg overflow-hidden bg-card">
+      {/* Collapsed / Header */}
+      <div className="flex items-center">
+        <button
+          className="flex-1 flex items-center gap-3 p-4 hover:bg-muted/50 transition-colors text-left"
+          onClick={onToggle}
+        >
+          {/* Toggle Icon */}
+          {isExpanded ? (
+            <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
+          )}
+
+          {/* SPEC ID Badge */}
+          <span className="bg-purple-100 text-purple-800 dark:bg-purple-950 dark:text-purple-200 px-2 py-1 rounded text-xs font-semibold shrink-0">
+            SPEC
+          </span>
+
+          {/* Title */}
+          <span className="font-medium truncate flex-1">{spec.title}</span>
+
+          {/* Created Date */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+                <Calendar className="h-3 w-3" />
+                {formatRelativeDate(spec.createdAt)}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              생성일: {spec.createdAt ? new Date(spec.createdAt).toLocaleString('ko-KR') : '-'}
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Status Badge */}
+          <Badge className={`shrink-0 ${statusColors[spec.status]}`}>
+            {spec.status === 'active' ? '진행 중' : spec.status === 'completed' ? '완료' : '보관'}
+          </Badge>
+
+          {/* Progress Indicator */}
+          <div className="w-24 shrink-0 flex items-center gap-2">
+            <span className="text-xs text-muted-foreground font-mono">
+              {spec.progress.completed}/{spec.progress.total}
+            </span>
+          </div>
+        </button>
+      </div>
+
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className="border-t space-y-4 p-4 bg-muted/10">
+          {/* Progress Bar */}
+          <SpecProgressBar progress={spec.progress} label="TAGs 진행률" />
+
+          {/* Detail Tabs */}
+          <SpecDetailTabs spec={spec} />
+
+          {/* Metadata Footer */}
+          <div className="flex items-center gap-4 text-xs text-muted-foreground pt-2 border-t">
+            <span>생성: {new Date(spec.createdAt).toLocaleDateString('ko-KR')}</span>
+            <span>수정: {new Date(spec.updatedAt).toLocaleDateString('ko-KR')}</span>
+            {spec.archivedAt && (
+              <span>보관: {new Date(spec.archivedAt).toLocaleDateString('ko-KR')}</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/flow/SpecProgressBar.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils'
+import type { MoaiSpecProgress } from '@/types/flow'
+
+interface SpecProgressBarProps {
+  progress: MoaiSpecProgress
+  label?: string
+}
+
+export function SpecProgressBar({ progress, label }: SpecProgressBarProps) {
+  const { completed, total, percentage } = progress
+  const isComplete = completed === total && total > 0
+
+  return (
+    <div className="w-full space-y-2">
+      {/* Label and Progress Text */}
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium text-muted-foreground">
+          {label || 'Progress'}
+        </span>
+        <span className={cn(
+          'text-sm font-semibold',
+          isComplete ? 'text-green-600 dark:text-green-400' : 'text-blue-600 dark:text-blue-400'
+        )}>
+          {completed}/{total}
+        </span>
+      </div>
+
+      {/* Progress Bar */}
+      <div className="w-full h-2 rounded-full overflow-hidden bg-muted/50 border border-muted">
+        <div
+          className={cn(
+            'h-full transition-all duration-500 ease-out',
+            isComplete
+              ? 'bg-gradient-to-r from-green-500 to-green-600'
+              : 'bg-gradient-to-r from-blue-500 to-blue-600'
+          )}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+
+      {/* Percentage Text */}
+      <div className="text-xs text-muted-foreground text-right">
+        {percentage.toFixed(1)}%
+      </div>
+    </div>
+  )
+}