zyflow 0.6.4

package/src/components/flow/task-execution/ModelSelector.tsx

@@ -0,0 +1,134 @@
+/**
+ * Model Selector Component
+ *
+ * AI Model 선택 UI
+ */
+
+import { CheckCircle2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { MODEL_OPTIONS, type ModelSelectorProps } from './types'
+
+export function ModelSelector({
+  providers,
+  selectedProvider,
+  selectedModel,
+  onSelect,
+}: ModelSelectorProps) {
+  const provider = providers.find(p => p.id === selectedProvider)
+
+  if (!provider || provider.availableModels.length === 0) {
+    return null
+  }
+
+  // Claude의 경우 기존 카드 스타일 UI 사용
+  if (selectedProvider === 'claude') {
+    return (
+      <div className="space-y-2 mt-4">
+        <label className="text-sm font-medium">모델 선택</label>
+        <div className="space-y-2">
+          {MODEL_OPTIONS.map((option) => {
+            const Icon = option.icon
+            const isSelected = selectedModel === option.value
+
+            return (
+              <button
+                key={option.value}
+                onClick={() => onSelect(option.value)}
+                className={cn(
+                  'w-full p-3 rounded-lg border-2 text-left transition-all',
+                  isSelected
+                    ? 'border-primary bg-primary/5'
+                    : 'border-muted hover:border-muted-foreground/50'
+                )}
+              >
+                <div className="flex items-center gap-3">
+                  <Icon className={cn('h-4 w-4', isSelected ? 'text-primary' : 'text-muted-foreground')} />
+                  <div className="flex-1">
+                    <div className="font-medium text-sm">{option.label}</div>
+                    <div className="text-xs text-muted-foreground">{option.description}</div>
+                  </div>
+                  {isSelected && <CheckCircle2 className="h-4 w-4 text-primary" />}
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+
+  // 다른 Provider의 경우 심플한 리스트 스타일
+  return (
+    <div className="space-y-2 mt-4">
+      <label className="text-sm font-medium">모델 선택</label>
+      <div className="space-y-2">
+        {provider.availableModels.map((model) => {
+          const isSelected = selectedModel === model
+
+          return (
+            <button
+              key={model}
+              onClick={() => onSelect(model)}
+              className={cn(
+                'w-full p-2 rounded-lg border text-left transition-all text-sm',
+                isSelected
+                  ? 'border-primary bg-primary/5'
+                  : 'border-muted hover:border-muted-foreground/50'
+              )}
+            >
+              <div className="flex items-center justify-between">
+                <span className="font-mono">{model}</span>
+                {isSelected && <CheckCircle2 className="h-4 w-4 text-primary" />}
+              </div>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Compact Model Selector (for Swarm mode)
+ */
+export function CompactModelSelector({
+  providers,
+  selectedProvider,
+  selectedModel,
+  onSelect,
+}: ModelSelectorProps) {
+  const provider = providers.find(p => p.id === selectedProvider)
+
+  if (!provider || provider.availableModels.length === 0) {
+    return null
+  }
+
+  return (
+    <div>
+      <label className="text-sm font-medium mb-2 block">모델 선택</label>
+      <div className="grid gap-1">
+        {provider.availableModels.map((model) => {
+          const isSelected = selectedModel === model
+
+          return (
+            <button
+              key={model}
+              onClick={() => onSelect(model)}
+              className={cn(
+                'w-full p-2 rounded border text-left text-sm transition-all',
+                isSelected
+                  ? 'border-primary bg-primary/5'
+                  : 'border-muted hover:border-muted-foreground/50'
+              )}
+            >
+              <div className="flex items-center justify-between">
+                <span className="font-mono text-xs">{model}</span>
+                {isSelected && <CheckCircle2 className="h-3 w-3 text-primary" />}
+              </div>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/flow/task-execution/ProviderSelector.tsx

@@ -0,0 +1,137 @@
+/**
+ * Provider Selector Component
+ *
+ * AI Provider 선택 UI
+ */
+
+import { Loader2, CheckCircle2, AlertCircle } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+import type { ProviderSelectorProps } from './types'
+
+export function ProviderSelector({
+  providers,
+  selectedProvider,
+  onSelect,
+  loading = false,
+}: ProviderSelectorProps) {
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 text-muted-foreground py-4">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        <span>Provider 목록 로드 중...</span>
+      </div>
+    )
+  }
+
+  if (providers.length === 0) {
+    return (
+      <div className="flex items-center gap-2 text-muted-foreground py-4">
+        <AlertCircle className="h-4 w-4" />
+        <span>사용 가능한 Provider가 없습니다</span>
+      </div>
+    )
+  }
+
+  const enabledProviders = providers.filter(p => p.enabled)
+
+  return (
+    <div className="grid gap-2">
+      {enabledProviders.map((provider) => {
+        const isSelected = selectedProvider === provider.id
+        const isDisabled = !provider.available
+
+        return (
+          <button
+            key={provider.id}
+            onClick={() => !isDisabled && onSelect(provider.id)}
+            disabled={isDisabled}
+            className={cn(
+              'w-full p-3 rounded-lg border-2 text-left transition-all',
+              isDisabled && 'opacity-50 cursor-not-allowed',
+              isSelected && !isDisabled
+                ? 'border-primary bg-primary/5'
+                : 'border-muted hover:border-muted-foreground/50'
+            )}
+          >
+            <div className="flex items-center gap-3">
+              <span className="text-xl">{provider.icon}</span>
+              <div className="flex-1 min-w-0">
+                <div className="font-medium flex items-center gap-2">
+                  {provider.name}
+                  {!provider.available && (
+                    <Badge variant="outline" className="text-[10px] py-0">미설치</Badge>
+                  )}
+                </div>
+                {provider.availableModels.length > 0 && (
+                  <div className="text-xs text-muted-foreground truncate">
+                    {provider.availableModels.slice(0, 3).join(', ')}
+                  </div>
+                )}
+              </div>
+              {isSelected && provider.available && (
+                <CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
+              )}
+            </div>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+/**
+ * Compact Provider Selector (for Swarm mode)
+ */
+export function CompactProviderSelector({
+  providers,
+  selectedProvider,
+  onSelect,
+  loading = false,
+}: ProviderSelectorProps) {
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 text-muted-foreground py-2">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        <span>Provider 목록 로드 중...</span>
+      </div>
+    )
+  }
+
+  const enabledProviders = providers.filter(p => p.enabled)
+
+  return (
+    <div className="grid gap-2">
+      {enabledProviders.map((provider) => {
+        const isSelected = selectedProvider === provider.id
+        const isDisabled = !provider.available
+
+        return (
+          <button
+            key={provider.id}
+            onClick={() => !isDisabled && onSelect(provider.id)}
+            disabled={isDisabled}
+            className={cn(
+              'w-full p-2 rounded-lg border text-left transition-all',
+              isDisabled && 'opacity-50 cursor-not-allowed',
+              isSelected && !isDisabled
+                ? 'border-primary bg-primary/5'
+                : 'border-muted hover:border-muted-foreground/50'
+            )}
+          >
+            <div className="flex items-center gap-2">
+              <span>{provider.icon}</span>
+              <span className="flex-1 text-sm">{provider.name}</span>
+              {!provider.available && (
+                <Badge variant="outline" className="text-[10px] py-0">미설치</Badge>
+              )}
+              {isSelected && provider.available && (
+                <CheckCircle2 className="h-4 w-4 text-primary" />
+              )}
+            </div>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/flow/task-execution/RecommendationBanner.tsx

@@ -0,0 +1,71 @@
+/**
+ * Recommendation Banner Component
+ *
+ * 자동 추천 배너 UI
+ */
+
+import { Lightbulb } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { getTaskTypeInfo, type TaskRecommendation } from '@/utils/task-routing'
+
+export interface RecommendationBannerProps {
+  recommendation: TaskRecommendation
+  taskTitle: string
+  onApply: () => void
+  onHide: () => void
+}
+
+export function RecommendationBanner({
+  recommendation,
+  taskTitle,
+  onApply,
+  onHide,
+}: RecommendationBannerProps) {
+  const taskTypeInfo = getTaskTypeInfo(taskTitle)
+
+  return (
+    <div className="bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg p-3 mb-2">
+      <div className="flex items-start gap-2">
+        <Lightbulb className="h-4 w-4 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-sm font-medium text-amber-800 dark:text-amber-200">
+              자동 추천 ({taskTypeInfo.emoji} {taskTypeInfo.label})
+            </span>
+            <button
+              onClick={onHide}
+              className="text-amber-600 dark:text-amber-400 hover:text-amber-800 dark:hover:text-amber-200 text-xs"
+            >
+              숨기기
+            </button>
+          </div>
+          <p className="text-xs text-amber-700 dark:text-amber-300 mt-1">
+            {recommendation.reason}
+          </p>
+          <div className="flex items-center gap-2 mt-2">
+            <Badge variant="outline" className="text-xs border-amber-300 dark:border-amber-700">
+              {recommendation.mode === 'single' ? '단일 실행' : 'Swarm 실행'}
+            </Badge>
+            <Badge variant="outline" className="text-xs border-amber-300 dark:border-amber-700">
+              {recommendation.provider} / {recommendation.model || 'default'}
+            </Badge>
+            {recommendation.strategy && (
+              <Badge variant="outline" className="text-xs border-amber-300 dark:border-amber-700">
+                {recommendation.strategy}
+              </Badge>
+            )}
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={onApply}
+              className="ml-auto h-6 text-xs border-amber-300 dark:border-amber-700 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900"
+            >
+              적용
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/flow/task-execution/StatusBadge.tsx

@@ -0,0 +1,43 @@
+/**
+ * Status Badge Component
+ *
+ * 실행 상태 배지 표시
+ */
+
+import { CheckCircle2, XCircle, Loader2 } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+
+export type ExecutionStatus = 'idle' | 'running' | 'completed' | 'error' | 'failed' | 'stopped'
+
+export interface StatusBadgeProps {
+  status: ExecutionStatus
+}
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+  switch (status) {
+    case 'running':
+      return (
+        <Badge variant="default" className="bg-blue-500">
+          <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+          실행 중
+        </Badge>
+      )
+    case 'completed':
+      return (
+        <Badge variant="default" className="bg-green-500">
+          <CheckCircle2 className="h-3 w-3 mr-1" />
+          완료
+        </Badge>
+      )
+    case 'error':
+    case 'failed':
+      return (
+        <Badge variant="destructive">
+          <XCircle className="h-3 w-3 mr-1" />
+          오류
+        </Badge>
+      )
+    default:
+      return null
+  }
+}

package/src/components/flow/task-execution/StrategySelector.tsx

@@ -0,0 +1,48 @@
+/**
+ * Strategy Selector Component
+ *
+ * Swarm Strategy 선택 UI
+ */
+
+import { CheckCircle2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { SwarmStrategy } from '@/hooks/useSwarm'
+import { STRATEGY_OPTIONS } from './types'
+
+export interface StrategySelectorProps {
+  strategy: SwarmStrategy
+  onSelect: (strategy: SwarmStrategy) => void
+}
+
+export function StrategySelector({ strategy, onSelect }: StrategySelectorProps) {
+  return (
+    <div>
+      <label className="text-sm font-medium mb-2 block">Strategy 선택</label>
+      <div className="grid gap-2">
+        {STRATEGY_OPTIONS.map((option) => {
+          const isSelected = strategy === option.value
+          return (
+            <button
+              key={option.value}
+              onClick={() => onSelect(option.value)}
+              className={cn(
+                'w-full p-3 rounded-lg border-2 text-left transition-all',
+                isSelected
+                  ? 'border-primary bg-primary/5'
+                  : 'border-muted hover:border-muted-foreground/50'
+              )}
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="font-medium">{option.label}</div>
+                  <div className="text-xs text-muted-foreground">{option.description}</div>
+                </div>
+                {isSelected && <CheckCircle2 className="h-5 w-5 text-primary" />}
+              </div>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/flow/task-execution/SwarmSummary.tsx

@@ -0,0 +1,55 @@
+/**
+ * Swarm Summary Component
+ *
+ * Swarm 설정 요약 표시
+ */
+
+import { Settings2 } from 'lucide-react'
+import type { AIProviderConfig } from '@/hooks/useAI'
+import type { SwarmStrategy } from '@/hooks/useSwarm'
+import type { ConsensusStrategy } from '@/types/ai'
+
+export interface SwarmSummaryProps {
+  providers: AIProviderConfig[]
+  swarmProvider: string
+  swarmModel: string
+  strategy: SwarmStrategy
+  maxAgents: number
+  consensusEnabled?: boolean
+  consensusStrategy?: ConsensusStrategy
+  consensusProviders?: Set<string>
+}
+
+export function SwarmSummary({
+  providers,
+  swarmProvider,
+  swarmModel,
+  strategy,
+  maxAgents,
+  consensusEnabled,
+  consensusStrategy,
+  consensusProviders,
+}: SwarmSummaryProps) {
+  const providerName = providers.find(p => p.id === swarmProvider)?.name || swarmProvider
+
+  return (
+    <div className="bg-muted/50 rounded-lg p-3 text-sm">
+      <div className="flex items-center gap-2 text-muted-foreground mb-1">
+        <Settings2 className="h-4 w-4" />
+        <span className="font-medium">Swarm 설정 요약</span>
+      </div>
+      <ul className="text-xs space-y-1 text-muted-foreground">
+        <li>Provider: <span className="text-foreground">{providerName}</span></li>
+        <li>Model: <span className="text-foreground">{swarmModel}</span></li>
+        <li>Strategy: <span className="text-foreground">{strategy}</span></li>
+        <li>Max Agents: <span className="text-foreground">{maxAgents}</span></li>
+        <li>Mode: <span className="text-foreground">single task</span></li>
+        {consensusEnabled && consensusProviders && consensusProviders.size >= 2 && (
+          <li className="text-purple-600 dark:text-purple-400">
+            Consensus: <span className="text-foreground">{consensusStrategy} ({consensusProviders.size} providers)</span>
+          </li>
+        )}
+      </ul>
+    </div>
+  )
+}

package/src/components/flow/task-execution/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Task Execution Components - Barrel Export
+ */
+
+export * from './types'
+export * from './ProviderSelector'
+export * from './ModelSelector'
+export * from './StrategySelector'
+export * from './AgentSlider'
+export * from './ConsensusSettings'
+export * from './SwarmSummary'
+export * from './RecommendationBanner'
+export * from './ExecutionOutput'
+export * from './StatusBadge'

package/src/components/flow/task-execution/types.ts

@@ -0,0 +1,56 @@
+/**
+ * Task Execution Dialog 공용 타입
+ */
+
+import type { ClaudeModel } from '@/hooks/useClaude'
+import type { SwarmStrategy } from '@/hooks/useSwarm'
+import type { AIProviderConfig } from '@/hooks/useAI'
+import type { ConsensusStrategy } from '@/types/ai'
+import { Zap, Sparkles, Crown } from 'lucide-react'
+
+export type ExecutionMode = 'single' | 'swarm'
+
+export const MODEL_OPTIONS: { value: ClaudeModel; label: string; description: string; icon: typeof Zap }[] = [
+  { value: 'haiku', label: 'Haiku', description: '빠르고 저렴 (단순 태스크)', icon: Zap },
+  { value: 'sonnet', label: 'Sonnet', description: '균형 잡힌 성능 (권장)', icon: Sparkles },
+  { value: 'opus', label: 'Opus', description: '최고 품질 (복잡한 태스크)', icon: Crown },
+]
+
+export const STRATEGY_OPTIONS: { value: SwarmStrategy; label: string; description: string }[] = [
+  { value: 'development', label: 'Development', description: '코드 구현 중심 (권장)' },
+  { value: 'research', label: 'Research', description: '분석 및 조사 중심' },
+  { value: 'testing', label: 'Testing', description: '테스트 및 검증 중심' },
+]
+
+export const CONSENSUS_STRATEGY_OPTIONS: { value: ConsensusStrategy; label: string; description: string; icon: string }[] = [
+  { value: 'majority', label: '다수결', description: '가장 많이 선택된 결과 채택', icon: '🗳️' },
+  { value: 'weighted', label: '가중 투표', description: 'Provider별 신뢰도 기반', icon: '⚖️' },
+  { value: 'best-of-n', label: 'Best-of-N', description: 'N개 중 최고 품질 선택', icon: '🏆' },
+  { value: 'unanimous', label: '만장일치', description: '모든 AI가 동의해야 함', icon: '🤝' },
+]
+
+export interface ProviderSelectorProps {
+  providers: AIProviderConfig[]
+  selectedProvider: string
+  onSelect: (providerId: string) => void
+  loading?: boolean
+}
+
+export interface ModelSelectorProps {
+  providers: AIProviderConfig[]
+  selectedProvider: string
+  selectedModel: string
+  onSelect: (model: string) => void
+}
+
+export interface ConsensusSettingsProps {
+  providers: AIProviderConfig[]
+  enabled: boolean
+  onEnabledChange: (enabled: boolean) => void
+  strategy: ConsensusStrategy
+  onStrategyChange: (strategy: ConsensusStrategy) => void
+  selectedProviders: Set<string>
+  onToggleProvider: (providerId: string) => void
+  threshold: number
+  onThresholdChange: (threshold: number) => void
+}