zyflow 0.6.4

package/src/hooks/useFlowItems.ts

@@ -0,0 +1,205 @@
+/**
+ * Flow Items Hook with MoAI SPEC Support
+ *
+ * Unified hook for fetching and managing flow items (OpenSpec changes + MoAI SPECs)
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import type { FlowItem, FlowSyncResponse } from '@/types'
+import { isOpenSpecChange, isMoaiSpec } from '@/types'
+import { flowApi, parseFlowItem } from '@/api/flow'
+import { isApiError, getErrorMessage } from '@/api/client'
+
+// =============================================
+// Flow Items Query Hook
+// =============================================
+
+interface UseFlowItemsOptions {
+  enabled?: boolean
+  refetchInterval?: number
+}
+
+/**
+ * Fetch all flow items (OpenSpec changes + MoAI SPECs)
+ *
+ * @example
+ * ```tsx
+ * const { data: items, error, isLoading } = useFlowItems()
+ *
+ * items?.forEach(item => {
+ *   if (isOpenSpecChange(item)) {
+ *     // Handle OpenSpec change
+ *   } else if (isMoaiSpec(item)) {
+ *     // Handle MoAI SPEC
+ *   }
+ * })
+ * ```
+ */
+export function useFlowItems(options?: UseFlowItemsOptions) {
+  const { enabled = true, refetchInterval = undefined } = options || {}
+
+  return useQuery({
+    queryKey: ['flow', 'items'],
+    queryFn: async (): Promise<FlowItem[]> => {
+      return flowApi.listChanges()
+    },
+    enabled,
+    staleTime: 30000,
+    gcTime: 300000,
+    refetchInterval,
+    retry: 3,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+  })
+}
+
+// =============================================
+// Filter Hooks (Type-Safe)
+// =============================================
+
+/**
+ * Get only OpenSpec changes from flow items
+ */
+export function useOpenSpecChanges(options?: UseFlowItemsOptions) {
+  const { data: allItems, ...rest } = useFlowItems(options)
+
+  const data = allItems?.filter(isOpenSpecChange) ?? []
+
+  return {
+    data,
+    ...rest,
+  }
+}
+
+/**
+ * Get only MoAI SPECs from flow items
+ */
+export function useMoaiSpecs(options?: UseFlowItemsOptions) {
+  const { data: allItems, ...rest } = useFlowItems(options)
+
+  const data = allItems?.filter(isMoaiSpec) ?? []
+
+  return {
+    data,
+    ...rest,
+  }
+}
+
+// =============================================
+// Single Item Query
+// =============================================
+
+/**
+ * Fetch a single flow item by ID
+ *
+ * @param itemId - The ID of the flow item to fetch
+ */
+export function useFlowItem(itemId: string | null) {
+  return useQuery({
+    queryKey: ['flow', 'items', itemId],
+    queryFn: async (): Promise<FlowItem | null> => {
+      if (!itemId) return null
+
+      const response = await flowApi.getChange(itemId)
+      return parseFlowItem(response.change)
+    },
+    enabled: !!itemId,
+    staleTime: 30000,
+    gcTime: 300000,
+  })
+}
+
+// =============================================
+// Sync Mutations
+// =============================================
+
+/**
+ * Sync all flow items
+ */
+export function useSyncFlowItems() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (): Promise<FlowSyncResponse> => {
+      return flowApi.syncChanges()
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['flow'] })
+      return data
+    },
+    onError: (error) => {
+      console.error('Failed to sync flow items:', getErrorMessage(error))
+    },
+  })
+}
+
+/**
+ * Sync a specific flow item
+ */
+export function useSyncFlowItem() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (itemId: string): Promise<{ changeId: string; tasksCreated: number; tasksUpdated: number }> => {
+      return flowApi.syncChange(itemId)
+    },
+    onSuccess: (_data, itemId) => {
+      queryClient.invalidateQueries({ queryKey: ['flow', 'items', itemId] })
+      queryClient.invalidateQueries({ queryKey: ['flow'] })
+    },
+    onError: (error) => {
+      console.error('Failed to sync flow item:', getErrorMessage(error))
+    },
+  })
+}
+
+// =============================================
+// Archive Mutation
+// =============================================
+
+interface ArchiveFlowItemInput {
+  itemId: string
+  skipSpecs?: boolean
+  force?: boolean
+}
+
+/**
+ * Archive a flow item
+ */
+export function useArchiveFlowItem() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ itemId, skipSpecs, force }: ArchiveFlowItemInput): Promise<{ changeId: string; archived: boolean; filesMoved: boolean }> => {
+      return flowApi.archiveChange(itemId, { skipSpecs, force })
+    },
+    onSuccess: (_data, { itemId }) => {
+      queryClient.invalidateQueries({ queryKey: ['flow', 'items', itemId] })
+      queryClient.invalidateQueries({ queryKey: ['flow'] })
+    },
+    onError: (error) => {
+      const message = getErrorMessage(error)
+      console.error('Failed to archive flow item:', message)
+
+      // Re-throw for UI error handling
+      throw error
+    },
+  })
+}
+
+// =============================================
+// Error Handling Utilities
+// =============================================
+
+/**
+ * Check if a flow item fetch error is a 404 (not found)
+ */
+export function isFlowItemNotFound(error: unknown): boolean {
+  return isApiError(error) && error.status === 404
+}
+
+/**
+ * Check if a flow item operation is a validation error
+ */
+export function isFlowItemValidationError(error: unknown): boolean {
+  return isApiError(error) && error.status === 422
+}

