zyflow 0.6.4

package/src/stores/sseStore.ts

@@ -0,0 +1,247 @@
+/**
+ * SSE Connection Store (Zustand)
+ *
+ * Manages SSE connection state and reconnection attempts
+ * @module stores/sseStore
+ */
+
+import { create } from 'zustand'
+
+// =============================================
+// Types
+// =============================================
+
+export type SSEConnectionStatus = 'connected' | 'connecting' | 'disconnected' | 'reconnecting' | 'failed'
+
+export interface SSEConnectionInfo {
+  status: SSEConnectionStatus
+  reconnectAttempt: number
+  maxReconnectAttempts: number
+  lastConnectionTime?: number
+  lastDisconnectionTime?: number
+  lastError?: string
+  nextRetryIn?: number // milliseconds
+}
+
+export interface SSEStoreState {
+  connection: SSEConnectionInfo
+
+  // Event queue while disconnected
+  queuedEvents: Array<{
+    type: string
+    data: unknown
+    timestamp: number
+  }>
+
+  // Settings
+  maxQueueSize: number
+  initialRetryDelayMs: number
+  maxRetryDelayMs: number
+}
+
+export interface SSEStoreActions {
+  // Connection state
+  setConnected: () => void
+  setConnecting: () => void
+  setDisconnected: (error?: string) => void
+  setReconnecting: (attempt: number) => void
+  setFailed: (error: string) => void
+  setNextRetryIn: (ms: number) => void
+
+  // Reconnection management
+  incrementReconnectAttempt: () => void
+  resetReconnectAttempts: () => void
+
+  // Event queuing
+  queueEvent: (type: string, data: unknown) => void
+  getQueuedEvents: () => SSEStoreState['queuedEvents']
+  clearQueue: () => void
+  removeQueuedEvent: (index: number) => void
+}
+
+export type SSEStore = SSEStoreState & SSEStoreActions
+
+// =============================================
+// Zustand Store
+// =============================================
+
+export const useSSEStore = create<SSEStore>((set, get) => ({
+  // Initial state
+  connection: {
+    status: 'disconnected',
+    reconnectAttempt: 0,
+    maxReconnectAttempts: 10,
+  },
+  queuedEvents: [],
+  maxQueueSize: 100,
+  initialRetryDelayMs: 1000,
+  maxRetryDelayMs: 30000,
+
+  // Set connected
+  setConnected: () => {
+    set((state) => ({
+      connection: {
+        ...state.connection,
+        status: 'connected',
+        lastConnectionTime: Date.now(),
+        lastError: undefined,
+        nextRetryIn: undefined,
+      },
+    }))
+  },
+
+  // Set connecting
+  setConnecting: () => {
+    set((state) => ({
+      connection: {
+        ...state.connection,
+        status: 'connecting',
+      },
+    }))
+  },
+
+  // Set disconnected
+  setDisconnected: (error?: string) => {
+    set((state) => ({
+      connection: {
+        ...state.connection,
+        status: 'disconnected',
+        lastDisconnectionTime: Date.now(),
+        lastError: error,
+        nextRetryIn: undefined,
+      },
+    }))
+  },
+
+  // Set reconnecting
+  setReconnecting: (attempt: number) => {
+    set((state) => ({
+      connection: {
+        ...state.connection,
+        status: 'reconnecting',
+        reconnectAttempt: attempt,
+      },
+    }))
+  },
+
+  // Set failed
+  setFailed: (error: string) => {
+    set((state) => ({
+      connection: {
+        ...state.connection,
+        status: 'failed',
+        lastError: error,
+        lastDisconnectionTime: Date.now(),
+      },
+    }))
+  },
+
+  // Set next retry
+  setNextRetryIn: (ms: number) => {
+    set((state) => ({
+      connection: {
+        ...state.connection,
+        nextRetryIn: ms,
+      },
+    }))
+  },
+
+  // Increment reconnect attempt
+  incrementReconnectAttempt: () => {
+    set((state) => ({
+      connection: {
+        ...state.connection,
+        reconnectAttempt: state.connection.reconnectAttempt + 1,
+      },
+    }))
+  },
+
+  // Reset reconnect attempts
+  resetReconnectAttempts: () => {
+    set((state) => ({
+      connection: {
+        ...state.connection,
+        reconnectAttempt: 0,
+      },
+    }))
+  },
+
+  // Queue event
+  queueEvent: (type: string, data: unknown) => {
+    set((state) => {
+      const newQueue = [
+        ...state.queuedEvents,
+        { type, data, timestamp: Date.now() },
+      ]
+
+      // Limit queue size
+      if (newQueue.length > state.maxQueueSize) {
+        newQueue.shift() // Remove oldest event
+      }
+
+      return { queuedEvents: newQueue }
+    })
+  },
+
+  // Get queued events
+  getQueuedEvents: () => {
+    return get().queuedEvents
+  },
+
+  // Clear queue
+  clearQueue: () => {
+    set({ queuedEvents: [] })
+  },
+
+  // Remove single queued event
+  removeQueuedEvent: (index: number) => {
+    set((state) => ({
+      queuedEvents: state.queuedEvents.filter((_, i) => i !== index),
+    }))
+  },
+}))
+
+// =============================================
+// Selectors
+// =============================================
+
+export const selectConnectionStatus = (state: SSEStore) =>
+  state.connection.status
+export const selectIsConnected = (state: SSEStore) =>
+  state.connection.status === 'connected'
+export const selectIsDisconnected = (state: SSEStore) =>
+  state.connection.status === 'disconnected' || state.connection.status === 'failed'
+export const selectIsReconnecting = (state: SSEStore) =>
+  state.connection.status === 'reconnecting'
+export const selectReconnectAttempt = (state: SSEStore) =>
+  state.connection.reconnectAttempt
+export const selectMaxReconnectAttempts = (state: SSEStore) =>
+  state.connection.maxReconnectAttempts
+export const selectQueuedEventsCount = (state: SSEStore) =>
+  state.queuedEvents.length
+export const selectHasQueuedEvents = (state: SSEStore) =>
+  state.queuedEvents.length > 0
+export const selectLastError = (state: SSEStore) =>
+  state.connection.lastError
+export const selectConnectionInfo = (state: SSEStore) =>
+  state.connection
+
+// =============================================
+// Helper Hooks
+// =============================================
+
+export function useSSEStore_setConnected(): void {
+  useSSEStore.getState().setConnected()
+}
+
+export function useSSEStore_setDisconnected(error?: string): void {
+  useSSEStore.getState().setDisconnected(error)
+}
+
+export function useSSEStore_queueEvent(type: string, data: unknown): void {
+  useSSEStore.getState().queueEvent(type, data)
+}
+
+export function useSSEStore_resetReconnectAttempts(): void {
+  useSSEStore.getState().resetReconnectAttempts()
+}

