zyflow 0.6.4

package/src/components/flow/index.ts

@@ -0,0 +1,9 @@
+export { FlowPage } from './FlowPage'
+export { FlowContent } from './FlowContent'
+export { ChangeList } from './ChangeList'
+export { ChangeItem } from './ChangeItem'
+export { ChangeDetail } from './ChangeDetail'
+export { PipelineBar } from './PipelineBar'
+export { StageContent } from './StageContent'
+export { ProjectDashboard } from './ProjectDashboard'
+export { StandaloneTasks } from './StandaloneTasks'

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

@@ -0,0 +1,37 @@
+/**
+ * Agent Slider Component
+ *
+ * 최대 에이전트 수 슬라이더 UI
+ */
+
+import { Slider } from '@/components/ui/slider'
+
+export interface AgentSliderProps {
+  value: number
+  onChange: (value: number) => void
+  min?: number
+  max?: number
+}
+
+export function AgentSlider({ value, onChange, min = 1, max = 10 }: AgentSliderProps) {
+  return (
+    <div>
+      <label className="text-sm font-medium mb-2 block flex items-center justify-between">
+        <span>최대 에이전트 수</span>
+        <span className="text-muted-foreground">{value}</span>
+      </label>
+      <Slider
+        value={[value]}
+        onValueChange={([v]: number[]) => onChange(v)}
+        min={min}
+        max={max}
+        step={1}
+        className="mt-2"
+      />
+      <div className="flex justify-between text-xs text-muted-foreground mt-1">
+        <span>{min} (빠름)</span>
+        <span>{max} (병렬)</span>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,129 @@
+/**
+ * Consensus Settings Component
+ *
+ * 다중 AI 합의 설정 UI
+ */
+
+import { CheckCircle2, Handshake } from 'lucide-react'
+import { Slider } from '@/components/ui/slider'
+import { Switch } from '@/components/ui/switch'
+import { cn } from '@/lib/utils'
+import { CONSENSUS_STRATEGY_OPTIONS, type ConsensusSettingsProps } from './types'
+
+export function ConsensusSettings({
+  providers,
+  enabled,
+  onEnabledChange,
+  strategy,
+  onStrategyChange,
+  selectedProviders,
+  onToggleProvider,
+  threshold,
+  onThresholdChange,
+}: ConsensusSettingsProps) {
+  const availableProviders = providers.filter(p => p.enabled && p.available)
+
+  return (
+    <div className="border rounded-lg p-4">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <Handshake className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">다중 AI 합의 (Consensus)</span>
+        </div>
+        <Switch
+          checked={enabled}
+          onCheckedChange={onEnabledChange}
+        />
+      </div>
+
+      {enabled && (
+        <div className="space-y-4 pt-2 border-t">
+          {/* Consensus Provider 선택 */}
+          <div>
+            <label className="text-xs font-medium mb-2 block text-muted-foreground">
+              합의에 참여할 Provider 선택 (최소 2개)
+            </label>
+            <div className="grid grid-cols-2 gap-2">
+              {availableProviders.map((provider) => {
+                const isSelected = selectedProviders.has(provider.id)
+                return (
+                  <button
+                    key={provider.id}
+                    onClick={() => onToggleProvider(provider.id)}
+                    className={cn(
+                      'p-2 rounded border text-left text-xs transition-all',
+                      isSelected
+                        ? 'border-purple-500 bg-purple-50 dark:bg-purple-950/30'
+                        : 'border-muted hover:border-muted-foreground/50'
+                    )}
+                  >
+                    <div className="flex items-center gap-2">
+                      <span>{provider.icon}</span>
+                      <span className="flex-1">{provider.name}</span>
+                      {isSelected && <CheckCircle2 className="h-3 w-3 text-purple-500" />}
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+            {selectedProviders.size < 2 && (
+              <p className="text-xs text-amber-600 dark:text-amber-400 mt-1">
+                Consensus를 사용하려면 최소 2개의 Provider가 필요합니다
+              </p>
+            )}
+          </div>
+
+          {/* Consensus 전략 */}
+          <div>
+            <label className="text-xs font-medium mb-2 block text-muted-foreground">합의 전략</label>
+            <div className="grid grid-cols-2 gap-2">
+              {CONSENSUS_STRATEGY_OPTIONS.map((option) => {
+                const isSelected = strategy === option.value
+                return (
+                  <button
+                    key={option.value}
+                    onClick={() => onStrategyChange(option.value)}
+                    className={cn(
+                      'p-2 rounded border text-left text-xs transition-all',
+                      isSelected
+                        ? 'border-purple-500 bg-purple-50 dark:bg-purple-950/30'
+                        : 'border-muted hover:border-muted-foreground/50'
+                    )}
+                  >
+                    <div className="flex items-center gap-2">
+                      <span>{option.icon}</span>
+                      <div className="flex-1">
+                        <div className="font-medium">{option.label}</div>
+                        <div className="text-[10px] text-muted-foreground">{option.description}</div>
+                      </div>
+                      {isSelected && <CheckCircle2 className="h-3 w-3 text-purple-500" />}
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* 합의 임계값 */}
+          <div>
+            <label className="text-xs font-medium mb-2 block flex items-center justify-between text-muted-foreground">
+              <span>합의 임계값</span>
+              <span className="text-foreground">{Math.round(threshold * 100)}%</span>
+            </label>
+            <Slider
+              value={[threshold * 100]}
+              onValueChange={([value]) => onThresholdChange(value / 100)}
+              min={50}
+              max={100}
+              step={5}
+            />
+            <div className="flex justify-between text-[10px] text-muted-foreground mt-1">
+              <span>50% (낮음)</span>
+              <span>100% (엄격)</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,398 @@
+/**
+ * Execution Output Component
+ *
+ * AI/Swarm 실행 로그 및 결과 표시
+ */
+
+import { useRef, useEffect } from 'react'
+import {
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  Terminal,
+  Play,
+  Handshake,
+  Trophy,
+  Percent,
+  Clock,
+} from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { cn } from '@/lib/utils'
+import type { AIMessage, AIProviderConfig } from '@/hooks/useAI'
+import type { SwarmLogEntry } from '@/types'
+import { PROVIDER_ICONS, type ProviderResult, type ConsensusResult } from '@/types/ai'
+
+export interface ExecutionOutputProps {
+  mode: 'single' | 'swarm'
+  // Single mode props
+  aiMessages?: AIMessage[]
+  aiStatus?: string
+  aiError?: string | null
+  selectedProvider?: string
+  selectedModel?: string
+  // Swarm mode props
+  swarmLogs?: SwarmLogEntry[]
+  swarmStatus?: string
+  swarmProgress?: number
+  swarmError?: string | null
+  swarmProvider?: string
+  strategy?: string
+  maxAgents?: number
+  consensusResult?: ConsensusResult | null
+  // Common
+  providers: AIProviderConfig[]
+}
+
+export function ExecutionOutput({
+  mode,
+  aiMessages = [],
+  aiStatus,
+  aiError,
+  selectedProvider,
+  selectedModel,
+  swarmLogs = [],
+  swarmStatus,
+  swarmProgress = 0,
+  swarmError,
+  swarmProvider,
+  strategy,
+  maxAgents,
+  consensusResult,
+  providers,
+}: ExecutionOutputProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  // 자동 스크롤
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [aiMessages, swarmLogs])
+
+  // 메시지 렌더링 (단일 실행)
+  const renderAIMessage = (msg: AIMessage, index: number) => {
+    if (msg.type === 'start') {
+      return (
+        <div key={index} className="flex items-center gap-2 text-blue-500 text-sm">
+          <Play className="h-3 w-3" />
+          <span>실행 시작 ({msg.provider} / {msg.model})</span>
+        </div>
+      )
+    }
+
+    if (msg.type === 'output' && msg.data) {
+      const { data } = msg
+
+      // Assistant message
+      if (data.type === 'assistant' && data.message?.content) {
+        const content = data.message.content
+        const textContent = Array.isArray(content)
+          ? content
+              .filter((c: { type: string }) => c.type === 'text')
+              .map((c: { text: string }) => c.text)
+              .join('\n')
+          : typeof content === 'string'
+            ? content
+            : JSON.stringify(content)
+
+        if (!textContent) return null
+
+        return (
+          <div key={index} className="bg-muted/50 rounded p-2 text-xs leading-relaxed whitespace-pre-wrap">
+            {textContent}
+          </div>
+        )
+      }
+
+      // Tool use
+      if (data.type === 'tool_use') {
+        return (
+          <div key={index} className="border rounded p-2 text-xs">
+            <div className="flex items-center gap-1.5 text-muted-foreground mb-1">
+              <Terminal className="h-3 w-3 flex-shrink-0" />
+              <span className="font-mono truncate">{data.name}</span>
+            </div>
+            {data.input && (
+              <pre className="text-[10px] bg-muted p-1.5 rounded overflow-x-auto max-h-32">
+                {JSON.stringify(data.input, null, 2)}
+              </pre>
+            )}
+          </div>
+        )
+      }
+
+      // Tool result
+      if (data.type === 'tool_result') {
+        return (
+          <div key={index} className="border-l-2 border-green-500/50 pl-3 text-xs text-muted-foreground">
+            <span>Tool 결과 수신</span>
+          </div>
+        )
+      }
+    }
+
+    if (msg.type === 'text') {
+      return null
+    }
+
+    if (msg.type === 'stderr' && msg.content) {
+      return (
+        <div key={index} className="text-sm text-orange-500 font-mono">
+          {msg.content}
+        </div>
+      )
+    }
+
+    if (msg.type === 'error') {
+      return (
+        <div key={index} className="flex items-center gap-2 text-red-500 text-sm">
+          <XCircle className="h-3 w-3" />
+          <span>{msg.message || '오류 발생'}</span>
+        </div>
+      )
+    }
+
+    if (msg.type === 'complete') {
+      return (
+        <div
+          key={index}
+          className={cn(
+            'flex items-center gap-2 text-sm mt-2',
+            msg.status === 'completed' ? 'text-green-500' : 'text-red-500'
+          )}
+        >
+          {msg.status === 'completed' ? (
+            <>
+              <CheckCircle2 className="h-4 w-4" />
+              <span>실행 완료</span>
+            </>
+          ) : (
+            <>
+              <XCircle className="h-4 w-4" />
+              <span>실행 실패 (코드: {msg.exitCode})</span>
+            </>
+          )}
+        </div>
+      )
+    }
+
+    return null
+  }
+
+  return (
+    <ScrollArea className="flex-1 min-h-0 h-[50vh] rounded-lg border bg-background/50 p-3">
+      <div ref={scrollRef} className="space-y-2 pr-4">
+        {/* 실행 정보 표시 */}
+        <div className="flex items-center gap-2 text-xs text-muted-foreground mb-2 pb-2 border-b">
+          {mode === 'single' ? (
+            <>
+              <span className="text-lg">{providers.find(p => p.id === selectedProvider)?.icon || '🤖'}</span>
+              <span>
+                {providers.find(p => p.id === selectedProvider)?.name || selectedProvider}
+                {selectedModel && ` / ${selectedModel}`}
+              </span>
+            </>
+          ) : (
+            <>
+              <span className="text-lg">{providers.find(p => p.id === swarmProvider)?.icon || '🐝'}</span>
+              <span>Swarm ({strategy}) / {providers.find(p => p.id === swarmProvider)?.name || swarmProvider} / {maxAgents} agents</span>
+            </>
+          )}
+        </div>
+
+        {/* 단일 실행 로그 */}
+        {mode === 'single' && (
+          <>
+            {aiMessages.map((msg, i) => renderAIMessage(msg, i))}
+
+            {aiStatus === 'running' && aiMessages.length === 0 && (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span>AI 실행 준비 중...</span>
+              </div>
+            )}
+
+            {aiError && aiStatus === 'error' && (
+              <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 text-sm text-red-500">
+                {aiError}
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Swarm 실행 로그 */}
+        {mode === 'swarm' && (
+          <>
+            {swarmLogs.map((log, i) => (
+              <div key={i} className="text-xs">
+                <span className="text-muted-foreground">
+                  [{new Date(log.timestamp).toLocaleTimeString()}]
+                </span>{' '}
+                <span className={cn(
+                  log.type === 'error' && 'text-red-500',
+                  log.type === 'assistant' && 'text-blue-500',
+                  log.type === 'tool_use' && 'text-yellow-500',
+                )}>
+                  {log.content}
+                </span>
+              </div>
+            ))}
+
+            {swarmStatus === 'running' && swarmLogs.length === 0 && (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span>Swarm 실행 준비 중...</span>
+              </div>
+            )}
+
+            {swarmProgress > 0 && (
+              <div className="mt-2 pt-2 border-t">
+                <div className="flex items-center justify-between text-xs mb-1">
+                  <span>진행률</span>
+                  <span>{swarmProgress}%</span>
+                </div>
+                <div className="h-2 bg-muted rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-primary transition-all duration-300"
+                    style={{ width: `${swarmProgress}%` }}
+                  />
+                </div>
+              </div>
+            )}
+
+            {swarmError && swarmStatus === 'failed' && (
+              <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 text-sm text-red-500">
+                {swarmError}
+              </div>
+            )}
+
+            {/* Consensus 결과 표시 */}
+            {consensusResult && (
+              <ConsensusResultDisplay result={consensusResult} />
+            )}
+          </>
+        )}
+      </div>
+    </ScrollArea>
+  )
+}
+
+// Consensus 결과 표시 컴포넌트
+function ConsensusResultDisplay({ result }: { result: ConsensusResult }) {
+  return (
+    <div className="mt-4 pt-4 border-t space-y-3">
+      <div className="flex items-center gap-2">
+        <Handshake className="h-4 w-4 text-purple-500" />
+        <span className="text-sm font-medium">Consensus 결과</span>
+        <Badge
+          variant={result.success ? 'default' : 'destructive'}
+          className={result.success ? 'bg-green-500' : ''}
+        >
+          {result.success ? '합의 성공' : '합의 실패'}
+        </Badge>
+      </div>
+
+      {/* 합의 요약 */}
+      <div className="grid grid-cols-3 gap-2 text-xs">
+        <div className="bg-muted/50 rounded p-2 text-center">
+          <div className="flex items-center justify-center gap-1 text-muted-foreground mb-1">
+            <Percent className="h-3 w-3" />
+            <span>합의율</span>
+          </div>
+          <span className="font-medium text-foreground">
+            {Math.round(result.agreement * 100)}%
+          </span>
+        </div>
+        <div className="bg-muted/50 rounded p-2 text-center">
+          <div className="flex items-center justify-center gap-1 text-muted-foreground mb-1">
+            <Trophy className="h-3 w-3" />
+            <span>신뢰도</span>
+          </div>
+          <span className="font-medium text-foreground">
+            {Math.round(result.confidence * 100)}%
+          </span>
+        </div>
+        <div className="bg-muted/50 rounded p-2 text-center">
+          <div className="flex items-center justify-center gap-1 text-muted-foreground mb-1">
+            <Clock className="h-3 w-3" />
+            <span>평균 시간</span>
+          </div>
+          <span className="font-medium text-foreground">
+            {(result.metadata.averageDuration / 1000).toFixed(1)}s
+          </span>
+        </div>
+      </div>
+
+      {/* Provider별 결과 */}
+      <div className="space-y-2">
+        <span className="text-xs text-muted-foreground">Provider별 결과</span>
+        {result.providerResults.map((providerResult: ProviderResult, i: number) => {
+          const isWinner = providerResult.output === result.finalOutput
+          return (
+            <div
+              key={i}
+              className={cn(
+                'border rounded-lg p-2 text-xs',
+                isWinner && 'border-purple-500 bg-purple-50 dark:bg-purple-950/30',
+                !providerResult.success && 'border-red-300 bg-red-50 dark:bg-red-950/30'
+              )}
+            >
+              <div className="flex items-center justify-between mb-1">
+                <div className="flex items-center gap-2">
+                  <span>{PROVIDER_ICONS[providerResult.provider] || '🤖'}</span>
+                  <span className="font-medium">{providerResult.provider}</span>
+                  {providerResult.model && (
+                    <span className="text-muted-foreground">/ {providerResult.model}</span>
+                  )}
+                  {isWinner && (
+                    <Badge className="bg-purple-500 text-[10px] px-1 py-0">
+                      <Trophy className="h-2.5 w-2.5 mr-0.5" />
+                      채택
+                    </Badge>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  {providerResult.confidence !== undefined && (
+                    <span className="text-muted-foreground">
+                      {Math.round(providerResult.confidence * 100)}%
+                    </span>
+                  )}
+                  <span className="text-muted-foreground">
+                    {(providerResult.duration / 1000).toFixed(1)}s
+                  </span>
+                  {providerResult.success ? (
+                    <CheckCircle2 className="h-3 w-3 text-green-500" />
+                  ) : (
+                    <XCircle className="h-3 w-3 text-red-500" />
+                  )}
+                </div>
+              </div>
+              {providerResult.error && (
+                <div className="text-red-500 text-[10px] mt-1">
+                  오류: {providerResult.error}
+                </div>
+              )}
+              {providerResult.success && providerResult.output && (
+                <div className="mt-1 pt-1 border-t text-[10px] text-muted-foreground max-h-20 overflow-y-auto">
+                  <pre className="whitespace-pre-wrap font-mono">
+                    {providerResult.output.length > 200
+                      ? `${providerResult.output.substring(0, 200)}...`
+                      : providerResult.output}
+                  </pre>
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      {/* 전략 정보 */}
+      <div className="text-xs text-muted-foreground">
+        전략: <span className="text-foreground font-medium">{result.strategy}</span>
+        {' | '}
+        성공: <span className="text-foreground">{result.metadata.successfulProviders}/{result.metadata.totalProviders}</span>
+      </div>
+    </div>
+  )
+}