zyflow 0.6.4

package/src/components/flow/ChangeItem.tsx

@@ -0,0 +1,230 @@
+import { ChevronRight, ChevronDown, GitBranch, GitCommit, Upload, Settings, Calendar } from 'lucide-react'
+import { Progress } from '@/components/ui/progress'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { PipelineBar } from './PipelineBar'
+import { StageContent } from './StageContent'
+import {
+  ChangeWorkflowDialog,
+  ChangeCommitDialog,
+  PushSettingsDialog,
+  type PushTiming,
+} from '@/components/git/ChangeWorkflowDialog'
+import { useState } from 'react'
+import type { FlowChange, Stage } from '@/types'
+import { STAGE_CONFIG } from '@/constants/stages'
+import { formatRelativeDate } from '@/lib/utils'
+import { useCurrentChangeBranch, useChangePush } from '@/hooks/useChangeGit'
+
+interface ChangeItemProps {
+  change: FlowChange
+  isExpanded: boolean
+  onToggle: () => void
+}
+
+export function ChangeItem({ change, isExpanded, onToggle }: ChangeItemProps) {
+  const [activeTab, setActiveTab] = useState<Stage>(change.currentStage)
+
+  // Git 워크플로우 다이얼로그 상태
+  const [showStartDialog, setShowStartDialog] = useState(false)
+  const [showCommitDialog, setShowCommitDialog] = useState(false)
+  const [showPushSettings, setShowPushSettings] = useState(false)
+  const [pushTiming, setPushTiming] = useState<PushTiming>('manual')
+
+  // Git 상태 조회
+  const { data: currentBranch } = useCurrentChangeBranch()
+  const changePush = useChangePush()
+
+  // 현재 Change 브랜치에 있는지 확인
+  const isOnChangeBranch = currentBranch?.isChangeBranch && currentBranch?.changeId === change.id
+  const branchName = `change/${change.id}`
+
+  // 푸시 핸들러
+  const handlePush = async () => {
+    try {
+      await changePush.mutateAsync({ changeId: change.id })
+    } catch (error) {
+      console.error('Push failed:', error)
+    }
+  }
+
+  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" />
+          )}
+
+          {/* Title */}
+          <span className="font-medium truncate flex-1">{change.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(change.createdAt)}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              생성일: {change.createdAt ? new Date(change.createdAt).toLocaleString('ko-KR') : '-'}
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Current Stage Badge */}
+          <Badge variant="outline" className="shrink-0 flex items-center gap-1">
+            {(() => {
+              const IconComponent = STAGE_CONFIG[change.currentStage].icon
+              return <IconComponent className="h-3 w-3" />
+            })()}
+            {STAGE_CONFIG[change.currentStage].label}
+          </Badge>
+
+          {/* Progress */}
+          <div className="w-24 shrink-0 flex items-center gap-2">
+            <Progress value={change.progress} className="h-2" />
+            <span className="text-xs text-muted-foreground w-8">{change.progress}%</span>
+          </div>
+        </button>
+
+        {/* Git Workflow Buttons */}
+        <div className="flex items-center gap-1 pr-4">
+          {/* 브랜치 시작/전환 버튼 */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant={isOnChangeBranch ? 'secondary' : 'ghost'}
+                size="icon"
+                className="h-8 w-8"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setShowStartDialog(true)
+                }}
+              >
+                <GitBranch className={`h-4 w-4 ${isOnChangeBranch ? 'text-green-600' : ''}`} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {isOnChangeBranch ? `현재 브랜치: ${branchName}` : '브랜치 시작'}
+            </TooltipContent>
+          </Tooltip>
+
+          {/* 커밋 버튼 (브랜치에 있을 때만) */}
+          {isOnChangeBranch && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setShowCommitDialog(true)
+                  }}
+                >
+                  <GitCommit className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>커밋</TooltipContent>
+            </Tooltip>
+          )}
+
+          {/* 푸시 버튼 (브랜치에 있을 때만) */}
+          {isOnChangeBranch && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handlePush()
+                  }}
+                  disabled={changePush.isPending}
+                >
+                  <Upload className={`h-4 w-4 ${changePush.isPending ? 'animate-pulse' : ''}`} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>푸시</TooltipContent>
+            </Tooltip>
+          )}
+
+          {/* 푸시 설정 버튼 */}
+          {isOnChangeBranch && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setShowPushSettings(true)
+                  }}
+                >
+                  <Settings className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>푸시 설정</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className="border-t">
+          {/* Pipeline Bar */}
+          <div className="p-4 bg-muted/30">
+            <PipelineBar
+              stages={change.stages}
+              currentStage={change.currentStage}
+              activeTab={activeTab}
+              onTabChange={setActiveTab}
+            />
+          </div>
+
+          {/* Stage Content */}
+          <div className="p-4">
+            <StageContent
+              changeId={change.id}
+              stage={activeTab}
+              tasks={change.stages?.[activeTab]?.tasks ?? []}
+              specPath={change.specPath}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Dialogs */}
+      <ChangeWorkflowDialog
+        changeId={change.id}
+        changeTitle={change.title}
+        open={showStartDialog}
+        onOpenChange={setShowStartDialog}
+      />
+      <ChangeCommitDialog
+        changeId={change.id}
+        changeTitle={change.title}
+        open={showCommitDialog}
+        onOpenChange={setShowCommitDialog}
+      />
+      <PushSettingsDialog
+        open={showPushSettings}
+        onOpenChange={setShowPushSettings}
+        currentTiming={pushTiming}
+        onTimingChange={setPushTiming}
+      />
+    </div>
+  )
+}

