zyflow 0.6.4

package/src/components/dashboard/ArchivedChangesPage.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { ArchivedChangeList } from './ArchivedChangeList'
+import { ArchivedChangeViewer } from './ArchivedChangeViewer'
+
+interface ArchivedChangesPageProps {
+  projectId: string
+  initialArchivedChangeId?: string
+}
+
+export function ArchivedChangesPage({ initialArchivedChangeId }: ArchivedChangesPageProps) {
+  const [selectedArchivedId, setSelectedArchivedId] = useState<string | null>(
+    initialArchivedChangeId ?? null
+  )
+
+  return (
+    <div className="flex h-full gap-4">
+      {/* Archived List - 왼쪽 패널 (넓게) */}
+      <div className="w-[400px] shrink-0 border rounded-lg overflow-hidden">
+        <ArchivedChangeList
+          selectedId={selectedArchivedId}
+          onSelect={setSelectedArchivedId}
+        />
+      </div>
+
+      {/* Archived Detail Viewer - 오른쪽 메인 */}
+      <div className="flex-1 border rounded-lg overflow-hidden">
+        <ArchivedChangeViewer changeId={selectedArchivedId} />
+      </div>
+    </div>
+  )
+}

package/src/components/dashboard/ChangeList.tsx

@@ -0,0 +1,86 @@
+import { useChanges } from '@/hooks/useChanges'
+import { cn, formatRelativeDate } from '@/lib/utils'
+import { Progress } from '@/components/ui/progress'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { FileText, Loader2, Calendar } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+
+interface ChangeListProps {
+  selectedId: string | null
+  onSelect: (id: string) => void
+}
+
+export function ChangeList({ selectedId, onSelect }: ChangeListProps) {
+  const { data: changes, isLoading, error } = useChanges()
+
+  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">
+        <FileText 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'
+              )}
+            >
+              <div className="mb-2 flex items-center justify-between gap-2">
+                <span className="font-medium text-sm truncate">{change.title}</span>
+                {change.updatedAt && (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+                        <Calendar className="h-3 w-3" />
+                        {formatRelativeDate(change.updatedAt)}
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      최근 수정: {new Date(change.updatedAt).toLocaleString('ko-KR')}
+                    </TooltipContent>
+                  </Tooltip>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                <Progress value={change.progress} className="h-1.5 flex-1" />
+                <span className="text-xs text-muted-foreground">
+                  {change.completedTasks}/{change.totalTasks}
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </ScrollArea>
+  )
+}

package/src/components/dashboard/ThemeToggle.tsx

