zyflow 0.6.4

package/src/components/diagram/ProjectDiagramTab.tsx

@@ -0,0 +1,161 @@
+/**
+ * Project Diagram Tab
+ *
+ * Dashboard tab for generating and viewing project architecture diagrams
+ */
+
+import { useState, useEffect } from 'react'
+import { Loader2, RefreshCw, AlertCircle, GitFork, Info } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { DiagramViewer } from './DiagramViewer'
+
+interface ProjectDiagramTabProps {
+  projectId: string
+  projectPath: string
+}
+
+interface GenerateResult {
+  mermaidCode: string
+  projectPath: string
+  generated: 'simple' | 'llm'
+  message?: string
+}
+
+export function ProjectDiagramTab({ projectId, projectPath }: ProjectDiagramTabProps) {
+  const [diagramCode, setDiagramCode] = useState<string | null>(null)
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [generationType, setGenerationType] = useState<'simple' | 'llm' | null>(null)
+  const [infoMessage, setInfoMessage] = useState<string | null>(null)
+
+  // Reset diagram when project changes
+  useEffect(() => {
+    setDiagramCode(null)
+    setError(null)
+    setGenerationType(null)
+    setInfoMessage(null)
+  }, [projectId, projectPath])
+
+  // Generate diagram using API
+  const generateDiagram = async () => {
+    setIsGenerating(true)
+    setError(null)
+    setInfoMessage(null)
+
+    try {
+      const response = await fetch('/api/diagram/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ projectPath }),
+      })
+
+      if (!response.ok) {
+        const data = await response.json()
+        throw new Error(data.error || 'Failed to generate diagram')
+      }
+
+      const json = await response.json()
+      const result: GenerateResult = json.data
+
+      setDiagramCode(result.mermaidCode)
+      setGenerationType(result.generated)
+
+      if (result.message) {
+        setInfoMessage(result.message)
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to generate diagram')
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  // Handle node click - open file in editor
+  const handleNodeClick = (_nodeId: string, _path: string) => {
+    // In VSCode extension context, this would open the file
+    // TODO: Integrate with VSCode to open file
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <GitFork className="h-5 w-5" />
+            아키텍처 다이어그램
+          </CardTitle>
+          <CardDescription>
+            프로젝트 구조를 시각적으로 표현한 다이어그램입니다. AI가 코드베이스를
+            분석하여 자동으로 생성합니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-4">
+            <Button
+              onClick={generateDiagram}
+              disabled={isGenerating}
+            >
+              {isGenerating ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  생성 중...
+                </>
+              ) : (
+                <>
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                  다이어그램 생성
+                </>
+              )}
+            </Button>
+
+            {generationType && (
+              <Badge variant={generationType === 'llm' ? 'default' : 'secondary'}>
+                {generationType === 'llm' ? 'AI 생성' : '간단 분석'}
+              </Badge>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Info Message */}
+      {infoMessage && (
+        <Alert>
+          <Info className="h-4 w-4" />
+          <AlertDescription>{infoMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* Error Alert */}
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* Diagram Viewer */}
+      {diagramCode ? (
+        <DiagramViewer
+          code={diagramCode}
+          onNodeClick={handleNodeClick}
+          className="h-[600px]"
+        />
+      ) : (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+            <GitFork className="h-12 w-12 mb-4 opacity-30" />
+            <p className="text-center">
+              "다이어그램 생성" 버튼을 클릭하여
+              <br />
+              프로젝트 아키텍처를 시각화하세요
+            </p>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}

package/src/components/diagram/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Diagram Components
+ *
+ * Components for rendering and viewing Mermaid diagrams
+ */
+
+export { MermaidRenderer } from './MermaidRenderer'
+export type { MermaidRendererProps } from './MermaidRenderer'
+
+export { DiagramViewer } from './DiagramViewer'
+export type { DiagramViewerProps } from './DiagramViewer'
+
+export { ProjectDiagramTab } from './ProjectDiagramTab'

package/src/components/errors/ErrorBoundary.tsx

@@ -0,0 +1,276 @@
+/**
+ * Global Error Boundary Component
+ * Catches React rendering errors and displays fallback UI
+ * @module components/errors/ErrorBoundary
+ */
+
+import React, { ReactNode, ReactElement } from 'react'
+import { ErrorContext, ErrorSeverity, ErrorType, ComponentErrorCode } from '@/types/errors'
+import { logError } from '@/utils/error-logger'
+import { useErrorStore_addError } from '@/stores/errorStore'
+import { ErrorFallback } from './ErrorFallback'
+
+// =============================================
+// Props
+// =============================================
+
+export interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: (error: Error, reset: () => void) => ReactElement
+  onError?: (error: Error, info: React.ErrorInfo) => void
+  isolate?: boolean
+  showDetails?: boolean
+  boundaryName?: string
+}
+
+// =============================================
+// Error Boundary Component
+// =============================================
+
+interface State {
+  hasError: boolean
+  error: Error | null
+  errorInfo: React.ErrorInfo | null
+  errorContext: ErrorContext | null
+  retryCount: number
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      errorContext: null,
+      retryCount: 0,
+    }
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return {
+      hasError: true,
+      error,
+    }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    const isDevelopment = process.env.NODE_ENV === 'development'
+
+    // Extract error location from component stack
+    let component = 'Unknown'
+    let line: number | undefined
+    const stackMatch = errorInfo.componentStack?.match(/in (\w+)/)
+    if (stackMatch) {
+      component = stackMatch[1]
+    }
+
+    // Create error context
+    const errorContext: ErrorContext = {
+      code: ComponentErrorCode.RENDER_ERROR,
+      message: error.message || 'Unknown render error',
+      severity: ErrorSeverity.CRITICAL,
+      type: ErrorType.COMPONENT,
+      timestamp: Date.now(),
+      component: this.props.boundaryName || component,
+      originalError: error,
+      stack: error.stack,
+      recoverable: true,
+      suggestedActions: ['retry', 'reset', 'navigate'],
+      isDevelopment,
+      userAction: 'viewing component',
+      applicationState: {
+        boundaryName: this.props.boundaryName,
+        retryCount: this.state.retryCount,
+      },
+    }
+
+    // Log to error logger
+    logError(errorContext)
+
+    // Add to error store
+    useErrorStore_addError(errorContext)
+
+    // Call custom error handler if provided
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo)
+    }
+
+    // Update state with error context
+    this.setState({
+      errorInfo,
+      errorContext,
+    })
+
+    // Log to console in development
+    if (isDevelopment) {
+      console.error('Error Boundary caught an error:', error, errorInfo)
+    }
+  }
+
+  handleReset = (): void => {
+    this.setState((prevState) => ({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      errorContext: null,
+      retryCount: prevState.retryCount + 1,
+    }))
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      const isDevelopment = process.env.NODE_ENV === 'development'
+
+      // Use custom fallback if provided
+      if (this.props.fallback && this.state.error) {
+        return this.props.fallback(this.state.error, this.handleReset)
+      }
+
+      // Use default fallback
+      return (
+        <ErrorFallback
+          error={this.state.error}
+          errorInfo={this.state.errorInfo}
+          errorContext={this.state.errorContext}
+          onRetry={this.handleReset}
+          showDetails={this.props.showDetails ?? isDevelopment}
+          retryCount={this.state.retryCount}
+        />
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+// =============================================
+// Higher-Order Component
+// =============================================
+
+export function withErrorBoundary<P extends object>(
+  Component: React.ComponentType<P>,
+  errorBoundaryProps?: Omit<ErrorBoundaryProps, 'children'>
+): React.FC<P> {
+  const WrappedComponent: React.FC<P> = (props) => (
+    <ErrorBoundary {...errorBoundaryProps}>
+      <Component {...props} />
+    </ErrorBoundary>
+  )
+
+  WrappedComponent.displayName = `withErrorBoundary(${Component.displayName || Component.name || 'Component'})`
+
+  return WrappedComponent
+}
+
+// =============================================
+// Utility: Create isolated error boundary
+// =============================================
+
+export interface IsolatedErrorBoundaryProps extends ErrorBoundaryProps {
+  level?: 'section' | 'component' | 'feature'
+}
+
+export class IsolatedErrorBoundary extends React.Component<IsolatedErrorBoundaryProps, State> {
+  constructor(props: IsolatedErrorBoundaryProps) {
+    super(props)
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      errorContext: null,
+      retryCount: 0,
+    }
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return {
+      hasError: true,
+      error,
+    }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    const isDevelopment = process.env.NODE_ENV === 'development'
+    const level = this.props.level || 'component'
+
+    // Extract error location
+    let component = `${level}:Unknown`
+    const stackMatch = errorInfo.componentStack?.match(/in (\w+)/)
+    if (stackMatch) {
+      component = `${level}:${stackMatch[1]}`
+    }
+
+    // Create error context with isolation level
+    const errorContext: ErrorContext = {
+      code: ComponentErrorCode.RENDER_ERROR,
+      message: error.message || 'Unknown render error',
+      severity: ErrorSeverity.ERROR,
+      type: ErrorType.COMPONENT,
+      timestamp: Date.now(),
+      component: this.props.boundaryName || component,
+      originalError: error,
+      stack: error.stack,
+      recoverable: true,
+      suggestedActions: ['retry', 'reset'],
+      isDevelopment,
+      userAction: `viewing ${level}`,
+      applicationState: {
+        isolationLevel: level,
+        boundaryName: this.props.boundaryName,
+        retryCount: this.state.retryCount,
+      },
+    }
+
+    // Log to error logger and store
+    logError(errorContext)
+    useErrorStore_addError(errorContext)
+
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo)
+    }
+
+    this.setState({
+      errorInfo,
+      errorContext,
+    })
+
+    if (isDevelopment) {
+      console.error(`[${level.toUpperCase()}] Error Boundary caught:`, error, errorInfo)
+    }
+  }
+
+  handleReset = (): void => {
+    this.setState((prevState) => ({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      errorContext: null,
+      retryCount: prevState.retryCount + 1,
+    }))
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      const isDevelopment = process.env.NODE_ENV === 'development'
+
+      if (this.props.fallback && this.state.error) {
+        return this.props.fallback(this.state.error, this.handleReset)
+      }
+
+      return (
+        <ErrorFallback
+          error={this.state.error}
+          errorInfo={this.state.errorInfo}
+          errorContext={this.state.errorContext}
+          onRetry={this.handleReset}
+          showDetails={this.props.showDetails ?? isDevelopment}
+          retryCount={this.state.retryCount}
+          level={this.props.level}
+        />
+      )
+    }
+
+    return this.props.children
+  }
+}