package/src/components/flow/ChangeList.tsx

@@ -0,0 +1,92 @@
+import { useState, useEffect, useRef } from 'react'
+import { Loader2, FolderOpen } from 'lucide-react'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { ChangeItem } from './ChangeItem'
+import { SpecItem } from './SpecItem'
+import { useFlowItems, useSyncFlowItems } from '@/hooks/useFlowItems'
+import { isMoaiSpec } from '@/types'
+import type { FlowChange } from '@/types'
+
+export function ChangeList() {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+  const { data: items, isLoading, error, isFetched } = useFlowItems()
+  const syncMutation = useSyncFlowItems()
+  const hasAutoSynced = useRef(false)
+
+  // 최초 로드 시 데이터가 비어있으면 자동 동기화
+  useEffect(() => {
+    if (isFetched && !isLoading && items?.length === 0 && !hasAutoSynced.current) {
+      hasAutoSynced.current = true
+      syncMutation.mutate()
+    }
+  }, [isFetched, isLoading, items, syncMutation])
+
+  const handleToggle = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  if (isLoading || syncMutation.isPending) {
+    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>{syncMutation.isPending ? '동기화 중...' : '로딩 중...'}</p>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center py-12 text-destructive">
+        에러: {error.message}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Changes</h2>
+      </div>
+
+      {/* Flow Items */}
+      {!items || items.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+          <FolderOpen className="h-12 w-12 mb-4 opacity-50" />
+          <p>등록된 항목이 없습니다</p>
+          <p className="text-sm mt-1">.moai/specs 또는 openspec/changes에 항목을 추가하세요</p>
+        </div>
+      ) : (
+        <TooltipProvider>
+          <div className="space-y-2">
+            {items.map((item) => (
+              isMoaiSpec(item) ? (
+                <SpecItem
+                  key={item.id}
+                  spec={item}
+                  isExpanded={expandedIds.has(item.id)}
+                  onToggle={() => handleToggle(item.id)}
+                />
+              ) : (
+                <ChangeItem
+                  key={item.id}
+                  change={item as unknown as FlowChange}
+                  isExpanded={expandedIds.has(item.id)}
+                  onToggle={() => handleToggle(item.id)}
+                />
+              )
+            ))}
+          </div>
+        </TooltipProvider>
+      )}
+    </div>
+  )
+}

package/src/components/flow/ExecutionHistoryDialog.tsx