@@ -0,0 +1,33 @@
+import { Moon, Sun } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { useTheme } from '@/context/theme-provider'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  const toggleTheme = () => {
+    if (theme === 'light') {
+      setTheme('dark')
+    } else if (theme === 'dark') {
+      setTheme('system')
+    } else {
+      setTheme('light')
+    }
+  }
+
+  return (
+    <Button variant="ghost" size="icon" onClick={toggleTheme}>
+      {theme === 'dark' ? (
+        <Moon className="h-4 w-4" />
+      ) : theme === 'light' ? (
+        <Sun className="h-4 w-4" />
+      ) : (
+        <div className="relative h-4 w-4">
+          <Sun className="absolute h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        </div>
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

package/src/components/diagram/DiagramViewer.tsx

@@ -0,0 +1,256 @@
+import { useState, useRef, useCallback, useEffect } from 'react'
+import { MermaidRenderer } from './MermaidRenderer'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import {
+  ZoomIn,
+  ZoomOut,
+  RotateCcw,
+  Download,
+  Maximize2,
+  Copy,
+  Check,
+} from 'lucide-react'
+
+export interface DiagramViewerProps {
+  /** Mermaid diagram code */
+  code: string
+  /** Optional title */
+  title?: string
+  /** Optional className */
+  className?: string
+  /** Theme */
+  theme?: 'default' | 'dark' | 'forest' | 'neutral'
+  /** Callback when a node is clicked */
+  onNodeClick?: (nodeId: string, path: string) => void
+  /** Show controls */
+  showControls?: boolean
+  /** Initial zoom level */
+  initialZoom?: number
+}
+
+const MIN_ZOOM = 0.25
+const MAX_ZOOM = 3
+const ZOOM_STEP = 0.25
+
+export function DiagramViewer({
+  code,
+  title,
+  className,
+  theme = 'default',
+  onNodeClick,
+  showControls = true,
+  initialZoom = 1,
+}: DiagramViewerProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [zoom, setZoom] = useState(initialZoom)
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
+  const [copied, setCopied] = useState(false)
+  const [isFullscreen, setIsFullscreen] = useState(false)
+
+  // Zoom controls
+  const handleZoomIn = useCallback(() => {
+    setZoom((z) => Math.min(z + ZOOM_STEP, MAX_ZOOM))
+  }, [])
+
+  const handleZoomOut = useCallback(() => {
+    setZoom((z) => Math.max(z - ZOOM_STEP, MIN_ZOOM))
+  }, [])
+
+  const handleReset = useCallback(() => {
+    setZoom(1)
+    setPosition({ x: 0, y: 0 })
+  }, [])
+
+  // Wheel zoom
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault()
+      const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP
+      setZoom((z) => Math.min(Math.max(z + delta, MIN_ZOOM), MAX_ZOOM))
+    }
+  }, [])
+
+  // Pan controls
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (e.button !== 0) return // Left click only
+    setIsDragging(true)
+    setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y })
+  }, [position])
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDragging) return
+      setPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y,
+      })
+    },
+    [isDragging, dragStart]
+  )
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false)
+  }, [])
+
+  // Copy code
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [code])
+
+  // Download SVG
+  const handleDownload = useCallback(() => {
+    const svg = containerRef.current?.querySelector('svg')
+    if (!svg) return
+
+    const svgData = new XMLSerializer().serializeToString(svg)
+    const blob = new Blob([svgData], { type: 'image/svg+xml' })
+    const url = URL.createObjectURL(blob)
+
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${title || 'diagram'}.svg`
+    a.click()
+
+    URL.revokeObjectURL(url)
+  }, [title])
+
+  // Fullscreen
+  const handleFullscreen = useCallback(() => {
+    if (!containerRef.current) return
+
+    if (isFullscreen) {
+      document.exitFullscreen()
+    } else {
+      containerRef.current.requestFullscreen()
+    }
+  }, [isFullscreen])
+
+  // Listen for fullscreen changes
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement)
+    }
+    document.addEventListener('fullscreenchange', handleFullscreenChange)
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange)
+    }
+  }, [])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        'relative flex flex-col border rounded-lg bg-background overflow-hidden',
+        isFullscreen && 'fixed inset-0 z-50 rounded-none',
+        className
+      )}
+    >
+      {/* Header */}
+      {(title || showControls) && (
+        <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/30">
+          {title && <h3 className="font-medium text-sm">{title}</h3>}
+          {showControls && (
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleZoomOut}
+                disabled={zoom <= MIN_ZOOM}
+                title="축소"
+              >
+                <ZoomOut className="h-4 w-4" />
+              </Button>
+              <span className="text-xs text-muted-foreground w-12 text-center">
+                {Math.round(zoom * 100)}%
+              </span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleZoomIn}
+                disabled={zoom >= MAX_ZOOM}
+                title="확대"
+              >
+                <ZoomIn className="h-4 w-4" />
+              </Button>
+              <div className="w-px h-4 bg-border mx-1" />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleReset}
+                title="초기화"
+              >
+                <RotateCcw className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleCopy}
+                title="코드 복사"
+              >
+                {copied ? (
+                  <Check className="h-4 w-4 text-green-500" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleDownload}
+                title="SVG 다운로드"
+              >
+                <Download className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleFullscreen}
+                title={isFullscreen ? '전체화면 종료' : '전체화면'}
+              >
+                <Maximize2 className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Diagram area */}
+      <div
+        className={cn(
+          'flex-1 overflow-hidden cursor-grab',
+          isDragging && 'cursor-grabbing'
+        )}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      >
+        <div
+          className="min-h-[300px] p-4 transition-transform duration-75"
+          style={{
+            transform: `translate(${position.x}px, ${position.y}px) scale(${zoom})`,
+            transformOrigin: 'center center',
+          }}
+        >
+          <MermaidRenderer
+            code={code}
+            theme={theme}
+            onNodeClick={onNodeClick}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/diagram/MermaidRenderer.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useRef, useState, useCallback } from 'react'
+import mermaid from 'mermaid'
+import DOMPurify from 'dompurify'
+import { cn } from '@/lib/utils'
+
+// Initialize mermaid with default config
+// Security Note: 'loose' is required for click handlers (onNodeClick).
+// SVG output is sanitized with DOMPurify to prevent XSS attacks.
+mermaid.initialize({
+  startOnLoad: false,
+  theme: 'default',
+  securityLevel: 'loose', // Required for click handlers; SVG sanitized via DOMPurify
+  fontFamily: 'ui-sans-serif, system-ui, sans-serif',
+  flowchart: {
+    htmlLabels: true,
+    curve: 'basis',
+  },
+})
+
+export interface MermaidRendererProps {
+  /** Mermaid diagram code */
+  code: string
+  /** Optional className for container */
+  className?: string
+  /** Theme override */
+  theme?: 'default' | 'dark' | 'forest' | 'neutral'
+  /** Callback when a node is clicked */
+  onNodeClick?: (nodeId: string, path: string) => void
+  /** Callback on render error */
+  onError?: (error: Error) => void
+  /** Callback on successful render */
+  onRender?: () => void
+}
+
+export function MermaidRenderer({
+  code,
+  className,
+  theme = 'default',
+  onNodeClick,
+  onError,
+  onRender,
+}: MermaidRendererProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [isRendering, setIsRendering] = useState(false)
+
+  // Handle click events from diagram
+  const handleNodeClick = useCallback(
+    (nodeId: string) => {
+      if (!onNodeClick) return
+
+      // Extract path from click event in the code
+      const clickMatch = code.match(new RegExp(`click ${nodeId} "([^"]+)"`))
+      if (clickMatch) {
+        onNodeClick(nodeId, clickMatch[1])
+      }
+    },
+    [code, onNodeClick]
+  )
+
+  // Expose click handler globally for mermaid
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).mermaidClickHandler = handleNodeClick
+    return () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      delete (window as any).mermaidClickHandler
+    }
+  }, [handleNodeClick])
+
+  // Render diagram
+  useEffect(() => {
+    if (!containerRef.current || !code.trim()) return
+
+    const renderDiagram = async () => {
+      setIsRendering(true)
+      setError(null)
+
+      try {
+        // Update mermaid theme (securityLevel: 'loose' required for click handlers)
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: theme,
+          securityLevel: 'loose',
+        })
+
+        // Clear previous content
+        containerRef.current!.innerHTML = ''
+
+        // Generate unique ID
+        const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`
+
+        // Process code to add click handlers
+        let processedCode = code
+        if (onNodeClick) {
+          // Replace click events with JavaScript callbacks
+          processedCode = code.replace(
+            /click (\w+) "([^"]+)"/g,
+            'click $1 call mermaidClickHandler("$1")'
+          )
+        }
+
+        // Render and sanitize SVG to prevent XSS
+        const { svg } = await mermaid.render(id, processedCode)
+        const sanitizedSvg = DOMPurify.sanitize(svg, {
+          USE_PROFILES: { svg: true, svgFilters: true },
+          ADD_TAGS: ['use'], // Allow SVG use elements
+        })
+        containerRef.current!.innerHTML = sanitizedSvg
+
+        onRender?.()
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err))
+        setError(error.message)
+        onError?.(error)
+      } finally {
+        setIsRendering(false)
+      }
+    }
+
+    renderDiagram()
+  }, [code, theme, onNodeClick, onError, onRender])
+
+  if (error) {
+    return (
+      <div
+        className={cn(
+          'p-4 rounded-lg border border-destructive bg-destructive/10',
+          className
+        )}
+      >
+        <p className="text-sm font-medium text-destructive">
+          다이어그램 렌더링 오류
+        </p>
+        <pre className="mt-2 text-xs text-muted-foreground whitespace-pre-wrap">
+          {error}
+        </pre>
+        <details className="mt-4">
+          <summary className="text-xs text-muted-foreground cursor-pointer">
+            원본 코드 보기
+          </summary>
+          <pre className="mt-2 p-2 text-xs bg-muted rounded overflow-auto max-h-48">
+            {code}
+          </pre>
+        </details>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('relative', className)}>
+      {isRendering && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+        </div>
+      )}
+      <div
+        ref={containerRef}
+        className="mermaid-container [&_svg]:max-w-full [&_svg]:h-auto"
+      />
+    </div>
+  )
+}