zyflow 0.6.4

package/src/components/swarm/LogViewer.tsx

@@ -0,0 +1,196 @@
+/**
+ * 실행 로그 뷰어 컴포넌트
+ */
+
+import { useEffect, useRef, useState } from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  ChevronDown,
+  ChevronUp,
+  Trash2,
+} from 'lucide-react'
+import type { SwarmLogEntry, SwarmLogType } from '@/types'
+
+interface LogViewerProps {
+  logs: SwarmLogEntry[]
+  onClear?: () => void
+  maxHeight?: string
+  autoScroll?: boolean
+}
+
+const LOG_TYPE_STYLES: Record<SwarmLogType, { bg: string; text: string; label: string }> = {
+  info: { bg: 'bg-blue-500/10', text: 'text-blue-400', label: 'INFO' },
+  tool_use: { bg: 'bg-purple-500/10', text: 'text-purple-400', label: 'TOOL' },
+  tool_result: { bg: 'bg-green-500/10', text: 'text-green-400', label: 'RESULT' },
+  error: { bg: 'bg-red-500/10', text: 'text-red-400', label: 'ERROR' },
+  assistant: { bg: 'bg-yellow-500/10', text: 'text-yellow-400', label: 'AI' },
+  system: { bg: 'bg-gray-500/10', text: 'text-gray-400', label: 'SYS' },
+  progress: { bg: 'bg-cyan-500/10', text: 'text-cyan-400', label: 'PROG' },
+}
+
+export function LogViewer({
+  logs,
+  onClear,
+  maxHeight = '400px',
+  autoScroll = true,
+}: LogViewerProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [isAutoScroll, setIsAutoScroll] = useState(autoScroll)
+  const [filter, setFilter] = useState<SwarmLogType | 'all'>('all')
+  const [isExpanded, setIsExpanded] = useState(true)
+
+  // 자동 스크롤
+  useEffect(() => {
+    if (isAutoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [logs, isAutoScroll])
+
+  // 필터링된 로그
+  const filteredLogs = filter === 'all'
+    ? logs
+    : logs.filter(log => log.type === filter)
+
+  // 타임스탬프 포맷
+  const formatTime = (timestamp: string) => {
+    const date = new Date(timestamp)
+    return date.toLocaleTimeString('ko-KR', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    })
+  }
+
+  return (
+    <div className="border rounded-lg bg-zinc-950">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between px-3 py-2 border-b bg-zinc-900/50">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 w-6 p-0"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            {isExpanded ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+          </Button>
+          <span className="text-sm font-medium text-zinc-300">
+            실행 로그
+          </span>
+          <Badge variant="secondary" className="text-xs">
+            {filteredLogs.length}
+          </Badge>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* 필터 */}
+          <select
+            value={filter}
+            onChange={(e) => setFilter(e.target.value as SwarmLogType | 'all')}
+            className="h-7 text-xs bg-zinc-800 border-zinc-700 rounded px-2"
+          >
+            <option value="all">모두</option>
+            <option value="assistant">AI</option>
+            <option value="tool_use">도구</option>
+            <option value="error">에러</option>
+            <option value="system">시스템</option>
+          </select>
+
+          {/* 자동 스크롤 토글 */}
+          <Button
+            variant={isAutoScroll ? 'secondary' : 'ghost'}
+            size="sm"
+            className="h-7 text-xs"
+            onClick={() => setIsAutoScroll(!isAutoScroll)}
+          >
+            자동 스크롤
+          </Button>
+
+          {/* 클리어 */}
+          {onClear && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={onClear}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* 로그 목록 */}
+      {isExpanded && (
+        <div
+          ref={scrollRef}
+          className="overflow-auto font-mono text-xs"
+          style={{ maxHeight }}
+        >
+          {filteredLogs.length === 0 ? (
+            <div className="p-4 text-center text-zinc-500">
+              로그가 없습니다
+            </div>
+          ) : (
+            <div className="divide-y divide-zinc-800/50">
+              {filteredLogs.map((log, index) => {
+                const style = LOG_TYPE_STYLES[log.type]
+                return (
+                  <div
+                    key={index}
+                    className={cn(
+                      'px-3 py-2 hover:bg-zinc-900/50',
+                      log.type === 'error' && 'bg-red-500/5'
+                    )}
+                  >
+                    <div className="flex items-start gap-2">
+                      {/* 타임스탬프 */}
+                      <span className="text-zinc-500 shrink-0">
+                        {formatTime(log.timestamp)}
+                      </span>
+
+                      {/* 타입 뱃지 */}
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          'text-[10px] px-1.5 py-0 shrink-0',
+                          style.bg,
+                          style.text
+                        )}
+                      >
+                        {style.label}
+                      </Badge>
+
+                      {/* 내용 */}
+                      <span className="text-zinc-300 break-all whitespace-pre-wrap">
+                        {typeof log.content === 'string'
+                          ? log.content
+                          : JSON.stringify(log.content, null, 2)}
+                      </span>
+                    </div>
+
+                    {/* 메타데이터 (tool_use인 경우) */}
+                    {log.metadata && log.type === 'tool_use' && (
+                      <div className="mt-1 ml-20 text-zinc-500">
+                        <code className="text-[10px]">
+                          {JSON.stringify(log.metadata.input, null, 2).substring(0, 200)}
+                          {JSON.stringify(log.metadata.input).length > 200 && '...'}
+                        </code>
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/swarm/ProgressIndicator.tsx

@@ -0,0 +1,111 @@
+/**
+ * 실행 진행률 표시 컴포넌트
+ */
+
+import { cn } from '@/lib/utils'
+import { Progress } from '@/components/ui/progress'
+import {
+  Clock,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  StopCircle,
+  Circle,
+} from 'lucide-react'
+import type { SwarmStatusValue } from '@/types'
+
+interface ProgressIndicatorProps {
+  status: SwarmStatusValue
+  progress: number
+  startedAt: string
+  completedAt?: string
+  currentTask?: string
+}
+
+const STATUS_CONFIG: Record<SwarmStatusValue, {
+  icon: typeof Clock
+  color: string
+  label: string
+}> = {
+  pending: { icon: Circle, color: 'text-zinc-400', label: '대기 중' },
+  running: { icon: Loader2, color: 'text-blue-400', label: '실행 중' },
+  completed: { icon: CheckCircle2, color: 'text-green-400', label: '완료' },
+  failed: { icon: XCircle, color: 'text-red-400', label: '실패' },
+  stopped: { icon: StopCircle, color: 'text-yellow-400', label: '중지됨' },
+}
+
+export function ProgressIndicator({
+  status,
+  progress,
+  startedAt,
+  completedAt,
+  currentTask,
+}: ProgressIndicatorProps) {
+  const config = STATUS_CONFIG[status]
+  const Icon = config.icon
+
+  // 경과 시간 계산
+  const getElapsedTime = () => {
+    const start = new Date(startedAt).getTime()
+    const end = completedAt ? new Date(completedAt).getTime() : Date.now()
+    const elapsed = Math.floor((end - start) / 1000)
+
+    const minutes = Math.floor(elapsed / 60)
+    const seconds = elapsed % 60
+
+    if (minutes > 0) {
+      return `${minutes}분 ${seconds}초`
+    }
+    return `${seconds}초`
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* 상태 헤더 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Icon
+            className={cn(
+              'h-5 w-5',
+              config.color,
+              status === 'running' && 'animate-spin'
+            )}
+          />
+          <span className={cn('font-medium', config.color)}>
+            {config.label}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2 text-sm text-zinc-400">
+          <Clock className="h-4 w-4" />
+          <span>{getElapsedTime()}</span>
+        </div>
+      </div>
+
+      {/* 진행률 바 */}
+      <div className="space-y-1">
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-zinc-400">진행률</span>
+          <span className="font-mono text-zinc-300">{progress}%</span>
+        </div>
+        <Progress
+          value={progress}
+          className={cn(
+            'h-2',
+            status === 'failed' && '[&>div]:bg-red-500',
+            status === 'stopped' && '[&>div]:bg-yellow-500',
+            status === 'completed' && '[&>div]:bg-green-500'
+          )}
+        />
+      </div>
+
+      {/* 현재 태스크 */}
+      {currentTask && status === 'running' && (
+        <div className="text-sm">
+          <span className="text-zinc-500">현재 작업: </span>
+          <span className="text-zinc-300">{currentTask}</span>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/swarm/index.ts

@@ -0,0 +1,3 @@
+export { ExecutionPanel } from './ExecutionPanel'
+export { LogViewer } from './LogViewer'
+export { ProgressIndicator } from './ProgressIndicator'

package/src/components/tasks/ArchiveTable.tsx

@@ -0,0 +1,203 @@
+import { Search, RefreshCw, RotateCcw, Trash2, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Input } from '../ui/input';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../ui/table';
+import { Task, PRIORITY_COLORS } from './types';
+
+interface PaginationInfo {
+  page: number;
+  limit: number;
+  total: number;
+  totalPages: number;
+}
+
+interface ArchiveTableProps {
+  tasks: Task[];
+  pagination: PaginationInfo;
+  searchQuery: string;
+  isLoading: boolean;
+  onSearchChange: (query: string) => void;
+  onPageChange: (page: number) => void;
+  onUnarchive: (id: number) => void;
+  onDelete: (id: number) => void;
+  onRefresh: () => void;
+}
+
+function formatDate(timestamp: number | null | undefined): string {
+  if (!timestamp) return '-';
+  const date = new Date(timestamp);
+  return date.toLocaleDateString('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  });
+}
+
+function parseTags(tagsJson: string | null): string[] {
+  if (!tagsJson) return [];
+  try {
+    return JSON.parse(tagsJson);
+  } catch {
+    return [];
+  }
+}
+
+export function ArchiveTable({
+  tasks,
+  pagination,
+  searchQuery,
+  isLoading,
+  onSearchChange,
+  onPageChange,
+  onUnarchive,
+  onDelete,
+  onRefresh,
+}: ArchiveTableProps) {
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Toolbar */}
+      <div className="flex items-center gap-4 p-4 border-b">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            placeholder="Search archived tasks..."
+            className="pl-9"
+          />
+        </div>
+
+        <div className="text-sm text-muted-foreground">
+          Total: {pagination.total} tasks
+        </div>
+
+        <Button variant="outline" size="icon" onClick={onRefresh} disabled={isLoading}>
+          <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+        </Button>
+      </div>
+
+      {/* Table */}
+      <div className="flex-1 overflow-auto p-4">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">ID</TableHead>
+              <TableHead>Title</TableHead>
+              <TableHead className="w-[80px]">Priority</TableHead>
+              <TableHead className="w-[150px]">Tags</TableHead>
+              <TableHead className="w-[100px]">Completed</TableHead>
+              <TableHead className="w-[100px]">Archived</TableHead>
+              <TableHead className="w-[100px] text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {tasks.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
+                  {isLoading ? 'Loading...' : 'No archived tasks found'}
+                </TableCell>
+              </TableRow>
+            ) : (
+              tasks.map((task) => (
+                <TableRow key={task.id}>
+                  <TableCell className="font-mono text-xs">{task.id}</TableCell>
+                  <TableCell>
+                    <div className="font-medium">{task.title}</div>
+                    {task.description && (
+                      <div className="text-xs text-muted-foreground truncate max-w-[300px]">
+                        {task.description}
+                      </div>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1.5">
+                      <span
+                        className={`w-2 h-2 rounded-full ${PRIORITY_COLORS[task.priority]}`}
+                      />
+                      <span className="text-xs capitalize">{task.priority}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap gap-1">
+                      {parseTags(task.tags).map((tag) => (
+                        <Badge key={tag} variant="outline" className="text-xs">
+                          {tag}
+                        </Badge>
+                      ))}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-xs">
+                    {formatDate(task.updatedAt)}
+                  </TableCell>
+                  <TableCell className="text-xs">
+                    {formatDate(task.archivedAt)}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={() => onUnarchive(task.id)}
+                        title="Restore to Done"
+                      >
+                        <RotateCcw className="h-3.5 w-3.5" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive hover:text-destructive"
+                        onClick={() => onDelete(task.id)}
+                        title="Delete permanently"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      {pagination.totalPages > 1 && (
+        <div className="flex items-center justify-between px-4 py-3 border-t">
+          <div className="text-sm text-muted-foreground">
+            Page {pagination.page} of {pagination.totalPages}
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(pagination.page - 1)}
+              disabled={pagination.page <= 1}
+            >
+              <ChevronLeft className="h-4 w-4 mr-1" />
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(pagination.page + 1)}
+              disabled={pagination.page >= pagination.totalPages}
+            >
+              Next
+              <ChevronRight className="h-4 w-4 ml-1" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}