package/src/components/errors/ErrorFallback.tsx

@@ -0,0 +1,198 @@
+/**
+ * Error Fallback UI Component
+ * Displays error information and recovery options
+ * @module components/errors/ErrorFallback
+ */
+
+import React, { useState } from 'react'
+import { AlertTriangle, Home, RotateCcw, ChevronDown } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { ErrorContext } from '@/types/errors'
+import { cn } from '@/lib/utils'
+
+// =============================================
+// Props
+// =============================================
+
+export interface ErrorFallbackProps {
+  error: Error | null
+  errorInfo: React.ErrorInfo | null
+  errorContext: ErrorContext | null
+  onRetry?: () => void
+  onReset?: () => void
+  onNavigateHome?: () => void
+  showDetails?: boolean
+  retryCount?: number
+  level?: 'section' | 'component' | 'feature'
+}
+
+// =============================================
+// Error Fallback Component
+// =============================================
+
+export const ErrorFallback: React.FC<ErrorFallbackProps> = ({
+  error,
+  errorInfo,
+  errorContext,
+  onRetry,
+  onReset,
+  onNavigateHome,
+  showDetails = false,
+  retryCount = 0,
+  level = 'component',
+}) => {
+  const [showStackTrace, setShowStackTrace] = useState(false)
+  const isDevelopment = process.env.NODE_ENV === 'development'
+  const maxRetries = 3
+
+  const handleNavigateHome = (): void => {
+    if (onNavigateHome) {
+      onNavigateHome()
+    } else {
+      window.location.href = '/'
+    }
+  }
+
+  const handleCopyError = (): void => {
+    const errorText = `
+Error: ${error?.message}
+Code: ${errorContext?.code}
+Component: ${errorContext?.component}
+Time: ${new Date(errorContext?.timestamp || 0).toISOString()}
+${error?.stack || 'No stack trace available'}
+    `.trim()
+
+    navigator.clipboard.writeText(errorText).catch(console.error)
+  }
+
+  const canRetry = retryCount < maxRetries && errorContext?.recoverable !== false
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center min-h-screen bg-background p-6',
+        level === 'section' && 'min-h-96',
+        level === 'component' && 'min-h-48',
+      )}
+    >
+      <div className="max-w-md text-center space-y-6">
+        {/* Error Icon */}
+        <div className="flex justify-center">
+          <AlertTriangle className="h-16 w-16 text-destructive" />
+        </div>
+
+        {/* Error Heading */}
+        <div className="space-y-2">
+          <h1 className="text-2xl font-bold tracking-tight">
+            {level === 'section' && "We're Having Trouble"}
+            {level === 'component' && 'Component Error'}
+            {level === 'feature' && 'Feature Error'}
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            {errorContext?.message || error?.message || 'An unexpected error occurred'}
+          </p>
+        </div>
+
+        {/* Error Code (if available) */}
+        {errorContext?.code && (
+          <div className="bg-muted rounded-md p-3 space-y-1">
+            <p className="text-xs font-medium text-muted-foreground">Error Code</p>
+            <p className="font-mono text-sm">{errorContext.code}</p>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-3 justify-center flex-wrap">
+          {canRetry && (
+            <Button onClick={onRetry} variant="default" size="sm">
+              <RotateCcw className="h-4 w-4 mr-2" />
+              Try Again
+            </Button>
+          )}
+
+          <Button onClick={handleNavigateHome} variant="outline" size="sm">
+            <Home className="h-4 w-4 mr-2" />
+            Go Home
+          </Button>
+
+          {isDevelopment && (
+            <Button onClick={handleCopyError} variant="ghost" size="sm">
+              Copy Error
+            </Button>
+          )}
+        </div>
+
+        {/* Retry Count */}
+        {retryCount > 0 && (
+          <p className="text-xs text-muted-foreground">
+            Attempt {retryCount + 1} of {maxRetries + 1}
+          </p>
+        )}
+
+        {/* Development Details */}
+        {isDevelopment && showDetails && errorInfo && (
+          <div className="mt-8 space-y-3 text-left">
+            <button
+              onClick={() => setShowStackTrace(!showStackTrace)}
+              className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors w-full"
+            >
+              <ChevronDown
+                className={cn('h-4 w-4 transition-transform', showStackTrace && 'rotate-180')}
+              />
+              <span className="font-medium">Error Details</span>
+            </button>
+
+            {showStackTrace && (
+              <div className="space-y-3 mt-3 border-l-2 border-muted pl-3">
+                {/* Component Stack */}
+                {errorInfo.componentStack && (
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground mb-1">Component Stack:</p>
+                    <pre className="text-xs bg-muted p-2 rounded overflow-auto max-h-40 text-muted-foreground whitespace-pre-wrap break-words">
+                      {errorInfo.componentStack}
+                    </pre>
+                  </div>
+                )}
+
+                {/* Error Stack */}
+                {error?.stack && (
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground mb-1">Error Stack:</p>
+                    <pre className="text-xs bg-muted p-2 rounded overflow-auto max-h-40 text-muted-foreground whitespace-pre-wrap break-words">
+                      {error.stack}
+                    </pre>
+                  </div>
+                )}
+
+                {/* Error Context */}
+                {errorContext && (
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground mb-1">Context:</p>
+                    <pre className="text-xs bg-muted p-2 rounded overflow-auto max-h-40 text-muted-foreground whitespace-pre-wrap break-words">
+                      {JSON.stringify(
+                        {
+                          code: errorContext.code,
+                          component: errorContext.component,
+                          function: errorContext.function,
+                          timestamp: new Date(errorContext.timestamp).toISOString(),
+                          severity: errorContext.severity,
+                        },
+                        null,
+                        2
+                      )}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Support Info */}
+        <p className="text-xs text-muted-foreground">
+          If the problem persists, please contact support or try refreshing the page.
+        </p>
+      </div>
+    </div>
+  )
+}