zyflow 0.6.4

package/src/components/cli/AddCustomCLIDialog.tsx

@@ -0,0 +1,210 @@
+/**
+ * Add Custom CLI Dialog
+ *
+ * Dialog for registering custom CLI tools
+ */
+
+import { useState } from 'react'
+import { X, Terminal, HelpCircle } from 'lucide-react'
+
+interface AddCustomCLIDialogProps {
+  open: boolean
+  onClose: () => void
+  onAdd: (profile: {
+    name: string
+    command: string
+    args?: string[]
+    mcpFlag?: string
+    description?: string
+    icon?: string
+  }) => void
+}
+
+export function AddCustomCLIDialog({
+  open,
+  onClose,
+  onAdd,
+}: AddCustomCLIDialogProps) {
+  const [name, setName] = useState('')
+  const [command, setCommand] = useState('')
+  const [args, setArgs] = useState('')
+  const [mcpFlag, setMcpFlag] = useState('')
+  const [description, setDescription] = useState('')
+  const [icon, setIcon] = useState('🔧')
+  const [error, setError] = useState('')
+
+  if (!open) return null
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+
+    if (!name.trim()) {
+      setError('Name is required')
+      return
+    }
+
+    if (!command.trim()) {
+      setError('Command is required')
+      return
+    }
+
+    onAdd({
+      name: name.trim(),
+      command: command.trim(),
+      args: args.trim() ? args.split(/\s+/) : undefined,
+      mcpFlag: mcpFlag.trim() || undefined,
+      description: description.trim() || undefined,
+      icon: icon || '🔧',
+    })
+
+    // Reset form
+    setName('')
+    setCommand('')
+    setArgs('')
+    setMcpFlag('')
+    setDescription('')
+    setIcon('🔧')
+    onClose()
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60"
+        onClick={onClose}
+      />
+
+      {/* Dialog */}
+      <div className="relative bg-zinc-900 rounded-xl border border-zinc-700 shadow-2xl w-full max-w-md mx-4">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-700">
+          <div className="flex items-center gap-2">
+            <Terminal className="w-5 h-5 text-zinc-400" />
+            <h2 className="text-lg font-semibold text-white">Add Custom CLI</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-zinc-700 rounded-lg transition-colors"
+          >
+            <X className="w-5 h-5 text-zinc-400" />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="p-4 space-y-4">
+          {error && (
+            <div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-sm text-red-400">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-zinc-300 mb-1">
+              Name *
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder="My Custom CLI"
+              className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:border-blue-500"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-zinc-300 mb-1">
+              Command *
+            </label>
+            <input
+              type="text"
+              value={command}
+              onChange={e => setCommand(e.target.value)}
+              placeholder="my-cli"
+              className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:border-blue-500 font-mono"
+            />
+            <p className="mt-1 text-xs text-zinc-500">
+              The CLI command to execute (must be in PATH)
+            </p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-zinc-300 mb-1">
+              Default Arguments
+            </label>
+            <input
+              type="text"
+              value={args}
+              onChange={e => setArgs(e.target.value)}
+              placeholder="--flag1 --flag2"
+              className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:border-blue-500 font-mono"
+            />
+          </div>
+
+          <div>
+            <label className="flex items-center gap-1 text-sm font-medium text-zinc-300 mb-1">
+              MCP Config Flag
+              <HelpCircle className="w-3.5 h-3.5 text-zinc-500" />
+            </label>
+            <input
+              type="text"
+              value={mcpFlag}
+              onChange={e => setMcpFlag(e.target.value)}
+              placeholder="--mcp-config"
+              className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:border-blue-500 font-mono"
+            />
+            <p className="mt-1 text-xs text-zinc-500">
+              Flag to pass MCP server config (if supported)
+            </p>
+          </div>
+
+          <div className="grid grid-cols-[1fr,80px] gap-3">
+            <div>
+              <label className="block text-sm font-medium text-zinc-300 mb-1">
+                Description
+              </label>
+              <input
+                type="text"
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+                placeholder="A custom CLI tool"
+                className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:border-blue-500"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-zinc-300 mb-1">
+                Icon
+              </label>
+              <input
+                type="text"
+                value={icon}
+                onChange={e => setIcon(e.target.value)}
+                placeholder="🔧"
+                className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg text-white text-center focus:outline-none focus:border-blue-500"
+                maxLength={2}
+              />
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm text-zinc-400 hover:text-white transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors"
+            >
+              Add CLI
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/src/components/cli/CLISelector.tsx

@@ -0,0 +1,187 @@
+/**
+ * CLI Selector Component
+ *
+ * Dropdown for selecting which CLI to use for agent execution
+ */
+
+import { useState, useEffect } from 'react'
+import { ChevronDown, Check, Settings, Plus, Loader2 } from 'lucide-react'
+import { cliApiUrl } from '@/config/api'
+
+interface CLIProfile {
+  id: string
+  name: string
+  type: string
+  command: string
+  description?: string
+  icon?: string
+  builtin?: boolean
+  version?: string
+}
+
+interface CLISelectorProps {
+  value: string
+  onChange: (profileId: string) => void
+  onCustomClick?: () => void
+  disabled?: boolean
+}
+
+export function CLISelector({
+  value,
+  onChange,
+  onCustomClick,
+  disabled,
+}: CLISelectorProps) {
+  const [profiles, setProfiles] = useState<CLIProfile[]>([])
+  const [loading, setLoading] = useState(true)
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    fetchProfiles()
+  }, [])
+
+  async function fetchProfiles() {
+    try {
+      setLoading(true)
+      const res = await fetch(cliApiUrl.availableProfiles())
+      const data = await res.json()
+      if (data.success) {
+        setProfiles(data.profiles)
+        // Set default if no value selected
+        if (!value && data.profiles.length > 0) {
+          onChange(data.profiles[0].id)
+        }
+      }
+    } catch (error) {
+      console.error('Failed to fetch CLI profiles:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const selectedProfile = profiles.find(p => p.id === value)
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 px-3 py-2 bg-zinc-800 rounded-lg border border-zinc-700">
+        <Loader2 className="w-4 h-4 animate-spin text-zinc-400" />
+        <span className="text-sm text-zinc-400">Loading CLIs...</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => !disabled && setOpen(!open)}
+        disabled={disabled}
+        className={`
+          flex items-center gap-2 px-3 py-2 w-full
+          bg-zinc-800 rounded-lg border border-zinc-700
+          hover:border-zinc-600 transition-colors
+          ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+        `}
+      >
+        {selectedProfile ? (
+          <>
+            <span className="text-lg">{selectedProfile.icon || '🔧'}</span>
+            <span className="flex-1 text-left text-sm text-white">
+              {selectedProfile.name}
+            </span>
+            {selectedProfile.version && (
+              <span className="text-xs text-zinc-500">
+                {selectedProfile.version.split('\n')[0].substring(0, 20)}
+              </span>
+            )}
+          </>
+        ) : (
+          <span className="flex-1 text-left text-sm text-zinc-400">
+            Select CLI...
+          </span>
+        )}
+        <ChevronDown className="w-4 h-4 text-zinc-400" />
+      </button>
+
+      {open && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 z-10"
+            onClick={() => setOpen(false)}
+          />
+
+          {/* Dropdown */}
+          <div className="absolute z-20 mt-1 w-full bg-zinc-800 rounded-lg border border-zinc-700 shadow-xl overflow-hidden">
+            {profiles.length === 0 ? (
+              <div className="px-3 py-4 text-center text-sm text-zinc-400">
+                No CLI tools available.
+                <br />
+                Install Claude Code, Gemini CLI, etc.
+              </div>
+            ) : (
+              <div className="max-h-60 overflow-y-auto">
+                {profiles.map(profile => (
+                  <button
+                    key={profile.id}
+                    type="button"
+                    onClick={() => {
+                      onChange(profile.id)
+                      setOpen(false)
+                    }}
+                    className={`
+                      flex items-center gap-3 w-full px-3 py-2.5
+                      hover:bg-zinc-700/50 transition-colors
+                      ${profile.id === value ? 'bg-zinc-700/30' : ''}
+                    `}
+                  >
+                    <span className="text-lg">{profile.icon || '🔧'}</span>
+                    <div className="flex-1 text-left">
+                      <div className="text-sm text-white">{profile.name}</div>
+                      {profile.description && (
+                        <div className="text-xs text-zinc-500">
+                          {profile.description}
+                        </div>
+                      )}
+                    </div>
+                    {profile.id === value && (
+                      <Check className="w-4 h-4 text-emerald-500" />
+                    )}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Footer actions */}
+            <div className="border-t border-zinc-700">
+              {onCustomClick && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    onCustomClick()
+                    setOpen(false)
+                  }}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 hover:bg-zinc-700/50 transition-colors"
+                >
+                  <Plus className="w-4 h-4 text-zinc-400" />
+                  <span className="text-sm text-zinc-400">Add Custom CLI</span>
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={() => {
+                  fetchProfiles()
+                  setOpen(false)
+                }}
+                className="flex items-center gap-2 w-full px-3 py-2.5 hover:bg-zinc-700/50 transition-colors"
+              >
+                <Settings className="w-4 h-4 text-zinc-400" />
+                <span className="text-sm text-zinc-400">Refresh</span>
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/cli/index.ts

@@ -0,0 +1,8 @@
+/**
+ * CLI Components
+ *
+ * Components for Multi-CLI support
+ */
+
+export { CLISelector } from './CLISelector'
+export { AddCustomCLIDialog } from './AddCustomCLIDialog'

package/src/components/dashboard/ArchivedChangeList.tsx

@@ -0,0 +1,102 @@
+import { useArchivedChanges } from '@/hooks/useArchivedChanges'
+import { cn, formatRelativeDate } from '@/lib/utils'
+import { Progress } from '@/components/ui/progress'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Archive, Loader2, Calendar, CheckCircle2 } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+
+interface ArchivedChangeListProps {
+  selectedId: string | null
+  onSelect: (id: string) => void
+}
+
+export function ArchivedChangeList({ selectedId, onSelect }: ArchivedChangeListProps) {
+  const { data: changes, isLoading, error } = useArchivedChanges()
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 text-sm text-destructive">
+        아카이브 목록을 불러올 수 없습니다
+      </div>
+    )
+  }
+
+  if (!changes || changes.length === 0) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 p-4 text-muted-foreground">
+        <Archive className="h-8 w-8" />
+        <p className="text-sm">아카이브된 변경 제안이 없습니다</p>
+      </div>
+    )
+  }
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="p-4">
+        <h2 className="mb-4 text-sm font-medium text-muted-foreground">
+          아카이브 ({changes.length})
+        </h2>
+        <div className="space-y-2">
+          {changes.map((change) => (
+            <button
+              key={change.id}
+              onClick={() => onSelect(change.id)}
+              className={cn(
+                'w-full rounded-lg border p-3 text-left transition-colors',
+                'hover:bg-accent',
+                selectedId === change.id && 'border-primary bg-accent'
+              )}
+            >
+              {/* 제목 - 2줄까지 표시 */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="mb-2 flex items-start gap-2">
+                    {change.progress === 100 && (
+                      <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0 mt-0.5" />
+                    )}
+                    <span className="font-medium text-sm line-clamp-2 break-all">
+                      {change.title}
+                    </span>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="right" className="max-w-xs">
+                  <p className="break-all">{change.title}</p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* 프로그래스 바 */}
+              <div className="flex items-center gap-2 mb-2">
+                <Progress
+                  value={change.progress}
+                  className={cn(
+                    "h-1.5 flex-1",
+                    change.progress === 100 && "[&>div]:bg-green-500"
+                  )}
+                />
+                <span className="text-xs text-muted-foreground shrink-0">
+                  {change.completedTasks}/{change.totalTasks}
+                </span>
+              </div>
+
+              {/* 날짜 - 하단 */}
+              {change.archivedAt && (
+                <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                  <Calendar className="h-3 w-3" />
+                  {formatRelativeDate(change.archivedAt)}
+                </div>
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+    </ScrollArea>
+  )
+}

package/src/components/dashboard/ArchivedChangeViewer.tsx

@@ -0,0 +1,184 @@
+import { useArchivedChangeDetail } from '@/hooks/useArchivedChanges'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Loader2, FileText, ListTodo, BookOpen, FolderArchive } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+interface ArchivedChangeViewerProps {
+  changeId: string | null
+}
+
+export function ArchivedChangeViewer({ changeId }: ArchivedChangeViewerProps) {
+  const { data: detail, isLoading, error } = useArchivedChangeDetail(changeId)
+
+  if (!changeId) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 text-muted-foreground">
+        <FolderArchive className="h-12 w-12" />
+        <p className="text-sm">아카이브된 변경 제안을 선택하세요</p>
+      </div>
+    )
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-destructive">
+        문서를 불러올 수 없습니다
+      </div>
+    )
+  }
+
+  if (!detail) {
+    return null
+  }
+
+  const fileNames = Object.keys(detail.files)
+  const hasProposal = fileNames.includes('proposal.md')
+  const hasTasks = fileNames.includes('tasks.md')
+  const hasDesign = fileNames.includes('design.md')
+  const specFiles = fileNames.filter((f) => f.startsWith('specs/'))
+  const otherFiles = fileNames.filter(
+    (f) => !['proposal.md', 'tasks.md', 'design.md'].includes(f) && !f.startsWith('specs/')
+  )
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      {/* 헤더 - 고정 */}
+      <div className="border-b p-4 shrink-0">
+        <h2 className="text-lg font-semibold truncate">{changeId}</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          {fileNames.length}개 파일
+        </p>
+      </div>
+
+      {/* 탭 컨텐츠 영역 */}
+      <Tabs
+        defaultValue={hasProposal ? 'proposal' : hasTasks ? 'tasks' : fileNames[0]}
+        className="flex-1 flex flex-col min-h-0"
+      >
+        {/* 탭 목록 - 고정 */}
+        <div className="border-b px-4 shrink-0">
+          <TabsList className="h-10 bg-transparent">
+            {hasProposal && (
+              <TabsTrigger value="proposal" className="gap-1.5">
+                <FileText className="h-4 w-4" />
+                제안서
+              </TabsTrigger>
+            )}
+            {hasTasks && (
+              <TabsTrigger value="tasks" className="gap-1.5">
+                <ListTodo className="h-4 w-4" />
+                작업
+              </TabsTrigger>
+            )}
+            {hasDesign && (
+              <TabsTrigger value="design" className="gap-1.5">
+                <BookOpen className="h-4 w-4" />
+                설계
+              </TabsTrigger>
+            )}
+            {specFiles.length > 0 && (
+              <TabsTrigger value="specs" className="gap-1.5">
+                <FileText className="h-4 w-4" />
+                스펙 ({specFiles.length})
+              </TabsTrigger>
+            )}
+            {otherFiles.length > 0 && (
+              <TabsTrigger value="other" className="gap-1.5">
+                기타 ({otherFiles.length})
+              </TabsTrigger>
+            )}
+          </TabsList>
+        </div>
+
+        {/* 탭 컨텐츠 - 스크롤 가능 영역 */}
+        {hasProposal && (
+          <TabsContent value="proposal" className="flex-1 min-h-0 m-0 overflow-hidden">
+            <ScrollArea className="h-full">
+              <article className="prose prose-sm dark:prose-invert max-w-none p-4">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {detail.files['proposal.md']}
+                </ReactMarkdown>
+              </article>
+            </ScrollArea>
+          </TabsContent>
+        )}
+
+        {hasTasks && (
+          <TabsContent value="tasks" className="flex-1 min-h-0 m-0 overflow-hidden">
+            <ScrollArea className="h-full">
+              <article className="prose prose-sm dark:prose-invert max-w-none p-4">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {detail.files['tasks.md']}
+                </ReactMarkdown>
+              </article>
+            </ScrollArea>
+          </TabsContent>
+        )}
+
+        {hasDesign && (
+          <TabsContent value="design" className="flex-1 min-h-0 m-0 overflow-hidden">
+            <ScrollArea className="h-full">
+              <article className="prose prose-sm dark:prose-invert max-w-none p-4">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {detail.files['design.md']}
+                </ReactMarkdown>
+              </article>
+            </ScrollArea>
+          </TabsContent>
+        )}
+
+        {specFiles.length > 0 && (
+          <TabsContent value="specs" className="flex-1 min-h-0 m-0 overflow-hidden">
+            <ScrollArea className="h-full">
+              <div className="space-y-6 p-4">
+                {specFiles.map((fileName) => (
+                  <div key={fileName}>
+                    <h3 className="text-sm font-medium mb-2 text-muted-foreground">
+                      {fileName.replace('specs/', '')}
+                    </h3>
+                    <article className="prose prose-sm dark:prose-invert max-w-none border rounded-lg p-4">
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                        {detail.files[fileName]}
+                      </ReactMarkdown>
+                    </article>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </TabsContent>
+        )}
+
+        {otherFiles.length > 0 && (
+          <TabsContent value="other" className="flex-1 min-h-0 m-0 overflow-hidden">
+            <ScrollArea className="h-full">
+              <div className="space-y-6 p-4">
+                {otherFiles.map((fileName) => (
+                  <div key={fileName}>
+                    <h3 className="text-sm font-medium mb-2 text-muted-foreground">
+                      {fileName}
+                    </h3>
+                    <article className="prose prose-sm dark:prose-invert max-w-none border rounded-lg p-4">
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                        {detail.files[fileName]}
+                      </ReactMarkdown>
+                    </article>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </TabsContent>
+        )}
+      </Tabs>
+    </div>
+  )
+}