zyflow 0.6.4

package/src/components/layout/StatusBar.tsx

@@ -0,0 +1,226 @@
+/**
+ * Status Bar Component
+ *
+ * Horizontal bar below header with sidebar toggles and status indicators
+ */
+
+import { useState } from 'react'
+import {
+  PanelLeft,
+  PanelLeftClose,
+  PanelRight,
+  PanelRightClose,
+  FolderOpen,
+  Copy,
+  Check,
+  GitBranch,
+  Circle,
+  ArrowUp,
+  ArrowDown,
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
+import { useGitStatus } from '@/hooks/useGit'
+import { toast } from 'sonner'
+
+interface StatusBarProps {
+  leftSidebarCollapsed: boolean
+  rightSidebarCollapsed: boolean
+  onToggleLeftSidebar: () => void
+  onToggleRightSidebar: () => void
+  currentWorkingDirectory?: string
+  className?: string
+}
+
+export function StatusBar({
+  leftSidebarCollapsed,
+  rightSidebarCollapsed,
+  onToggleLeftSidebar,
+  onToggleRightSidebar,
+  currentWorkingDirectory,
+  className,
+}: StatusBarProps) {
+  const [copied, setCopied] = useState(false)
+  const { data: gitStatus } = useGitStatus()
+
+  // 경로에서 마지막 2-3 폴더만 표시 (너무 길면 축약)
+  const shortenPath = (path: string | undefined) => {
+    if (!path) return null
+    const parts = path.split('/')
+    if (parts.length <= 3) return path
+    return '~/' + parts.slice(-2).join('/')
+  }
+
+  const handleCopyPath = async () => {
+    if (!currentWorkingDirectory) return
+    try {
+      await navigator.clipboard.writeText(currentWorkingDirectory)
+      setCopied(true)
+      toast.success('경로가 복사되었습니다')
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      toast.error('복사에 실패했습니다')
+    }
+  }
+
+  const displayPath = shortenPath(currentWorkingDirectory)
+
+  // Git 상태 계산
+  const isDirty = gitStatus?.isDirty ?? false
+  const hasAhead = (gitStatus?.ahead ?? 0) > 0
+  const hasBehind = (gitStatus?.behind ?? 0) > 0
+
+  return (
+    <div
+      className={cn(
+        'flex h-8 shrink-0 items-center justify-between border-b bg-muted/30 px-2',
+        className
+      )}
+    >
+      {/* Left Side - Sidebar Toggle */}
+      <div className="flex items-center gap-2">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={onToggleLeftSidebar}
+              >
+                {leftSidebarCollapsed ? (
+                  <PanelLeft className="h-4 w-4" />
+                ) : (
+                  <PanelLeftClose className="h-4 w-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              {leftSidebarCollapsed ? '사이드바 열기' : '사이드바 접기'} (⌘B)
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      {/* Center - Current Working Directory + Git Status */}
+      <div className="flex-1 flex items-center justify-center gap-3">
+        {/* Folder Path with Copy Button */}
+        {displayPath && (
+          <div className="flex items-center gap-1">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground px-2 py-1 rounded hover:bg-muted/50 cursor-default max-w-md">
+                    <FolderOpen className="h-3 w-3 shrink-0" />
+                    <span className="truncate font-mono">{displayPath}</span>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <div className="text-xs font-mono">{currentWorkingDirectory}</div>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-5 w-5"
+                    onClick={handleCopyPath}
+                  >
+                    {copied ? (
+                      <Check className="h-3 w-3 text-green-500" />
+                    ) : (
+                      <Copy className="h-3 w-3 text-muted-foreground" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">경로 복사</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        )}
+
+        {/* Git Status */}
+        {gitStatus?.isGitRepo && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="flex items-center gap-1.5 text-xs px-2 py-1 rounded hover:bg-muted/50 cursor-default">
+                  <GitBranch className="h-3 w-3 text-muted-foreground" />
+                  <span className="font-mono text-muted-foreground">
+                    {gitStatus.branch}
+                  </span>
+                  {/* Dirty indicator */}
+                  {isDirty && (
+                    <Circle className="h-2 w-2 fill-orange-500 text-orange-500" />
+                  )}
+                  {/* Ahead/Behind */}
+                  {hasAhead && (
+                    <span className="flex items-center gap-0.5 text-green-600 dark:text-green-400">
+                      <ArrowUp className="h-3 w-3" />
+                      {gitStatus.ahead}
+                    </span>
+                  )}
+                  {hasBehind && (
+                    <span className="flex items-center gap-0.5 text-blue-600 dark:text-blue-400">
+                      <ArrowDown className="h-3 w-3" />
+                      {gitStatus.behind}
+                    </span>
+                  )}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <div className="text-xs space-y-1">
+                  <div className="font-medium">Git Status</div>
+                  <div>브랜치: {gitStatus.branch}</div>
+                  {gitStatus.upstream && <div>업스트림: {gitStatus.upstream}</div>}
+                  {isDirty && (
+                    <div className="text-orange-500">
+                      변경됨: {gitStatus.modified.length + gitStatus.staged.length + gitStatus.untracked.length}개 파일
+                    </div>
+                  )}
+                  {hasAhead && <div className="text-green-500">↑ {gitStatus.ahead}개 커밋 푸시 대기</div>}
+                  {hasBehind && <div className="text-blue-500">↓ {gitStatus.behind}개 커밋 풀 대기</div>}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+
+      </div>
+
+      {/* Right Side - Chat Toggle */}
+      <div className="flex items-center gap-2">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={onToggleRightSidebar}
+              >
+                {rightSidebarCollapsed ? (
+                  <PanelRight className="h-4 w-4" />
+                ) : (
+                  <PanelRightClose className="h-4 w-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              {rightSidebarCollapsed ? '채팅 열기' : '채팅 접기'} (⌘⇧C)
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    </div>
+  )
+}

package/src/components/monitoring/ErrorDashboard.tsx

@@ -0,0 +1,274 @@
+/**
+ * Error Monitoring Dashboard Component
+ * Displays error history, statistics, filters, and export options
+ * @module components/monitoring/ErrorDashboard
+ */
+
+'use client'
+
+import React, { useState, useMemo, useCallback } from 'react'
+import {
+  ErrorContext,
+  ErrorSeverity,
+  ErrorType,
+} from '@/types/errors'
+import { getErrorLogger } from '@/utils/error-logger'
+import {
+  calculateErrorStats,
+  calculateErrorTrend,
+  formatRelativeTime,
+} from '@/utils/error-statistics'
+import ErrorHistoryList from './ErrorHistoryList'
+import ErrorStats from './ErrorStats'
+import ErrorDetailPanel from './ErrorDetailPanel'
+import ErrorFilters from './ErrorFilters'
+
+// =============================================
+// Types
+// =============================================
+
+interface FilterOptions {
+  searchText: string
+  errorType?: ErrorType
+  severity?: ErrorSeverity
+  dateRange: [Date, Date]
+  component?: string
+}
+
+// =============================================
+// Component
+// =============================================
+
+export default function ErrorDashboard() {
+  const [errors, setErrors] = useState<ErrorContext[]>([])
+  const [selectedError, setSelectedError] = useState<ErrorContext | null>(null)
+  const [filters, setFilters] = useState<FilterOptions>({
+    searchText: '',
+    dateRange: [
+      new Date(Date.now() - 24 * 60 * 60 * 1000), // 24 hours ago
+      new Date(),
+    ],
+  })
+  const [isLoading, setIsLoading] = useState(true)
+
+  // Load errors on mount
+  React.useEffect(() => {
+    const loadErrors = () => {
+      const logger = getErrorLogger()
+      const allErrors = logger.getAllErrors()
+      setErrors(allErrors)
+      setIsLoading(false)
+    }
+
+    loadErrors()
+
+    // Refresh every 5 seconds
+    const interval = setInterval(loadErrors, 5000)
+    return () => clearInterval(interval)
+  }, [])
+
+  // Filter errors based on criteria
+  const filteredErrors = useMemo(() => {
+    return errors.filter((error) => {
+      // Search text filter
+      if (filters.searchText) {
+        const searchLower = filters.searchText.toLowerCase()
+        const matchesSearch =
+          error.code.toLowerCase().includes(searchLower) ||
+          error.message.toLowerCase().includes(searchLower) ||
+          error.component?.toLowerCase().includes(searchLower) ||
+          error.function?.toLowerCase().includes(searchLower)
+        if (!matchesSearch) return false
+      }
+
+      // Type filter
+      if (filters.errorType && error.type !== filters.errorType) {
+        return false
+      }
+
+      // Severity filter
+      if (filters.severity && error.severity !== filters.severity) {
+        return false
+      }
+
+      // Component filter
+      if (filters.component && error.component !== filters.component) {
+        return false
+      }
+
+      // Date range filter
+      const errorTime = error.timestamp
+      const [startDate, endDate] = filters.dateRange
+      if (
+        errorTime < startDate.getTime() ||
+        errorTime > endDate.getTime()
+      ) {
+        return false
+      }
+
+      return true
+    })
+  }, [errors, filters])
+
+  // Calculate statistics
+  const stats = useMemo(() => {
+    return calculateErrorStats(filteredErrors)
+  }, [filteredErrors])
+
+  // Calculate trend
+  const trend = useMemo(() => {
+    return calculateErrorTrend(filteredErrors, '24h')
+  }, [filteredErrors])
+
+  // Export errors as JSON
+  const handleExportJSON = useCallback(() => {
+    const data = {
+      exportedAt: new Date().toISOString(),
+      filters,
+      errorCount: filteredErrors.length,
+      errors: filteredErrors,
+      statistics: stats,
+    }
+
+    const json = JSON.stringify(data, null, 2)
+    const blob = new Blob([json], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `error-log-${Date.now()}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }, [filteredErrors, filters, stats])
+
+  // Export errors as CSV
+  const handleExportCSV = useCallback(() => {
+    const headers = [
+      'Timestamp',
+      'Code',
+      'Message',
+      'Type',
+      'Severity',
+      'Component',
+      'Function',
+      'Recoverable',
+    ]
+
+    const rows = filteredErrors.map((error) => [
+      new Date(error.timestamp).toISOString(),
+      error.code,
+      error.message,
+      error.type,
+      error.severity,
+      error.component || '',
+      error.function || '',
+      error.recoverable ? 'Yes' : 'No',
+    ])
+
+    const csv =
+      headers.join(',') +
+      '\n' +
+      rows.map((row) => row.map((cell) => `"${cell}"`).join(',')).join('\n')
+
+    const blob = new Blob([csv], { type: 'text/csv' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `error-log-${Date.now()}.csv`
+    a.click()
+    URL.revokeObjectURL(url)
+  }, [filteredErrors])
+
+  // Clear all errors
+  const handleClearAll = useCallback(() => {
+    if (confirm('Are you sure you want to clear all error logs?')) {
+      const logger = getErrorLogger()
+      logger.clear()
+      setErrors([])
+      setSelectedError(null)
+    }
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">
+            Error Dashboard
+          </h1>
+          <p className="text-gray-600 mt-1">
+            Monitor and analyze system errors
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={handleExportJSON}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            Export JSON
+          </button>
+          <button
+            onClick={handleExportCSV}
+            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
+          >
+            Export CSV
+          </button>
+          <button
+            onClick={handleClearAll}
+            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
+          >
+            Clear All
+          </button>
+        </div>
+      </div>
+
+      {/* Filter Bar */}
+      <ErrorFilters filters={filters} onFiltersChange={setFilters} />
+
+      {/* Statistics */}
+      <ErrorStats stats={stats} trend={trend} />
+
+      {/* Main Content */}
+      <div className="grid grid-cols-3 gap-6">
+        {/* Error History List */}
+        <div className="col-span-2">
+          <ErrorHistoryList
+            errors={filteredErrors}
+            selectedError={selectedError}
+            onSelectError={setSelectedError}
+          />
+        </div>
+
+        {/* Detail Panel */}
+        <div className="col-span-1">
+          {selectedError ? (
+            <ErrorDetailPanel error={selectedError} />
+          ) : (
+            <div className="bg-gray-50 rounded-lg p-6 h-96 flex items-center justify-center">
+              <p className="text-gray-500 text-center">
+                Select an error to view details
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Summary */}
+      <div className="bg-gray-50 rounded-lg p-4">
+        <p className="text-sm text-gray-600">
+          Showing {filteredErrors.length} of {errors.length} total errors
+          {errors.length > 0 &&
+            ` (Latest: ${formatRelativeTime(errors[0].timestamp)})`}
+        </p>
+      </div>
+    </div>
+  )
+}

package/src/components/monitoring/ErrorDetailPanel.tsx

@@ -0,0 +1,200 @@
+/**
+ * Error Detail Panel Component
+ * Displays detailed information about a selected error
+ * @module components/monitoring/ErrorDetailPanel
+ */
+
+'use client'
+
+import React, { useState } from 'react'
+import { ErrorContext, ErrorSeverity } from '@/types/errors'
+import { formatRelativeTime, formatDuration } from '@/utils/error-statistics'
+
+// =============================================
+// Types
+// =============================================
+
+interface ErrorDetailPanelProps {
+  error: ErrorContext
+}
+
+// =============================================
+// Component
+// =============================================
+
+export default function ErrorDetailPanel({ error }: ErrorDetailPanelProps) {
+  const [showStack, setShowStack] = useState(false)
+  const [showContext, setShowContext] = useState(false)
+
+  const handleCopyCode = () => {
+    navigator.clipboard.writeText(error.code)
+  }
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 overflow-hidden flex flex-col h-full">
+      {/* Header */}
+      <div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
+        <h3 className="font-semibold text-gray-900">Error Details</h3>
+      </div>
+
+      {/* Content */}
+      <div className="overflow-y-auto flex-1 p-4 space-y-4">
+        {/* Error Code */}
+        <div>
+          <p className="text-xs text-gray-500 font-medium mb-1">ERROR CODE</p>
+          <div className="flex items-center gap-2">
+            <code className="text-sm font-mono bg-gray-100 px-3 py-2 rounded flex-1">
+              {error.code}
+            </code>
+            <button
+              onClick={handleCopyCode}
+              className="px-2 py-2 text-gray-600 hover:bg-gray-100 rounded transition-colors"
+              title="Copy error code"
+            >
+              📋
+            </button>
+          </div>
+        </div>
+
+        {/* Message */}
+        <div>
+          <p className="text-xs text-gray-500 font-medium mb-1">MESSAGE</p>
+          <p className="text-sm text-gray-800 p-2 bg-gray-50 rounded">
+            {error.message}
+          </p>
+        </div>
+
+        {/* Metadata */}
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <p className="text-xs text-gray-500 font-medium mb-1">SEVERITY</p>
+            <p className="text-sm font-medium capitalize">{error.severity}</p>
+          </div>
+          <div>
+            <p className="text-xs text-gray-500 font-medium mb-1">TYPE</p>
+            <p className="text-sm font-medium capitalize">{error.type}</p>
+          </div>
+          <div>
+            <p className="text-xs text-gray-500 font-medium mb-1">RECOVERABLE</p>
+            <p className="text-sm font-medium">
+              {error.recoverable ? '✅ Yes' : '❌ No'}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs text-gray-500 font-medium mb-1">TIMESTAMP</p>
+            <p className="text-sm font-medium">
+              {formatRelativeTime(error.timestamp)}
+            </p>
+          </div>
+        </div>
+
+        {/* Component Info */}
+        {(error.component || error.function || error.line) && (
+          <div>
+            <p className="text-xs text-gray-500 font-medium mb-1">LOCATION</p>
+            <div className="text-sm space-y-1 p-2 bg-gray-50 rounded">
+              {error.component && (
+                <p>
+                  <span className="text-gray-500">Component:</span>{' '}
+                  <code className="font-mono">{error.component}</code>
+                </p>
+              )}
+              {error.function && (
+                <p>
+                  <span className="text-gray-500">Function:</span>{' '}
+                  <code className="font-mono">{error.function}</code>
+                </p>
+              )}
+              {error.line && (
+                <p>
+                  <span className="text-gray-500">Line:</span>{' '}
+                  <code className="font-mono">{error.line}</code>
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* User Action */}
+        {error.userAction && (
+          <div>
+            <p className="text-xs text-gray-500 font-medium mb-1">USER ACTION</p>
+            <p className="text-sm text-gray-800 p-2 bg-gray-50 rounded">
+              {error.userAction}
+            </p>
+          </div>
+        )}
+
+        {/* Recovery Time */}
+        {error.recoveryTime && error.recoveryTime > 0 && (
+          <div>
+            <p className="text-xs text-gray-500 font-medium mb-1">
+              RECOVERY TIME
+            </p>
+            <p className="text-sm font-medium">
+              {formatDuration(error.recoveryTime)}
+            </p>
+          </div>
+        )}
+
+        {/* Suggested Actions */}
+        {error.suggestedActions && error.suggestedActions.length > 0 && (
+          <div>
+            <p className="text-xs text-gray-500 font-medium mb-1">
+              SUGGESTED ACTIONS
+            </p>
+            <ul className="text-sm space-y-1">
+              {error.suggestedActions.map((action, index) => (
+                <li key={index} className="flex items-start gap-2">
+                  <span className="text-green-600 mt-0.5">→</span>
+                  <span>{action}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {/* Stack Trace */}
+        {error.stack && (
+          <div>
+            <button
+              onClick={() => setShowStack(!showStack)}
+              className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-700 font-medium mb-1"
+            >
+              {showStack ? '▼' : '▶'} STACK TRACE
+            </button>
+            {showStack && (
+              <pre className="text-xs bg-gray-900 text-gray-100 p-2 rounded overflow-x-auto">
+                {error.stack}
+              </pre>
+            )}
+          </div>
+        )}
+
+        {/* Application Context */}
+        {error.applicationState && (
+          <div>
+            <button
+              onClick={() => setShowContext(!showContext)}
+              className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-700 font-medium mb-1"
+            >
+              {showContext ? '▼' : '▶'} APPLICATION STATE
+            </button>
+            {showContext && (
+              <pre className="text-xs bg-gray-900 text-gray-100 p-2 rounded overflow-x-auto max-h-40">
+                {JSON.stringify(error.applicationState, null, 2)}
+              </pre>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="bg-gray-50 px-4 py-2 border-t border-gray-200 text-xs text-gray-500">
+        <p>
+          Logged at {new Date(error.timestamp).toLocaleString()}
+        </p>
+      </div>
+    </div>
+  )
+}