zyflow 0.6.4

package/src/components/git/GitCommitDialog.tsx

@@ -0,0 +1,254 @@
+/**
+ * Git Commit 다이얼로그 컴포넌트
+ */
+
+import { useState, useEffect } from 'react'
+import { Check, Loader2, FileText, FilePlus, FileX } from 'lucide-react'
+import { useGitStatus, useGitCommit, useGitAdd } from '@/hooks/useGit'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Textarea } from '@/components/ui/textarea'
+import { Checkbox } from '@/components/ui/checkbox'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { cn } from '@/lib/utils'
+import { toast } from 'sonner'
+
+interface GitCommitDialogProps {
+  trigger?: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function GitCommitDialog({
+  trigger,
+  open: controlledOpen,
+  onOpenChange,
+}: GitCommitDialogProps) {
+  const { data: status, refetch } = useGitStatus()
+
+  const [open, setOpen] = useState(false)
+  const [message, setMessage] = useState('')
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set())
+
+  const commitMutation = useGitCommit()
+  const addMutation = useGitAdd()
+
+  const isControlled = controlledOpen !== undefined
+  const isOpen = isControlled ? controlledOpen : open
+  const setIsOpen = isControlled ? onOpenChange || (() => {}) : setOpen
+
+  // 다이얼로그 열릴 때 상태 초기화
+  useEffect(() => {
+    if (isOpen) {
+      refetch()
+      setMessage('')
+      // 이미 staged된 파일들 선택
+      if (status?.staged) {
+        setSelectedFiles(new Set(status.staged))
+      }
+    }
+  }, [isOpen, refetch])
+
+  // status 변경 시 staged 파일 선택 상태 업데이트
+  useEffect(() => {
+    if (status?.staged) {
+      setSelectedFiles(new Set(status.staged))
+    }
+  }, [status?.staged])
+
+  const allFiles = [
+    ...(status?.staged || []).map((f) => ({ file: f, type: 'staged' as const })),
+    ...(status?.modified || []).map((f) => ({ file: f, type: 'modified' as const })),
+    ...(status?.untracked || []).map((f) => ({ file: f, type: 'untracked' as const })),
+    ...(status?.deleted || []).map((f) => ({ file: f, type: 'deleted' as const })),
+  ]
+
+  const toggleFile = (file: string) => {
+    const newSelected = new Set(selectedFiles)
+    if (newSelected.has(file)) {
+      newSelected.delete(file)
+    } else {
+      newSelected.add(file)
+    }
+    setSelectedFiles(newSelected)
+  }
+
+  const selectAll = () => {
+    setSelectedFiles(new Set(allFiles.map((f) => f.file)))
+  }
+
+  const deselectAll = () => {
+    setSelectedFiles(new Set())
+  }
+
+  const handleCommit = async () => {
+    if (!message.trim()) {
+      toast.error('Please enter a commit message')
+      return
+    }
+
+    if (selectedFiles.size === 0) {
+      toast.error('Please select at least one file to commit')
+      return
+    }
+
+    try {
+      // 선택된 파일들 stage
+      const filesToAdd = Array.from(selectedFiles)
+      await addMutation.mutateAsync(filesToAdd)
+
+      // 커밋
+      await commitMutation.mutateAsync({ message: message.trim() })
+
+      toast.success(`Committed ${selectedFiles.size} file(s)`)
+
+      setIsOpen(false)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Commit failed')
+    }
+  }
+
+  const getFileIcon = (type: 'staged' | 'modified' | 'untracked' | 'deleted') => {
+    switch (type) {
+      case 'staged':
+        return <Check className="size-4 text-green-500" />
+      case 'modified':
+        return <FileText className="size-4 text-yellow-500" />
+      case 'untracked':
+        return <FilePlus className="size-4 text-blue-500" />
+      case 'deleted':
+        return <FileX className="size-4 text-red-500" />
+    }
+  }
+
+  const getTypeLabel = (type: 'staged' | 'modified' | 'untracked' | 'deleted') => {
+    switch (type) {
+      case 'staged':
+        return 'Staged'
+      case 'modified':
+        return 'Modified'
+      case 'untracked':
+        return 'New'
+      case 'deleted':
+        return 'Deleted'
+    }
+  }
+
+  const isLoading = commitMutation.isPending || addMutation.isPending
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Commit changes</DialogTitle>
+          <DialogDescription>
+            Select files and enter a commit message
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          {/* 파일 목록 */}
+          <div className="grid gap-2">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Files ({selectedFiles.size}/{allFiles.length})</span>
+              <div className="flex gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={selectAll}
+                  disabled={selectedFiles.size === allFiles.length}
+                >
+                  Select all
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={deselectAll}
+                  disabled={selectedFiles.size === 0}
+                >
+                  Clear
+                </Button>
+              </div>
+            </div>
+
+            <ScrollArea className="h-[200px] rounded-md border">
+              {allFiles.length === 0 ? (
+                <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+                  No changes to commit
+                </div>
+              ) : (
+                <div className="p-2 space-y-1">
+                  {allFiles.map(({ file, type }) => (
+                    <div
+                      key={`${type}-${file}`}
+                      className={cn(
+                        'flex items-center gap-2 p-2 rounded-md hover:bg-accent cursor-pointer',
+                        selectedFiles.has(file) && 'bg-accent'
+                      )}
+                      onClick={() => toggleFile(file)}
+                    >
+                      <Checkbox
+                        checked={selectedFiles.has(file)}
+                        onCheckedChange={() => toggleFile(file)}
+                      />
+                      {getFileIcon(type)}
+                      <span className="flex-1 text-sm truncate" title={file}>
+                        {file}
+                      </span>
+                      <span
+                        className={cn(
+                          'text-xs px-1.5 py-0.5 rounded',
+                          type === 'staged' && 'bg-green-500/20 text-green-600',
+                          type === 'modified' && 'bg-yellow-500/20 text-yellow-600',
+                          type === 'untracked' && 'bg-blue-500/20 text-blue-600',
+                          type === 'deleted' && 'bg-red-500/20 text-red-600'
+                        )}
+                      >
+                        {getTypeLabel(type)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </ScrollArea>
+          </div>
+
+          {/* 커밋 메시지 */}
+          <div className="grid gap-2">
+            <label htmlFor="commit-message" className="text-sm font-medium">Commit message</label>
+            <Textarea
+              id="commit-message"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Describe your changes..."
+              rows={3}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setIsOpen(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCommit}
+            disabled={isLoading || allFiles.length === 0 || selectedFiles.size === 0}
+          >
+            {isLoading && <Loader2 className="size-4 animate-spin mr-2" />}
+            Commit {selectedFiles.size > 0 && `(${selectedFiles.size})`}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/git/GitStatusBadge.tsx

@@ -0,0 +1,148 @@
+/**
+ * Git 상태 뱃지 컴포넌트
+ * 헤더나 사이드바에서 현재 Git 상태를 간략하게 표시
+ */
+
+import { GitBranch, ArrowUp, ArrowDown, AlertCircle, Cloud, CloudOff } from 'lucide-react'
+import { useGitStatus } from '@/hooks/useGit'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+interface GitStatusBadgeProps {
+  className?: string
+  showBranch?: boolean
+  showDetails?: boolean
+}
+
+export function GitStatusBadge({
+  className,
+  showBranch = true,
+  showDetails = true,
+}: GitStatusBadgeProps) {
+  const { data: status, isLoading, error } = useGitStatus()
+
+  if (isLoading) {
+    return (
+      <Badge variant="outline" className={cn('gap-1.5', className)}>
+        <GitBranch className="size-3 animate-pulse" />
+        <span className="text-muted-foreground">...</span>
+      </Badge>
+    )
+  }
+
+  if (error || !status) {
+    return (
+      <Badge variant="outline" className={cn('gap-1.5', className)}>
+        <CloudOff className="size-3 text-muted-foreground" />
+        <span className="text-muted-foreground">Not available</span>
+      </Badge>
+    )
+  }
+
+  if (!status.isGitRepo) {
+    return (
+      <Badge variant="outline" className={cn('gap-1.5 text-muted-foreground', className)}>
+        <CloudOff className="size-3" />
+        <span>Not a Git repo</span>
+      </Badge>
+    )
+  }
+
+  // 상태에 따른 색상 결정
+  const hasConflicts = status.hasConflicts
+  const hasUncommitted = status.isDirty
+  const needsPull = status.behind > 0
+  const needsPush = status.ahead > 0
+
+  const getVariant = () => {
+    if (hasConflicts) return 'destructive'
+    if (hasUncommitted || needsPush) return 'secondary'
+    return 'outline'
+  }
+
+  const tooltipContent = (
+    <div className="space-y-1 text-xs">
+      <div className="font-medium">{status.branch}</div>
+      {status.upstream && (
+        <div className="text-muted-foreground">Tracking: {status.upstream}</div>
+      )}
+      <div className="flex gap-2 pt-1">
+        {status.ahead > 0 && (
+          <span className="flex items-center gap-1 text-green-500">
+            <ArrowUp className="size-3" />
+            {status.ahead} ahead
+          </span>
+        )}
+        {status.behind > 0 && (
+          <span className="flex items-center gap-1 text-orange-500">
+            <ArrowDown className="size-3" />
+            {status.behind} behind
+          </span>
+        )}
+      </div>
+      {status.isDirty && (
+        <div className="pt-1 text-muted-foreground">
+          {status.staged.length > 0 && <div>{status.staged.length} staged</div>}
+          {status.modified.length > 0 && <div>{status.modified.length} modified</div>}
+          {status.untracked.length > 0 && <div>{status.untracked.length} untracked</div>}
+        </div>
+      )}
+      {status.hasConflicts && (
+        <div className="text-destructive pt-1">
+          {status.conflictFiles.length} conflict(s)
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Badge variant={getVariant()} className={cn('gap-1.5 cursor-default', className)}>
+            {hasConflicts ? (
+              <AlertCircle className="size-3" />
+            ) : status.upstream ? (
+              <Cloud className="size-3" />
+            ) : (
+              <GitBranch className="size-3" />
+            )}
+
+            {showBranch && (
+              <span className="max-w-[100px] truncate">{status.branch}</span>
+            )}
+
+            {showDetails && (
+              <div className="flex items-center gap-0.5">
+                {needsPush && (
+                  <span className="flex items-center text-green-500">
+                    <ArrowUp className="size-3" />
+                    {status.ahead}
+                  </span>
+                )}
+                {needsPull && (
+                  <span className="flex items-center text-orange-500">
+                    <ArrowDown className="size-3" />
+                    {status.behind}
+                  </span>
+                )}
+                {hasUncommitted && !needsPush && !needsPull && (
+                  <span className="text-muted-foreground">*</span>
+                )}
+              </div>
+            )}
+          </Badge>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" align="start">
+          {tooltipContent}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

package/src/components/git/GitSyncButton.tsx

@@ -0,0 +1,128 @@
+/**
+ * Git Sync 버튼 컴포넌트
+ * Pull/Push 작업을 위한 버튼
+ */
+
+import { useState } from 'react'
+import { ArrowDownToLine, ArrowUpFromLine, RefreshCw, Loader2 } from 'lucide-react'
+import { useGitStatus, useGitPull, useGitPush, useGitFetch } from '@/hooks/useGit'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
+import { toast } from 'sonner'
+
+interface GitSyncButtonProps {
+  className?: string
+  showLabel?: boolean
+}
+
+export function GitSyncButton({ className, showLabel = false }: GitSyncButtonProps) {
+  const { data: status } = useGitStatus()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const pullMutation = useGitPull()
+  const pushMutation = useGitPush()
+  const fetchMutation = useGitFetch()
+
+  const isLoading = pullMutation.isPending || pushMutation.isPending || fetchMutation.isPending
+
+  const handlePull = async () => {
+    try {
+      const result = await pullMutation.mutateAsync()
+      toast.success(result.message || 'Pull successful')
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Pull failed')
+    }
+    setIsOpen(false)
+  }
+
+  const handlePush = async () => {
+    try {
+      const result = await pushMutation.mutateAsync({})
+      toast.success(result.message || 'Push successful')
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Push failed')
+    }
+    setIsOpen(false)
+  }
+
+  const handleFetch = async () => {
+    try {
+      const result = await fetchMutation.mutateAsync({})
+      toast.success(result.message || 'Fetch successful')
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Fetch failed')
+    }
+    setIsOpen(false)
+  }
+
+  if (!status?.isGitRepo) {
+    return null
+  }
+
+  // 단일 버튼으로 표시할 때 (주요 액션)
+  const primaryAction = status.behind > 0 ? 'pull' : status.ahead > 0 ? 'push' : 'fetch'
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn('gap-1.5', className)}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <Loader2 className="size-4 animate-spin" />
+          ) : primaryAction === 'pull' ? (
+            <ArrowDownToLine className="size-4 text-orange-500" />
+          ) : primaryAction === 'push' ? (
+            <ArrowUpFromLine className="size-4 text-green-500" />
+          ) : (
+            <RefreshCw className="size-4" />
+          )}
+          {showLabel && (
+            <span>
+              {primaryAction === 'pull' ? 'Pull' : primaryAction === 'push' ? 'Push' : 'Sync'}
+            </span>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={handlePull} disabled={pullMutation.isPending}>
+          <ArrowDownToLine className="size-4 mr-2" />
+          Pull
+          {status.behind > 0 && (
+            <span className="ml-auto text-xs text-orange-500">
+              {status.behind} behind
+            </span>
+          )}
+        </DropdownMenuItem>
+
+        <DropdownMenuItem onClick={handlePush} disabled={pushMutation.isPending || !status.ahead}>
+          <ArrowUpFromLine className="size-4 mr-2" />
+          Push
+          {status.ahead > 0 && (
+            <span className="ml-auto text-xs text-green-500">
+              {status.ahead} ahead
+            </span>
+          )}
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem onClick={handleFetch} disabled={fetchMutation.isPending}>
+          <RefreshCw className="size-4 mr-2" />
+          Fetch
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/git/RemoteStatusBanner.tsx

@@ -0,0 +1,143 @@
+/**
+ * 원격 상태 알림 배너
+ * OpenSpec Change: integrate-git-workflow (Phase 3)
+ *
+ * 원격 저장소에 새 커밋이 있을 때 알림을 표시합니다.
+ */
+
+import { useState } from 'react'
+import { ArrowDown, RefreshCw, X, AlertTriangle, GitCommit, Loader2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { useRemoteUpdates, useGitPull, usePotentialConflicts } from '@/hooks/useChangeGit'
+import { toast } from 'sonner'
+
+interface RemoteStatusBannerProps {
+  /** 자동 체크 활성화 (기본: true) */
+  autoCheck?: boolean
+  /** 체크 주기 (ms, 기본: 60000) */
+  checkInterval?: number
+}
+
+export function RemoteStatusBanner({
+  autoCheck = true,
+  checkInterval = 60000,
+}: RemoteStatusBannerProps) {
+  const [dismissed, setDismissed] = useState(false)
+  const [showCommits, setShowCommits] = useState(false)
+
+  const { data: remoteUpdates, isLoading, refetch } = useRemoteUpdates({
+    enabled: autoCheck,
+    refetchInterval: checkInterval,
+  })
+
+  const { data: conflicts } = usePotentialConflicts({
+    enabled: remoteUpdates?.hasUpdates ?? false,
+  })
+
+  const pullMutation = useGitPull()
+
+  // 업데이트 없거나 dismiss됨
+  if (!remoteUpdates?.hasUpdates || dismissed) {
+    return null
+  }
+
+  const handlePull = async () => {
+    try {
+      await pullMutation.mutateAsync()
+      toast.success('Pull 완료')
+      setDismissed(true)
+    } catch (error) {
+      toast.error(`Pull 실패: ${(error as Error).message}`)
+    }
+  }
+
+  const handleRefresh = () => {
+    refetch()
+  }
+
+  return (
+    <div className="bg-blue-50 dark:bg-blue-950 border-l-4 border-blue-500 p-4 mb-4 rounded-r-lg">
+      <div className="flex items-start justify-between">
+        <div className="flex items-start gap-3">
+          <ArrowDown className="h-5 w-5 text-blue-500 mt-0.5" />
+          <div className="space-y-1">
+            <p className="font-medium text-blue-900 dark:text-blue-100">
+              원격에 {remoteUpdates.behind}개의 새 커밋이 있습니다
+            </p>
+
+            {/* 충돌 경고 */}
+            {conflicts?.hasPotentialConflicts && (
+              <div className="flex items-center gap-1 text-amber-600 dark:text-amber-400 text-sm">
+                <AlertTriangle className="h-4 w-4" />
+                <span>충돌 가능성: {conflicts.files.join(', ')}</span>
+              </div>
+            )}
+
+            {/* 커밋 목록 토글 */}
+            {remoteUpdates.remoteCommits.length > 0 && (
+              <button
+                className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
+                onClick={() => setShowCommits(!showCommits)}
+              >
+                {showCommits ? '커밋 숨기기' : '커밋 보기'}
+              </button>
+            )}
+
+            {/* 커밋 목록 */}
+            {showCommits && (
+              <ul className="mt-2 space-y-1 text-sm">
+                {remoteUpdates.remoteCommits.map((commit) => (
+                  <li key={commit.hash} className="flex items-center gap-2 text-muted-foreground">
+                    <GitCommit className="h-3 w-3" />
+                    <code className="text-xs">{commit.hash}</code>
+                    <span className="truncate">{commit.message}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={handleRefresh}
+            disabled={isLoading}
+          >
+            <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+          </Button>
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handlePull}
+            disabled={pullMutation.isPending}
+          >
+            {pullMutation.isPending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Pull 중...
+              </>
+            ) : (
+              <>
+                <ArrowDown className="mr-2 h-4 w-4" />
+                Pull
+              </>
+            )}
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => setDismissed(true)}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/git/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Git 컴포넌트 모듈
+ * OpenSpec Change: integrate-git-workflow
+ */
+
+export { GitStatusBadge } from './GitStatusBadge'
+export { GitSyncButton } from './GitSyncButton'
+export { GitBranchSelector } from './GitBranchSelector'
+export { GitCommitDialog } from './GitCommitDialog'