package/src/hooks/useGit.ts

@@ -0,0 +1,427 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import type { ApiResponse } from '@/types'
+
+// Git Sync 상태 타입 (프로젝트별)
+export interface GitSyncStatus {
+  currentBranch: string
+  trackingBranch: string | null
+  ahead: number
+  behind: number
+  hasRemote: boolean
+  lastFetched: number | null
+}
+
+// 모든 프로젝트의 Git Sync 상태 조회
+async function fetchAllProjectsSyncStatus(): Promise<Record<string, GitSyncStatus | null>> {
+  const response = await fetch('/api/git/projects/sync-status')
+  const json: ApiResponse<Record<string, GitSyncStatus | null>> = await response.json()
+
+  if (!json.success || !json.data) {
+    throw new Error(json.error || 'Failed to fetch projects sync status')
+  }
+
+  return json.data
+}
+
+export function useProjectsSyncStatus() {
+  return useQuery({
+    queryKey: ['git', 'projects-sync-status'],
+    queryFn: fetchAllProjectsSyncStatus,
+    refetchInterval: 5 * 60 * 1000, // 5분마다 자동 갱신
+    staleTime: 60 * 1000, // 1분간 캐시
+  })
+}
+
+// 특정 프로젝트 fetch
+async function fetchProject(projectId: string): Promise<{ message: string; status: GitSyncStatus | null }> {
+  const response = await fetch(`/api/git/projects/${projectId}/fetch`, {
+    method: 'POST',
+  })
+  const json: ApiResponse<{ message: string; status: GitSyncStatus | null }> = await response.json()
+
+  if (!json.success) {
+    throw new Error(json.error || 'Failed to fetch project')
+  }
+
+  return json.data || { message: 'Fetch successful', status: null }
+}
+
+export function useProjectFetch() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: fetchProject,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['git', 'projects-sync-status'] })
+    },
+  })
+}
+
+// 특정 프로젝트 pull
+async function pullProject(projectId: string): Promise<{ message: string; status: GitSyncStatus | null }> {
+  const response = await fetch(`/api/git/projects/${projectId}/pull`, {
+    method: 'POST',
+  })
+  const json: ApiResponse<{ message: string; status: GitSyncStatus | null }> = await response.json()
+
+  if (!json.success) {
+    throw new Error(json.error || 'Failed to pull project')
+  }
+
+  return json.data || { message: 'Pull successful', status: null }
+}
+
+export function useProjectPull() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: pullProject,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['git', 'projects-sync-status'] })
+      queryClient.invalidateQueries({ queryKey: ['git', 'status'] })
+      queryClient.invalidateQueries({ queryKey: ['git', 'remote-updates'] })
+      // 프로젝트 데이터도 갱신
+      queryClient.invalidateQueries({ queryKey: ['flow'] })
+      queryClient.invalidateQueries({ queryKey: ['changes'] })
+      queryClient.invalidateQueries({ queryKey: ['projects-all-data'] })
+    },
+  })
+}
+
+// Git 상태 타입
+export interface GitStatus {
+  branch: string
+  upstream: string | null
+  ahead: number
+  behind: number
+  staged: string[]
+  modified: string[]
+  untracked: string[]
+  deleted: string[]
+  hasConflicts: boolean
+  conflictFiles: string[]
+  isDirty: boolean
+  lastCommitHash: string | null
+  lastCommitMessage: string | null
+  isGitRepo: boolean
+}
+
+export interface GitRemoteUpdates {
+  hasUpdates: boolean
+  behind: number
+  remoteCommits: { hash: string; message: string }[]
+}
+
+export interface GitBranches {
+  branches: string[]
+  currentBranch: string
+}
+
+// Git 상태 조회
+async function fetchGitStatus(): Promise<GitStatus> {
+  const response = await fetch('/api/git/status')
+  const json: ApiResponse<GitStatus> = await response.json()
+
+  if (!json.success || !json.data) {
+    throw new Error(json.error || 'Failed to fetch git status')
+  }
+
+  return json.data
+}
+
+export function useGitStatus() {
+  return useQuery({
+    queryKey: ['git', 'status'],
+    queryFn: fetchGitStatus,
+    refetchInterval: 30000, // 30초마다 자동 갱신
+  })
+}
+
+// Git 원격 업데이트 확인
+async function fetchRemoteUpdates(): Promise<GitRemoteUpdates> {
+  const response = await fetch('/api/git/remote-updates')
+  const json: ApiResponse<GitRemoteUpdates> = await response.json()
+
+  if (!json.success || !json.data) {
+    throw new Error(json.error || 'Failed to check remote updates')
+  }
+
+  return json.data
+}
+
+export function useGitRemoteUpdates() {
+  return useQuery({
+    queryKey: ['git', 'remote-updates'],
+    queryFn: fetchRemoteUpdates,
+    enabled: false, // 수동으로만 호출
+  })
+}
+
+// Git 브랜치 목록
+async function fetchGitBranches(all?: boolean): Promise<GitBranches> {
+  const url = all ? '/api/git/branches?all=true' : '/api/git/branches'
+  const response = await fetch(url)
+  const json: ApiResponse<GitBranches> = await response.json()
+
+  if (!json.success || !json.data) {
+    throw new Error(json.error || 'Failed to fetch branches')
+  }
+
+  return json.data
+}
+
+export function useGitBranches(all = false) {
+  return useQuery({
+    queryKey: ['git', 'branches', { all }],
+    queryFn: () => fetchGitBranches(all),
+  })
+}
+
+// Git Pull
+async function gitPull(): Promise<{ message: string }> {
+  const response = await fetch('/api/git/pull', { method: 'POST' })
+  const json: ApiResponse<{ message: string }> = await response.json()
+
+  if (!json.success) {
+    throw new Error(json.error || 'Failed to pull')
+  }
+
+  return json.data || { message: 'Pull successful' }
+}
+
+export function useGitPull() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: gitPull,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['git', 'status'] })
+      queryClient.invalidateQueries({ queryKey: ['git', 'branches'] })
+      // 프로젝트 데이터도 갱신 (파일이 변경될 수 있음)
+      queryClient.invalidateQueries({ queryKey: ['flow'] })
+      queryClient.invalidateQueries({ queryKey: ['changes'] })
+    },
+  })
+}
+
+// Git Push
+interface PushOptions {
+  remote?: string
+  branch?: string
+  force?: boolean
+}
+
+async function gitPush(options?: PushOptions): Promise<{ message: string }> {
+  const response = await fetch('/api/git/push', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(options || {}),
+  })
+  const json: ApiResponse<{ message: string }> = await response.json()
+
+  if (!json.success) {
+    throw new Error(json.error || 'Failed to push')
+  }
+
+  return json.data || { message: 'Push successful' }
+}
+
+export function useGitPush() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: gitPush,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['git', 'status'] })
+    },
+  })
+}
+
+// Git Fetch
+async function gitFetch(options?: { remote?: string; all?: boolean }): Promise<{ message: string }> {
+  const response = await fetch('/api/git/fetch', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(options || {}),
+  })
+  const json: ApiResponse<{ message: string }> = await response.json()
+
+  if (!json.success) {
+    throw new Error(json.error || 'Failed to fetch')
+  }
+
+  return json.data || { message: 'Fetch successful' }
+}
+
+export function useGitFetch() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: gitFetch,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['git', 'status'] })
+    },
+  })
+}
+
+// Git Commit
+interface CommitOptions {
+  message: string
+  all?: boolean
+  files?: string[]
+}
+
+async function gitCommit(options: CommitOptions): Promise<{ message: string }> {
+  const response = await fetch('/api/git/commit', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(options),
+  })
+  const json: ApiResponse<{ message: string }> = await response.json()
+
+  if (!json.success) {
+    throw new Error(json.error || 'Failed to commit')
+  }
+
+  return json.data || { message: 'Commit successful' }
+}
+
+export function useGitCommit() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: gitCommit,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['git', 'status'] })
+    },
+  })
+}
+
+// Git Add (Stage)
+async function gitAdd(files?: string[]): Promise<{ message: string }> {
+  const response = await fetch('/api/git/add', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ files }),
+  })
+  const json: ApiResponse<{ message: string }> = await response.json()
+
+  if (!json.success) {
+    throw new Error(json.error || 'Failed to stage files')
+  }
+
+  return json.data || { message: 'Files staged' }
+}
+
+export function useGitAdd() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: gitAdd,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['git', 'status'] })
+    },
+  })
+}
+
+// Git Checkout
+interface CheckoutOptions {
+  branch: string
+  create?: boolean
+}
+
+async function gitCheckout(options: CheckoutOptions): Promise<{ message: string; branch: string }> {
+  const response = await fetch('/api/git/checkout', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(options),
+  })
+  const json: ApiResponse<{ message: string; branch: string }> = await response.json()
+
+  if (!json.success) {
+    throw new Error(json.error || 'Failed to checkout')
+  }
+
+  return json.data || { message: 'Checkout successful', branch: options.branch }
+}
+
+export function useGitCheckout() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: gitCheckout,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['git', 'status'] })
+      queryClient.invalidateQueries({ queryKey: ['git', 'branches'] })
+      // 브랜치 변경 시 데이터도 갱신
+      queryClient.invalidateQueries({ queryKey: ['flow'] })
+      queryClient.invalidateQueries({ queryKey: ['changes'] })
+    },
+  })
+}
+
+// Git Branch 생성
+interface CreateBranchOptions {
+  name: string
+  baseBranch?: string
+  checkout?: boolean
+}
+
+async function gitCreateBranch(options: CreateBranchOptions): Promise<{ message: string; branch: string }> {
+  const response = await fetch('/api/git/branch', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(options),
+  })
+  const json: ApiResponse<{ message: string; branch: string }> = await response.json()
+
+  if (!json.success) {
+    throw new Error(json.error || 'Failed to create branch')
+  }
+
+  return json.data || { message: 'Branch created', branch: options.name }
+}
+
+export function useGitCreateBranch() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: gitCreateBranch,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['git', 'branches'] })
+      queryClient.invalidateQueries({ queryKey: ['git', 'status'] })
+    },
+  })
+}
+
+// Git Stash
+interface StashOptions {
+  pop?: boolean
+  message?: string
+}
+
+async function gitStash(options?: StashOptions): Promise<{ message: string }> {
+  const response = await fetch('/api/git/stash', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(options || {}),
+  })
+  const json: ApiResponse<{ message: string }> = await response.json()
+
+  if (!json.success) {
+    throw new Error(json.error || 'Failed to stash')
+  }
+
+  return json.data || { message: 'Stash successful' }
+}
+
+export function useGitStash() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: gitStash,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['git', 'status'] })
+    },
+  })
+}

