zyflow 0.6.4

package/src/components/settings/SearchSettings.tsx

@@ -0,0 +1,272 @@
+/**
+ * Search Settings Component
+ *
+ * LEANN 인덱스 상태 및 관리 UI
+ */
+
+import { useState } from 'react'
+import { useLeannIndexStatus, useIndexProject } from '@/hooks/useLeannStatus'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  Loader2,
+  RefreshCw,
+  Database,
+  Check,
+  X,
+  AlertTriangle,
+  Search,
+} from 'lucide-react'
+import { toast } from 'sonner'
+import { cn } from '@/lib/utils'
+
+export function SearchSettings() {
+  const { data, isLoading, refetch } = useLeannIndexStatus()
+  const indexProject = useIndexProject()
+  const [indexingProjectId, setIndexingProjectId] = useState<string | null>(null)
+  const [isIndexingAll, setIsIndexingAll] = useState(false)
+
+  const handleIndex = async (project: {
+    projectId: string
+    projectName: string
+    projectPath: string
+  }) => {
+    setIndexingProjectId(project.projectId)
+    try {
+      await indexProject.mutateAsync({
+        projectPath: project.projectPath,
+        projectName: project.projectName,
+      })
+      toast.success(`${project.projectName} 인덱싱이 완료되었습니다`)
+      // 상태 갱신
+      refetch()
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : '인덱싱에 실패했습니다'
+      )
+    } finally {
+      setIndexingProjectId(null)
+    }
+  }
+
+  const handleIndexAll = async () => {
+    if (!data?.projects || isIndexingAll) return
+
+    const unindexedProjects = data.projects.filter((p) => !p.indexed)
+    if (unindexedProjects.length === 0) {
+      toast.info('모든 프로젝트가 이미 인덱싱되어 있습니다')
+      return
+    }
+
+    setIsIndexingAll(true)
+    let successCount = 0
+    let failCount = 0
+
+    for (const project of unindexedProjects) {
+      setIndexingProjectId(project.projectId)
+      try {
+        await indexProject.mutateAsync({
+          projectPath: project.projectPath,
+          projectName: project.projectName,
+        })
+        successCount++
+      } catch {
+        failCount++
+      }
+    }
+
+    setIndexingProjectId(null)
+    setIsIndexingAll(false)
+    refetch()
+
+    if (failCount === 0) {
+      toast.success(`${successCount}개 프로젝트 인덱싱이 완료되었습니다`)
+    } else {
+      toast.warning(`${successCount}개 성공, ${failCount}개 실패`)
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  const indexedCount = data?.projects.filter((p) => p.indexed).length ?? 0
+  const totalCount = data?.projects.length ?? 0
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-medium">시맨틱 검색 인덱스</h3>
+          <p className="text-sm text-muted-foreground">
+            LEANN을 사용한 AI 검색 인덱스 상태를 관리합니다.
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={() => refetch()}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          새로고침
+        </Button>
+      </div>
+
+      {/* Summary Card */}
+      <div className="p-4 bg-muted/30 rounded-lg border">
+        <div className="flex items-center gap-4">
+          <div className="p-3 bg-primary/10 rounded-lg">
+            <Search className="h-6 w-6 text-primary" />
+          </div>
+          <div className="flex-1">
+            <p className="font-medium">
+              {indexedCount} / {totalCount} 프로젝트 인덱싱됨
+            </p>
+            <p className="text-sm text-muted-foreground">
+              {indexedCount === 0
+                ? 'AI 시맨틱 검색을 사용하려면 프로젝트를 인덱싱하세요.'
+                : `${indexedCount}개 프로젝트에서 AI 검색을 사용할 수 있습니다.`}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            {indexedCount > 0 && (
+              <Badge variant="secondary" className="text-green-600">
+                <Database className="h-3 w-3 mr-1" />
+                활성
+              </Badge>
+            )}
+            {indexedCount < totalCount && data?.leannInstalled && (
+              <Button
+                size="sm"
+                onClick={handleIndexAll}
+                disabled={isIndexingAll || !!indexingProjectId}
+              >
+                {isIndexingAll ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                    전체 인덱싱 중...
+                  </>
+                ) : (
+                  <>
+                    <Database className="h-4 w-4 mr-2" />
+                    전체 인덱싱
+                  </>
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* LEANN Not Installed Warning */}
+      {data && !data.leannInstalled && (
+        <div className="p-4 bg-yellow-50 dark:bg-yellow-950/30 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-400 mt-0.5 shrink-0" />
+            <div>
+              <p className="font-medium text-yellow-800 dark:text-yellow-200">
+                LEANN이 설치되지 않았습니다
+              </p>
+              <p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
+                AI 시맨틱 검색을 사용하려면 LEANN을 설치하세요:
+              </p>
+              <code className="block mt-2 text-xs bg-yellow-100 dark:bg-yellow-900 p-2 rounded font-mono">
+                uv tool install leann-core --with leann
+              </code>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Project List */}
+      <div className="space-y-2">
+        <h4 className="text-sm font-medium text-muted-foreground mb-3">
+          프로젝트 목록
+        </h4>
+        {data?.projects.map((project) => (
+          <div
+            key={project.projectId}
+            className={cn(
+              'p-4 rounded-lg border transition-colors',
+              project.indexed
+                ? 'bg-green-50/50 dark:bg-green-950/20 border-green-200 dark:border-green-900'
+                : 'bg-background hover:bg-muted/30'
+            )}
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3 min-w-0">
+                {project.indexed ? (
+                  <div className="p-1.5 bg-green-100 dark:bg-green-900 rounded">
+                    <Check className="h-4 w-4 text-green-600 dark:text-green-400" />
+                  </div>
+                ) : (
+                  <div className="p-1.5 bg-muted rounded">
+                    <X className="h-4 w-4 text-muted-foreground" />
+                  </div>
+                )}
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    <p className="font-medium truncate">{project.projectName}</p>
+                    {project.pathExists === false && (
+                      <Badge variant="outline" className="text-xs text-yellow-600">
+                        경로 없음
+                      </Badge>
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground truncate">
+                    {project.projectPath}
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3 shrink-0">
+                {project.indexed && project.indexSize && (
+                  <Badge variant="outline" className="text-xs">
+                    {project.indexSize}
+                  </Badge>
+                )}
+                <Button
+                  variant={project.indexed ? 'outline' : 'default'}
+                  size="sm"
+                  onClick={() => handleIndex(project)}
+                  disabled={
+                    indexingProjectId === project.projectId ||
+                    !data?.leannInstalled ||
+                    project.pathExists === false
+                  }
+                >
+                  {indexingProjectId === project.projectId ? (
+                    <>
+                      <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                      인덱싱 중...
+                    </>
+                  ) : project.indexed ? (
+                    <>
+                      <RefreshCw className="h-4 w-4 mr-2" />
+                      재인덱싱
+                    </>
+                  ) : (
+                    <>
+                      <Database className="h-4 w-4 mr-2" />
+                      인덱싱
+                    </>
+                  )}
+                </Button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Info */}
+      <div className="text-xs text-muted-foreground border-t pt-4">
+        <p>
+          인덱싱하면 해당 프로젝트의 <code className="bg-muted px-1 rounded">docs/</code>,{' '}
+          <code className="bg-muted px-1 rounded">openspec/</code>,{' '}
+          <code className="bg-muted px-1 rounded">src/</code> 폴더의 문서와 코드가
+          AI 검색에 포함됩니다.
+        </p>
+      </div>
+    </div>
+  )
+}

package/src/components/settings/SettingsPage.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { FolderOpen, Key, Terminal, Server, Search } from 'lucide-react'
+import { ProjectsSettings } from './ProjectsSettings'
+import { IntegrationsSettings } from './IntegrationsSettings'
+import { CLISettings } from './CLISettings'
+import { SearchSettings } from './SearchSettings'
+import { RemoteServerList } from '@/components/remote'
+
+export function SettingsPage() {
+  const [activeTab, setActiveTab] = useState('projects')
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
+        <p className="text-muted-foreground">
+          프로젝트 및 서비스 계정을 관리합니다.
+        </p>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="projects" className="flex items-center gap-2">
+            <FolderOpen className="h-4 w-4" />
+            Projects
+          </TabsTrigger>
+          <TabsTrigger value="search" className="flex items-center gap-2">
+            <Search className="h-4 w-4" />
+            Search
+          </TabsTrigger>
+          <TabsTrigger value="cli" className="flex items-center gap-2">
+            <Terminal className="h-4 w-4" />
+            AI CLI
+          </TabsTrigger>
+          <TabsTrigger value="accounts" className="flex items-center gap-2">
+            <Key className="h-4 w-4" />
+            Accounts
+          </TabsTrigger>
+          <TabsTrigger value="remote" className="flex items-center gap-2">
+            <Server className="h-4 w-4" />
+            Remote
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="projects" className="space-y-4">
+          <ProjectsSettings />
+        </TabsContent>
+
+        <TabsContent value="search" className="space-y-4">
+          <SearchSettings />
+        </TabsContent>
+
+        <TabsContent value="cli" className="space-y-4">
+          <CLISettings />
+        </TabsContent>
+
+        <TabsContent value="accounts" className="space-y-4">
+          <IntegrationsSettings />
+        </TabsContent>
+
+        <TabsContent value="remote" className="space-y-4">
+          <RemoteServerList />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

package/src/components/settings/index.ts

@@ -0,0 +1,5 @@
+export { SettingsPage } from './SettingsPage'
+export { ProjectsSettings } from './ProjectsSettings'
+export { IntegrationsSettings } from './IntegrationsSettings'
+export { CLISettings } from './CLISettings'
+export { CustomCLIDialog, CustomCLIList } from './CustomCLIDialog'

package/src/components/swarm/ExecutionPanel.tsx

@@ -0,0 +1,284 @@
+/**
+ * Swarm 실행 패널 컴포넌트
+ */
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import { Badge } from '@/components/ui/badge'
+import {
+  Play,
+  Square,
+  Settings2,
+  ChevronDown,
+  Zap,
+  Search,
+  ListTodo,
+  RotateCcw,
+} from 'lucide-react'
+import { useSwarm, type SwarmStrategy } from '@/hooks/useSwarm'
+import { LogViewer } from './LogViewer'
+import { ProgressIndicator } from './ProgressIndicator'
+import type { SwarmExecutionMode } from '@/types'
+
+interface ExecutionPanelProps {
+  changeId: string
+  projectPath: string
+  taskId?: string
+}
+
+const MODE_OPTIONS: { value: SwarmExecutionMode; label: string; icon: typeof Zap; description: string }[] = [
+  {
+    value: 'full',
+    label: '전체 실행',
+    icon: Zap,
+    description: '모든 미완료 태스크 처리',
+  },
+  {
+    value: 'single',
+    label: '단일 태스크',
+    icon: ListTodo,
+    description: '선택한 태스크만 처리',
+  },
+  {
+    value: 'analysis',
+    label: '분석 모드',
+    icon: Search,
+    description: '코드 변경 없이 분석만',
+  },
+]
+
+const STRATEGY_OPTIONS: { value: SwarmStrategy; label: string }[] = [
+  { value: 'development', label: '개발' },
+  { value: 'research', label: '연구' },
+  { value: 'testing', label: '테스트' },
+]
+
+export function ExecutionPanel({
+  changeId,
+  projectPath,
+  taskId,
+}: ExecutionPanelProps) {
+  const [mode, setMode] = useState<SwarmExecutionMode>('full')
+  const [strategy, setStrategy] = useState<SwarmStrategy>('development')
+  const [maxAgents, setMaxAgents] = useState(5)
+  const [showSettings, setShowSettings] = useState(false)
+
+  const {
+    execution,
+    logs,
+    isRunning,
+    error,
+    execute,
+    stop,
+    clearLogs,
+  } = useSwarm()
+
+  const handleExecute = async () => {
+    await execute({
+      projectPath,
+      changeId,
+      taskId: mode === 'single' ? taskId : undefined,
+      mode,
+      strategy,
+      maxAgents,
+    })
+  }
+
+  const handleStop = async () => {
+    await stop()
+  }
+
+  const selectedMode = MODE_OPTIONS.find(m => m.value === mode)
+
+  return (
+    <Card className="border-zinc-800 bg-zinc-900/50">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <Zap className="h-5 w-5 text-yellow-500" />
+            Swarm 실행
+          </CardTitle>
+          {execution.status !== 'idle' && (
+            <Badge
+              variant={
+                execution.status === 'running' ? 'default' :
+                execution.status === 'completed' ? 'secondary' :
+                execution.status === 'failed' ? 'destructive' : 'outline'
+              }
+            >
+              {execution.status}
+            </Badge>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* 실행 중이 아닐 때: 설정 UI */}
+        {!isRunning && execution.status === 'idle' && (
+          <>
+            {/* 모드 선택 */}
+            <div className="grid grid-cols-3 gap-2">
+              {MODE_OPTIONS.map((option) => {
+                const Icon = option.icon
+                return (
+                  <button
+                    key={option.value}
+                    onClick={() => setMode(option.value)}
+                    className={`
+                      p-3 rounded-lg border text-left transition-colors
+                      ${mode === option.value
+                        ? 'border-blue-500 bg-blue-500/10'
+                        : 'border-zinc-700 hover:border-zinc-600 bg-zinc-800/50'
+                      }
+                    `}
+                  >
+                    <Icon className={`h-5 w-5 mb-1 ${mode === option.value ? 'text-blue-400' : 'text-zinc-400'}`} />
+                    <div className="text-sm font-medium">{option.label}</div>
+                    <div className="text-xs text-zinc-500">{option.description}</div>
+                  </button>
+                )
+              })}
+            </div>
+
+            {/* 고급 설정 */}
+            <Collapsible open={showSettings} onOpenChange={setShowSettings}>
+              <CollapsibleTrigger asChild>
+                <Button variant="ghost" size="sm" className="w-full justify-between">
+                  <span className="flex items-center gap-2">
+                    <Settings2 className="h-4 w-4" />
+                    고급 설정
+                  </span>
+                  <ChevronDown className={`h-4 w-4 transition-transform ${showSettings ? 'rotate-180' : ''}`} />
+                </Button>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="pt-2 space-y-3">
+                {/* 전략 선택 */}
+                <div className="flex items-center justify-between">
+                  <label className="text-sm text-zinc-400">전략</label>
+                  <Select value={strategy} onValueChange={(v) => setStrategy(v as SwarmStrategy)}>
+                    <SelectTrigger className="w-32">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {STRATEGY_OPTIONS.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>
+                          {opt.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 최대 에이전트 수 */}
+                <div className="flex items-center justify-between">
+                  <label className="text-sm text-zinc-400">최대 에이전트</label>
+                  <Select value={String(maxAgents)} onValueChange={(v) => setMaxAgents(Number(v))}>
+                    <SelectTrigger className="w-32">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {[3, 5, 7, 10].map((n) => (
+                        <SelectItem key={n} value={String(n)}>
+                          {n}개
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {/* 실행 버튼 */}
+            <Button
+              onClick={handleExecute}
+              className="w-full"
+              size="lg"
+            >
+              <Play className="h-5 w-5 mr-2" />
+              {selectedMode?.label} 시작
+            </Button>
+          </>
+        )}
+
+        {/* 실행 중: 진행 상태 */}
+        {execution.status !== 'idle' && (
+          <>
+            <ProgressIndicator
+              status={execution.status}
+              progress={execution.progress}
+              startedAt={new Date().toISOString()}
+              completedAt={undefined}
+              currentTask={execution.currentTask}
+            />
+
+            {/* 중지 버튼 (실행 중일 때만) */}
+            {isRunning && (
+              <Button
+                onClick={handleStop}
+                variant="destructive"
+                className="w-full"
+              >
+                <Square className="h-4 w-4 mr-2" />
+                실행 중지
+              </Button>
+            )}
+
+            {/* 완료/실패 후 버튼들 */}
+            {!isRunning && (
+              <div className="flex gap-2">
+                <Button
+                  onClick={() => {
+                    clearLogs()
+                    handleExecute()
+                  }}
+                  className="flex-1"
+                >
+                  <RotateCcw className="h-4 w-4 mr-2" />
+                  다시 실행
+                </Button>
+                <Button
+                  onClick={() => {
+                    clearLogs()
+                  }}
+                  variant="outline"
+                  className="flex-1"
+                >
+                  새 실행 준비
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* 에러 표시 */}
+        {error && (
+          <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+            {error}
+          </div>
+        )}
+
+        {/* 로그 뷰어 */}
+        {logs.length > 0 && (
+          <LogViewer
+            logs={logs}
+            onClear={clearLogs}
+            maxHeight="300px"
+          />
+        )}
+      </CardContent>
+    </Card>
+  )
+}