package/src/stores/useHideCompletedStore.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface HideCompletedState {
+  hideCompleted: boolean
+  setHideCompleted: (value: boolean) => void
+  toggle: () => void
+}
+
+export const useHideCompletedStore = create<HideCompletedState>()(
+  persist(
+    (set) => ({
+      hideCompleted: false,
+      setHideCompleted: (value) => set({ hideCompleted: value }),
+      toggle: () => set((state) => ({ hideCompleted: !state.hideCompleted })),
+    }),
+    {
+      name: 'zyflow-hide-completed-specs',
+    }
+  )
+)

package/src/styles/index.css

@@ -0,0 +1,87 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+@import './theme.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+  html {
+    @apply overflow-x-hidden;
+  }
+  body {
+    @apply bg-background text-foreground has-[div[data-variant='inset']]:bg-sidebar min-h-svh w-full;
+  }
+
+  /* Override Radix scroll locking for sticky headers */
+  body[data-scroll-locked] {
+    overflow: unset !important;
+  }
+
+  /* Cursor pointer for buttons */
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+
+  /* Prevent focus zoom on mobile devices */
+  @media screen and (max-width: 767px) {
+    input,
+    select,
+    textarea {
+      font-size: 16px !important;
+    }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+}
+
+@utility no-scrollbar {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+@utility faded-bottom {
+  @apply after:pointer-events-none after:absolute after:start-0 after:bottom-0 after:hidden after:h-32 after:w-full after:rounded-b-2xl after:bg-[linear-gradient(180deg,_transparent_10%,_var(--background)_70%)] md:after:block;
+}
+
+/* styles.css */
+.CollapsibleContent {
+  overflow: hidden;
+}
+.CollapsibleContent[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+.CollapsibleContent[data-state='closed'] {
+  animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/styles/theme.css

@@ -0,0 +1,102 @@
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --sidebar: var(--background);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.14 0.04 259.21);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+}
+
+@theme inline {
+  --font-inter: 'Inter', 'sans-serif';
+  --font-manrope: 'Manrope', 'sans-serif';
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}

package/src/types/ai.ts

@@ -0,0 +1,191 @@
+/**
+ * AI Provider 타입 정의
+ * @module types/ai
+ */
+
+// =============================================
+// Provider 타입
+// =============================================
+
+/** AI Provider 타입 */
+export type AIProvider = 'claude' | 'gemini' | 'codex' | 'qwen' | 'kilo' | 'opencode' | 'custom'
+
+/** Provider별 설정 정보 */
+export interface AIProviderConfig {
+  id: AIProvider
+  name: string
+  icon: string
+  enabled: boolean
+  available: boolean
+  selectedModel?: string
+  availableModels: string[]
+  order: number
+}
+
+// =============================================
+// 실행 상태 타입
+// =============================================
+
+/** AI 실행 상태 */
+export type AIExecutionStatus = 'idle' | 'running' | 'completed' | 'error'
+
+/** AI 메시지 타입 */
+export type AIMessageType = 'start' | 'output' | 'text' | 'stderr' | 'complete' | 'error'
+
+/** AI SSE 메시지 */
+export interface AIMessage {
+  /** 메시지 타입 */
+  type: AIMessageType
+  /** 실행 ID */
+  runId?: string
+  /** Provider */
+  provider?: AIProvider
+  /** 모델 */
+  model?: string
+  /** Task ID */
+  taskId?: string
+  /** Change ID */
+  changeId?: string
+  /** 데이터 (tool_use 등) */
+  data?: {
+    type?: string
+    message?: { content?: string }
+    name?: string
+    input?: Record<string, unknown>
+    content?: string
+  }
+  /** 텍스트 내용 */
+  content?: string
+  /** 완료 상태 */
+  status?: 'completed' | 'error'
+  /** 종료 코드 */
+  exitCode?: number
+  /** 에러 메시지 */
+  message?: string
+  /** 타임스탬프 */
+  timestamp?: string
+}
+
+/** AI 실행 정보 */
+export interface AIExecution {
+  /** 실행 ID */
+  runId: string | null
+  /** Provider */
+  provider: AIProvider | null
+  /** 모델 */
+  model: string | null
+  /** 상태 */
+  status: AIExecutionStatus
+  /** 메시지 목록 */
+  messages: AIMessage[]
+  /** 에러 */
+  error: string | null
+}
+
+// =============================================
+// 요청/응답 타입
+// =============================================
+
+/** AI 실행 요청 파라미터 */
+export interface AIExecuteParams {
+  /** AI Provider */
+  provider: AIProvider
+  /** 모델 (선택, 미지정 시 기본 모델 사용) */
+  model?: string
+  /** Change ID */
+  changeId: string
+  /** Task ID */
+  taskId: string
+  /** Task Title */
+  taskTitle: string
+  /** 추가 컨텍스트 */
+  context?: string
+}
+
+/** Provider 목록 응답 */
+export interface AIProvidersResponse {
+  providers: AIProviderConfig[]
+}
+
+// =============================================
+// 유틸리티 타입
+// =============================================
+
+/** Provider별 아이콘 매핑 */
+export const PROVIDER_ICONS: Record<AIProvider, string> = {
+  claude: '🤖',
+  gemini: '💎',
+  codex: '🧠',
+  qwen: '🌟',
+  kilo: '⚡',
+  opencode: '🔓',
+  custom: '🔧',
+}
+
+/** Provider별 기본 모델 */
+export const DEFAULT_MODELS: Record<AIProvider, string> = {
+  claude: 'sonnet',
+  gemini: 'gemini-2.5-flash',
+  codex: 'gpt-5.1-codex',
+  qwen: 'qwen-coder-plus',
+  kilo: '',
+  opencode: '',
+  custom: '',
+}
+
+// =============================================
+// Consensus 타입
+// =============================================
+
+/** Consensus 전략 */
+export type ConsensusStrategy =
+  | 'majority'     // 다수결 (가장 많이 나온 결과 채택)
+  | 'weighted'     // 가중 투표 (Provider별 신뢰도 기반)
+  | 'unanimous'    // 만장일치 (모든 AI가 동의해야 함)
+  | 'best-of-n'    // N개 중 최고 품질 선택
+
+/** Consensus 설정 */
+export interface ConsensusConfig {
+  strategy: ConsensusStrategy
+  providers: AIProvider[]
+  /** 가중치 (weighted 전략용) */
+  weights?: Partial<Record<AIProvider, number>>
+  /** 최소 합의 비율 (0-1) */
+  threshold?: number
+  /** 타임아웃 (ms) */
+  timeout?: number
+}
+
+/** 개별 Provider 결과 */
+export interface ProviderResult {
+  provider: AIProvider
+  model?: string
+  success: boolean
+  output: string
+  confidence?: number
+  duration: number
+  error?: string
+}
+
+/** Consensus 결과 */
+export interface ConsensusResult {
+  success: boolean
+  strategy: ConsensusStrategy
+  finalOutput: string
+  confidence: number
+  providerResults: ProviderResult[]
+  agreement: number
+  metadata: {
+    totalProviders: number
+    successfulProviders: number
+    averageDuration: number
+  }
+}
+
+/** Consensus 추천 정보 */
+export interface ConsensusRecommendation {
+  shouldUseConsensus: boolean
+  strategy: ConsensusStrategy
+  providers: AIProvider[]
+  reason: string
+}