zyflow 0.6.4

package/src/hooks/useChanges.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query'
+import type { Change, ApiResponse, ChangesResponse } from '@/types'
+
+async function fetchChanges(): Promise<Change[]> {
+  const response = await fetch('/api/changes')
+  const json: ApiResponse<ChangesResponse> = await response.json()
+
+  if (!json.success || !json.data) {
+    throw new Error(json.error || 'Failed to fetch changes')
+  }
+
+  return json.data.changes
+}
+
+export function useChanges() {
+  return useQuery({
+    queryKey: ['changes'],
+    queryFn: fetchChanges,
+  })
+}

package/src/hooks/useClaude.ts

@@ -0,0 +1,130 @@
+/**
+ * Claude Code 실행 훅 (하위 호환 래퍼)
+ * @module hooks/useClaude
+ *
+ * 기존 useClaude 인터페이스를 유지하면서 내부적으로 useAI를 사용
+ * 새로운 코드에서는 useAI 직접 사용 권장
+ */
+
+import { useCallback } from 'react'
+import { useAI } from './useAI'
+import type { AIMessage } from '@/types/ai'
+
+// =============================================
+// 하위 호환 타입 (기존 인터페이스 유지)
+// =============================================
+
+/**
+ * Claude 모델 타입 (하위 호환)
+ * @deprecated useAI와 함께 AIProvider 타입 사용 권장
+ */
+export type ClaudeModel = 'haiku' | 'sonnet' | 'opus'
+
+/**
+ * Claude 메시지 타입 (하위 호환)
+ * @deprecated useAI와 함께 AIMessage 타입 사용 권장
+ */
+export interface ClaudeMessage {
+  type: 'start' | 'output' | 'text' | 'stderr' | 'complete' | 'error'
+  runId?: string
+  taskId?: string
+  changeId?: string
+  data?: {
+    type?: string
+    message?: { content?: string }
+    name?: string
+    input?: Record<string, unknown>
+    content?: string
+  }
+  content?: string
+  status?: 'completed' | 'error'
+  exitCode?: number
+  message?: string
+}
+
+/**
+ * Claude 실행 상태 (하위 호환)
+ * @deprecated useAI와 함께 AIExecution 타입 사용 권장
+ */
+export interface ClaudeExecution {
+  runId: string | null
+  status: 'idle' | 'running' | 'completed' | 'error'
+  messages: ClaudeMessage[]
+  error: string | null
+}
+
+// =============================================
+// 훅 구현
+// =============================================
+
+/**
+ * Claude Code 실행 훅 (하위 호환 래퍼)
+ *
+ * 기존 코드와의 호환성을 위해 유지됩니다.
+ * 새로운 코드에서는 useAI 훅을 직접 사용하세요.
+ *
+ * @example
+ * // 기존 사용법 (계속 동작)
+ * const { execution, execute, stop, reset } = useClaude()
+ * execute({ changeId, taskId, taskTitle, model: 'sonnet' })
+ *
+ * // 권장 사용법 (새 코드)
+ * const { execution, execute, stop, reset } = useAI()
+ * execute({ provider: 'claude', model: 'sonnet', changeId, taskId, taskTitle })
+ */
+export function useClaude() {
+  const ai = useAI()
+
+  /**
+   * Claude 실행 (하위 호환)
+   */
+  const execute = useCallback(
+    async (params: {
+      changeId: string
+      taskId: string
+      taskTitle: string
+      context?: string
+      model?: ClaudeModel
+    }) => {
+      return ai.execute({
+        provider: 'claude',
+        model: params.model || 'sonnet',
+        changeId: params.changeId,
+        taskId: params.taskId,
+        taskTitle: params.taskTitle,
+        context: params.context,
+      })
+    },
+    [ai]
+  )
+
+  // AIMessage를 ClaudeMessage로 변환
+  const convertMessages = (messages: AIMessage[]): ClaudeMessage[] => {
+    return messages.map((msg) => ({
+      type: msg.type as ClaudeMessage['type'],
+      runId: msg.runId,
+      taskId: msg.taskId,
+      changeId: msg.changeId,
+      data: msg.data,
+      content: msg.content,
+      status: msg.status,
+      exitCode: msg.exitCode,
+      message: msg.message,
+    }))
+  }
+
+  // 하위 호환 실행 상태 반환
+  const execution: ClaudeExecution = {
+    runId: ai.execution.runId,
+    status: ai.execution.status,
+    messages: convertMessages(ai.execution.messages),
+    error: ai.execution.error,
+  }
+
+  return {
+    execution,
+    execute,
+    stop: ai.stop,
+    reset: ai.reset,
+  }
+}