package/src/hooks/useHideCompletedSpecs.ts

@@ -0,0 +1,15 @@
+import { useHideCompletedStore } from '@/stores/useHideCompletedStore'
+
+/**
+ * Hook to manage hide completed SPECs preference
+ * - Uses Zustand for state management
+ * - Persists to localStorage automatically
+ * - Syncs across all components in the same tab
+ */
+export function useHideCompletedSpecs() {
+  const hideCompleted = useHideCompletedStore((state) => state.hideCompleted)
+  const setHideCompleted = useHideCompletedStore((state) => state.setHideCompleted)
+  const toggle = useHideCompletedStore((state) => state.toggle)
+
+  return { hideCompleted, setHideCompleted, toggle }
+}

package/src/hooks/useInstance.ts

@@ -0,0 +1,40 @@
+import { useQuery } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import type { ApiResponse } from '@/types'
+
+export interface InstanceInfo {
+  name: string
+  displayName: string
+  port: string | number
+  dataDir: string
+  defaultProjectRoot: string
+}
+
+async function fetchInstance(): Promise<InstanceInfo> {
+  const response = await fetch('/api/instance')
+  const json: ApiResponse<InstanceInfo> = await response.json()
+
+  if (!json.success || !json.data) {
+    throw new Error(json.error || 'Failed to fetch instance info')
+  }
+
+  return json.data
+}
+
+export function useInstance() {
+  const query = useQuery({
+    queryKey: ['instance'],
+    queryFn: fetchInstance,
+    staleTime: Infinity, // Instance info doesn't change during runtime
+    gcTime: Infinity,
+  })
+
+  // Update document title when instance info is loaded
+  useEffect(() => {
+    if (query.data?.displayName) {
+      document.title = `${query.data.displayName} - Dashboard`
+    }
+  }, [query.data?.displayName])
+
+  return query
+}