@@ -0,0 +1,224 @@
+import { useState } from 'react'
+import { History, Clock, CheckCircle2, XCircle, ChevronDown, ChevronRight, Terminal, Loader2 } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import { useExecutionHistory, type ExecutionLog } from '@/hooks/useExecutionHistory'
+import { cn } from '@/lib/utils'
+
+interface ExecutionHistoryDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  changeId: string
+  taskId?: string
+  taskTitle?: string
+}
+
+export function ExecutionHistoryDialog({
+  open,
+  onOpenChange,
+  changeId,
+  taskId,
+  taskTitle,
+}: ExecutionHistoryDialogProps) {
+  const { data: logs, isLoading, error } = useExecutionHistory(changeId)
+  const [expandedLog, setExpandedLog] = useState<string | null>(null)
+
+  // taskId가 있으면 해당 태스크의 로그만 필터링
+  const filteredLogs = taskId
+    ? logs?.filter(log => log.taskId === taskId)
+    : logs
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr)
+    return date.toLocaleString('ko-KR', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  const formatDuration = (start: string, end: string) => {
+    const startDate = new Date(start)
+    const endDate = new Date(end)
+    const diffMs = endDate.getTime() - startDate.getTime()
+    const diffSec = Math.floor(diffMs / 1000)
+
+    if (diffSec < 60) return `${diffSec}초`
+    const diffMin = Math.floor(diffSec / 60)
+    const remainSec = diffSec % 60
+    return `${diffMin}분 ${remainSec}초`
+  }
+
+  const renderLogOutput = (log: ExecutionLog) => {
+    if (!log.output || log.output.length === 0) {
+      return <p className="text-muted-foreground text-sm">출력 없음</p>
+    }
+
+    // 최근 20개만 표시
+    const recentOutputs = log.output.slice(-20)
+
+    return (
+      <div className="space-y-1">
+        {recentOutputs.map((item, idx) => {
+          try {
+            const parsed = JSON.parse(item)
+
+            if (parsed.type === 'assistant' && parsed.message?.content) {
+              const content = Array.isArray(parsed.message.content)
+                ? parsed.message.content
+                    .filter((c: { type: string }) => c.type === 'text')
+                    .map((c: { text: string }) => c.text)
+                    .join('\n')
+                : parsed.message.content
+
+              if (!content) return null
+
+              return (
+                <div key={idx} className="bg-muted/50 rounded p-2 text-xs leading-relaxed">
+                  {content.substring(0, 300)}
+                  {content.length > 300 && '...'}
+                </div>
+              )
+            }
+
+            if (parsed.type === 'tool_use') {
+              return (
+                <div key={idx} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <Terminal className="h-3 w-3" />
+                  <span className="font-mono">{parsed.name}</span>
+                </div>
+              )
+            }
+
+            return null
+          } catch {
+            return null
+          }
+        })}
+      </div>
+    )
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <History className="h-5 w-5" />
+            실행 기록
+          </DialogTitle>
+          <DialogDescription>
+            {taskTitle ? (
+              <span>태스크: {taskTitle}</span>
+            ) : (
+              <span>Change: {changeId}</span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <ScrollArea className="flex-1 min-h-0 h-[50vh]">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : error ? (
+            <div className="text-center py-8 text-muted-foreground">
+              기록을 불러오는데 실패했습니다
+            </div>
+          ) : !filteredLogs || filteredLogs.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              실행 기록이 없습니다
+            </div>
+          ) : (
+            <div className="space-y-2 pr-4">
+              {filteredLogs.map((log) => (
+                <Collapsible
+                  key={log.runId}
+                  open={expandedLog === log.runId}
+                  onOpenChange={(open) => setExpandedLog(open ? log.runId : null)}
+                >
+                  <div className="border rounded-lg">
+                    <CollapsibleTrigger asChild>
+                      <button className="w-full p-3 flex items-center justify-between hover:bg-muted/50 transition-colors">
+                        <div className="flex items-center gap-3">
+                          {expandedLog === log.runId ? (
+                            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                          ) : (
+                            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          )}
+
+                          {log.status === 'completed' ? (
+                            <CheckCircle2 className="h-4 w-4 text-green-500" />
+                          ) : (
+                            <XCircle className="h-4 w-4 text-red-500" />
+                          )}
+
+                          <div className="text-left">
+                            <div className="text-sm font-medium">
+                              {log.taskTitle || log.taskId}
+                            </div>
+                            <div className="text-xs text-muted-foreground flex items-center gap-2">
+                              <Clock className="h-3 w-3" />
+                              {formatDate(log.startedAt)}
+                              {log.completedAt && (
+                                <span className="text-muted-foreground">
+                                  • {formatDuration(log.startedAt, log.completedAt)}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+
+                        <Badge
+                          variant={log.status === 'completed' ? 'default' : 'destructive'}
+                          className="text-xs"
+                        >
+                          {log.status === 'completed' ? '완료' : '실패'}
+                        </Badge>
+                      </button>
+                    </CollapsibleTrigger>
+
+                    <CollapsibleContent>
+                      <div className="px-3 pb-3 pt-0 border-t">
+                        <div className="mt-3 space-y-2">
+                          <div className="text-xs text-muted-foreground">
+                            출력 ({log.output?.length || 0}개 메시지)
+                          </div>
+                          <div className={cn(
+                            "max-h-60 overflow-y-auto bg-muted/30 rounded-lg p-2"
+                          )}>
+                            {renderLogOutput(log)}
+                          </div>
+                        </div>
+                      </div>
+                    </CollapsibleContent>
+                  </div>
+                </Collapsible>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+
+        <div className="flex justify-end pt-4 border-t">
+          <Button onClick={() => onOpenChange(false)}>
+            닫기
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}