package/src/hooks/useDocs.ts

@@ -0,0 +1,182 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { API_ENDPOINTS } from '@/config/api'
+import { toast } from 'sonner'
+
+export interface DocItem {
+  id: string
+  name: string
+  path: string
+  type: 'file' | 'folder'
+  children?: DocItem[]
+}
+
+export interface DocContent {
+  id: string
+  name: string
+  path: string
+  content: string
+  lastModified: string
+}
+
+export interface DocSearchResult {
+  path: string
+  name: string
+  matches: string[]
+}
+
+const API_BASE = API_ENDPOINTS.base
+
+/**
+ * 프로젝트의 문서 목록 조회
+ */
+export function useDocsList(projectPath?: string, remote?: { serverId: string }) {
+  return useQuery({
+    queryKey: ['docs', 'list', projectPath, remote?.serverId],
+    queryFn: async (): Promise<DocItem[]> => {
+      if (!projectPath) return []
+
+      const params = new URLSearchParams({ projectPath })
+      if (remote) {
+        params.append('serverId', remote.serverId)
+      }
+      
+      const res = await fetch(`${API_BASE}/docs?${params}`)
+
+      if (!res.ok) {
+        throw new Error('Failed to fetch docs list')
+      }
+
+      const data = await res.json()
+      return data.data || []
+    },
+    enabled: !!projectPath,
+    staleTime: 30000, // 30초
+  })
+}
+
+/**
+ * 특정 문서 내용 조회
+ */
+export function useDocContent(projectPath?: string, docPath?: string, remote?: { serverId: string }) {
+  return useQuery({
+    queryKey: ['docs', 'content', projectPath, docPath, remote?.serverId],
+    queryFn: async (): Promise<DocContent | null> => {
+      if (!projectPath || !docPath) return null
+
+      const params = new URLSearchParams({ projectPath, docPath })
+      if (remote) {
+        params.append('serverId', remote.serverId)
+      }
+      
+      const res = await fetch(`${API_BASE}/docs/content?${params}`)
+
+      if (!res.ok) {
+        if (res.status === 404) return null
+        throw new Error('Failed to fetch doc content')
+      }
+
+      const data = await res.json()
+      return data.data || null
+    },
+    enabled: !!projectPath && !!docPath,
+    staleTime: 10000, // 10초
+  })
+}
+
+/**
+ * 문서 검색
+ */
+export function useDocSearch(projectPath?: string, query?: string, remote?: { serverId: string }) {
+  return useQuery({
+    queryKey: ['docs', 'search', projectPath, query, remote?.serverId],
+    queryFn: async (): Promise<DocSearchResult[]> => {
+      if (!projectPath || !query || query.length < 2) return []
+
+      const params = new URLSearchParams({ projectPath, query })
+      if (remote) {
+        params.append('serverId', remote.serverId)
+      }
+      
+      const res = await fetch(`${API_BASE}/docs/search?${params}`)
+
+      if (!res.ok) {
+        throw new Error('Failed to search docs')
+      }
+
+      const data = await res.json()
+      return data.data || []
+    },
+    enabled: !!projectPath && !!query && query.length >= 2,
+    staleTime: 5000, // 5초
+  })
+}
+
+/**
+ * 문서 내용 저장
+ */
+export function useSaveDocContent() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({
+      projectPath,
+      docPath,
+      content,
+      remote,
+    }: {
+      projectPath: string
+      docPath: string
+      content: string
+      remote?: { serverId: string }
+    }) => {
+      const body: { projectPath: string; docPath: string; content: string; serverId?: string } = { projectPath, docPath, content }
+      if (remote) {
+        body.serverId = remote.serverId
+      }
+
+      const res = await fetch(`${API_BASE}/docs/content`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+
+      if (!res.ok) {
+        const error = await res.json()
+        throw new Error(error.error || 'Failed to save document')
+      }
+
+      return res.json()
+    },
+    onSuccess: (_, { projectPath, docPath, remote }) => {
+      // 캐시 무효화 (목록 및 해당 문서 내용)
+      queryClient.invalidateQueries({ queryKey: ['docs', 'content', projectPath, docPath, remote?.serverId] })
+      queryClient.invalidateQueries({ queryKey: ['docs', 'list', projectPath, remote?.serverId] })
+      toast.success('문서가 저장되었습니다')
+    },
+    onError: (error) => {
+      console.error('Save error:', error)
+      toast.error(`저장 실패: ${error.message}`)
+    },
+  })
+}
+
+/**
+ * 문서 트리에서 모든 파일 경로 추출 (검색/팔레트용)
+ */
+export function flattenDocTree(items: DocItem[]): DocItem[] {
+  const result: DocItem[] = []
+
+  function traverse(items: DocItem[]) {
+    for (const item of items) {
+      if (item.type === 'file') {
+        result.push(item)
+      }
+      if (item.children) {
+        traverse(item.children)
+      }
+    }
+  }
+
+  traverse(items)
+  return result
+}

package/src/hooks/useErrorDashboard.ts

@@ -0,0 +1,243 @@
+/**
+ * Error Dashboard Hook
+ * Provides error dashboard functionality
+ * @module hooks/useErrorDashboard
+ */
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { ErrorContext, ErrorSeverity, ErrorType } from '@/types/errors'
+import { getErrorLogger } from '@/utils/error-logger'
+import {
+  calculateErrorStats,
+  calculateErrorTrend,
+  calculateErrorFrequency,
+  getErrorPatterns,
+} from '@/utils/error-statistics'
+
+// =============================================
+// Types
+// =============================================
+
+export interface FilterOptions {
+  searchText: string
+  errorType?: ErrorType
+  severity?: ErrorSeverity
+  dateRange: [Date, Date]
+  component?: string
+}
+
+export interface ErrorDashboardState {
+  errors: ErrorContext[]
+  filteredErrors: ErrorContext[]
+  selectedError: ErrorContext | null
+  filters: FilterOptions
+  isLoading: boolean
+  stats: ReturnType<typeof calculateErrorStats>
+  trend: ReturnType<typeof calculateErrorTrend>
+  frequency: Map<string, number>
+  patterns: ReturnType<typeof getErrorPatterns>
+}
+
+export interface ErrorDashboardActions {
+  setSelectedError: (error: ErrorContext | null) => void
+  setFilters: (filters: FilterOptions) => void
+  clearAllErrors: () => void
+  exportJSON: () => void
+  exportCSV: () => void
+  refreshErrors: () => void
+}
+
+// =============================================
+// Hook
+// =============================================
+
+export function useErrorDashboard(): ErrorDashboardState & ErrorDashboardActions {
+  const [errors, setErrors] = useState<ErrorContext[]>([])
+  const [selectedError, setSelectedError] = useState<ErrorContext | null>(null)
+  const [filters, setFilters] = useState<FilterOptions>({
+    searchText: '',
+    dateRange: [
+      new Date(Date.now() - 24 * 60 * 60 * 1000),
+      new Date(),
+    ],
+  })
+  const [isLoading, setIsLoading] = useState(true)
+
+  // Load errors on mount
+  useEffect(() => {
+    const loadErrors = () => {
+      const logger = getErrorLogger()
+      const allErrors = logger.getAllErrors()
+      setErrors(allErrors)
+      setIsLoading(false)
+    }
+
+    loadErrors()
+
+    // Refresh every 5 seconds
+    const interval = setInterval(loadErrors, 5000)
+    return () => clearInterval(interval)
+  }, [])
+
+  // Filter errors
+  const filteredErrors = useMemo(() => {
+    return errors.filter((error) => {
+      // Search text filter
+      if (filters.searchText) {
+        const searchLower = filters.searchText.toLowerCase()
+        const matchesSearch =
+          error.code.toLowerCase().includes(searchLower) ||
+          error.message.toLowerCase().includes(searchLower) ||
+          error.component?.toLowerCase().includes(searchLower) ||
+          error.function?.toLowerCase().includes(searchLower)
+        if (!matchesSearch) return false
+      }
+
+      // Type filter
+      if (filters.errorType && error.type !== filters.errorType) {
+        return false
+      }
+
+      // Severity filter
+      if (filters.severity && error.severity !== filters.severity) {
+        return false
+      }
+
+      // Component filter
+      if (filters.component && error.component !== filters.component) {
+        return false
+      }
+
+      // Date range filter
+      const errorTime = error.timestamp
+      const [startDate, endDate] = filters.dateRange
+      if (
+        errorTime < startDate.getTime() ||
+        errorTime > endDate.getTime()
+      ) {
+        return false
+      }
+
+      return true
+    })
+  }, [errors, filters])
+
+  // Calculate statistics
+  const stats = useMemo(() => {
+    return calculateErrorStats(filteredErrors)
+  }, [filteredErrors])
+
+  // Calculate trend
+  const trend = useMemo(() => {
+    return calculateErrorTrend(filteredErrors, '24h')
+  }, [filteredErrors])
+
+  // Calculate frequency
+  const frequency = useMemo(() => {
+    return calculateErrorFrequency(filteredErrors)
+  }, [filteredErrors])
+
+  // Get patterns
+  const patterns = useMemo(() => {
+    return getErrorPatterns(filteredErrors)
+  }, [filteredErrors])
+
+  // Export as JSON
+  const exportJSON = useCallback(() => {
+    const data = {
+      exportedAt: new Date().toISOString(),
+      filters,
+      errorCount: filteredErrors.length,
+      errors: filteredErrors,
+      statistics: stats,
+    }
+
+    const json = JSON.stringify(data, null, 2)
+    const blob = new Blob([json], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `error-log-${Date.now()}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }, [filteredErrors, filters, stats])
+
+  // Export as CSV
+  const exportCSV = useCallback(() => {
+    const headers = [
+      'Timestamp',
+      'Code',
+      'Message',
+      'Type',
+      'Severity',
+      'Component',
+      'Function',
+      'Recoverable',
+    ]
+
+    const rows = filteredErrors.map((error) => [
+      new Date(error.timestamp).toISOString(),
+      error.code,
+      error.message,
+      error.type,
+      error.severity,
+      error.component || '',
+      error.function || '',
+      error.recoverable ? 'Yes' : 'No',
+    ])
+
+    const csv =
+      headers.join(',') +
+      '\n' +
+      rows
+        .map((row) =>
+          row
+            .map((cell) => `"${String(cell).replace(/"/g, '""')}"`)
+            .join(',')
+        )
+        .join('\n')
+
+    const blob = new Blob([csv], { type: 'text/csv' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `error-log-${Date.now()}.csv`
+    a.click()
+    URL.revokeObjectURL(url)
+  }, [filteredErrors])
+
+  // Clear all errors
+  const clearAllErrors = useCallback(() => {
+    if (confirm('Are you sure you want to clear all error logs?')) {
+      const logger = getErrorLogger()
+      logger.clear()
+      setErrors([])
+      setSelectedError(null)
+    }
+  }, [])
+
+  // Refresh errors
+  const refreshErrors = useCallback(() => {
+    const logger = getErrorLogger()
+    const allErrors = logger.getAllErrors()
+    setErrors(allErrors)
+  }, [])
+
+  return {
+    errors,
+    filteredErrors,
+    selectedError,
+    filters,
+    isLoading,
+    stats,
+    trend,
+    frequency,
+    patterns,
+    setSelectedError,
+    setFilters,
+    clearAllErrors,
+    exportJSON,
+    exportCSV,
+    refreshErrors,
+  }
+}