zyflow 0.6.4

package/src/components/monitoring/ErrorFilters.tsx

@@ -0,0 +1,219 @@
+/**
+ * Error Filters Component
+ * Provides filtering and search interface for error logs
+ * @module components/monitoring/ErrorFilters
+ */
+
+'use client'
+
+import React, { useState } from 'react'
+import { ErrorSeverity, ErrorType } from '@/types/errors'
+
+// =============================================
+// Types
+// =============================================
+
+interface FilterOptions {
+  searchText: string
+  errorType?: ErrorType
+  severity?: ErrorSeverity
+  dateRange: [Date, Date]
+  component?: string
+}
+
+interface ErrorFiltersProps {
+  filters: FilterOptions
+  onFiltersChange: (filters: FilterOptions) => void
+}
+
+// =============================================
+// Component
+// =============================================
+
+export default function ErrorFilters({
+  filters,
+  onFiltersChange,
+}: ErrorFiltersProps) {
+  const [showAdvanced, setShowAdvanced] = useState(false)
+
+  const handleSearchChange = (value: string) => {
+    onFiltersChange({
+      ...filters,
+      searchText: value,
+    })
+  }
+
+  const handleTypeChange = (type: ErrorType | undefined) => {
+    onFiltersChange({
+      ...filters,
+      errorType: type,
+    })
+  }
+
+  const handleSeverityChange = (severity: ErrorSeverity | undefined) => {
+    onFiltersChange({
+      ...filters,
+      severity,
+    })
+  }
+
+  const handleComponentChange = (value: string) => {
+    onFiltersChange({
+      ...filters,
+      component: value || undefined,
+    })
+  }
+
+  const handleStartDateChange = (value: string) => {
+    const newDate = new Date(value)
+    onFiltersChange({
+      ...filters,
+      dateRange: [newDate, filters.dateRange[1]],
+    })
+  }
+
+  const handleEndDateChange = (value: string) => {
+    const newDate = new Date(value)
+    onFiltersChange({
+      ...filters,
+      dateRange: [filters.dateRange[0], newDate],
+    })
+  }
+
+  const handleReset = () => {
+    onFiltersChange({
+      searchText: '',
+      dateRange: [
+        new Date(Date.now() - 24 * 60 * 60 * 1000),
+        new Date(),
+      ],
+    })
+  }
+
+  const formatDateForInput = (date: Date): string => {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+  }
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-4 space-y-3">
+      {/* Search Bar */}
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <input
+            type="text"
+            placeholder="Search errors by code, message, or component..."
+            value={filters.searchText}
+            onChange={(e) => handleSearchChange(e.target.value)}
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <button
+          onClick={() => setShowAdvanced(!showAdvanced)}
+          className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
+        >
+          {showAdvanced ? '↑' : '↓'} Advanced
+        </button>
+        {(filters.errorType ||
+          filters.severity ||
+          filters.component ||
+          filters.searchText) && (
+          <button
+            onClick={handleReset}
+            className="px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors"
+          >
+            Reset
+          </button>
+        )}
+      </div>
+
+      {/* Advanced Filters */}
+      {showAdvanced && (
+        <div className="grid grid-cols-2 gap-4 pt-3 border-t border-gray-200">
+          {/* Error Type Filter */}
+          <div>
+            <label className="block text-xs text-gray-600 font-medium mb-1">
+              Error Type
+            </label>
+            <select
+              value={filters.errorType || ''}
+              onChange={(e) =>
+                handleTypeChange(
+                  e.target.value ? (e.target.value as ErrorType) : undefined
+                )
+              }
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+            >
+              <option value="">All Types</option>
+              {Object.values(ErrorType).map((type) => (
+                <option key={type} value={type}>
+                  {type}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Severity Filter */}
+          <div>
+            <label className="block text-xs text-gray-600 font-medium mb-1">
+              Severity
+            </label>
+            <select
+              value={filters.severity || ''}
+              onChange={(e) =>
+                handleSeverityChange(
+                  e.target.value ? (e.target.value as ErrorSeverity) : undefined
+                )
+              }
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+            >
+              <option value="">All Severities</option>
+              {Object.values(ErrorSeverity).map((severity) => (
+                <option key={severity} value={severity}>
+                  {severity.charAt(0).toUpperCase() + severity.slice(1)}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Component Filter */}
+          <div>
+            <label className="block text-xs text-gray-600 font-medium mb-1">
+              Component
+            </label>
+            <input
+              type="text"
+              placeholder="e.g., TaskExecutionDialog"
+              value={filters.component || ''}
+              onChange={(e) => handleComponentChange(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+            />
+          </div>
+
+          {/* Date Range */}
+          <div>
+            <label className="block text-xs text-gray-600 font-medium mb-1">
+              Date Range
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="date"
+                value={formatDateForInput(filters.dateRange[0])}
+                onChange={(e) => handleStartDateChange(e.target.value)}
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+              />
+              <input
+                type="date"
+                value={formatDateForInput(filters.dateRange[1])}
+                onChange={(e) => handleEndDateChange(e.target.value)}
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/monitoring/ErrorHistoryList.tsx

@@ -0,0 +1,141 @@
+/**
+ * Error History List Component
+ * Displays a scrollable list of errors with icons and basic info
+ * @module components/monitoring/ErrorHistoryList
+ */
+
+'use client'
+
+import React from 'react'
+import { ErrorContext, ErrorSeverity } from '@/types/errors'
+import { formatRelativeTime } from '@/utils/error-statistics'
+
+// =============================================
+// Types
+// =============================================
+
+interface ErrorHistoryListProps {
+  errors: ErrorContext[]
+  selectedError: ErrorContext | null
+  onSelectError: (error: ErrorContext) => void
+}
+
+// =============================================
+// Helper Functions
+// =============================================
+
+function getSeverityIcon(severity: ErrorSeverity): string {
+  switch (severity) {
+    case ErrorSeverity.CRITICAL:
+      return '🔴'
+    case ErrorSeverity.ERROR:
+      return '🟠'
+    case ErrorSeverity.WARNING:
+      return '🟡'
+    case ErrorSeverity.INFO:
+      return '🔵'
+  }
+}
+
+function getSeverityColor(severity: ErrorSeverity): string {
+  switch (severity) {
+    case ErrorSeverity.CRITICAL:
+      return 'bg-red-100 border-red-300'
+    case ErrorSeverity.ERROR:
+      return 'bg-orange-100 border-orange-300'
+    case ErrorSeverity.WARNING:
+      return 'bg-yellow-100 border-yellow-300'
+    case ErrorSeverity.INFO:
+      return 'bg-blue-100 border-blue-300'
+  }
+}
+
+function getRecoveryStatusIcon(recoverable: boolean): string {
+  return recoverable ? '✅' : '❌'
+}
+
+// =============================================
+// Component
+// =============================================
+
+export default function ErrorHistoryList({
+  errors,
+  selectedError,
+  onSelectError,
+}: ErrorHistoryListProps) {
+  if (errors.length === 0) {
+    return (
+      <div className="bg-white rounded-lg p-8 h-96 flex items-center justify-center border border-gray-200">
+        <div className="text-center">
+          <p className="text-gray-500 text-lg mb-2">No errors found</p>
+          <p className="text-gray-400 text-sm">
+            Errors will appear here when they occur
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 overflow-hidden flex flex-col">
+      {/* Header */}
+      <div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
+        <h2 className="font-semibold text-gray-900">
+          Error History ({errors.length})
+        </h2>
+      </div>
+
+      {/* List */}
+      <div className="overflow-y-auto flex-1 max-h-96">
+        {errors.map((error) => (
+          <button
+            key={error.id || `${error.code}-${error.timestamp}`}
+            onClick={() => onSelectError(error)}
+            className={`w-full px-4 py-3 border-b border-gray-100 text-left transition-colors hover:bg-gray-50 ${
+              selectedError?.code === error.code &&
+              selectedError?.timestamp === error.timestamp
+                ? 'bg-blue-50 border-l-4 border-l-blue-500'
+                : ''
+            }`}
+          >
+            <div className="flex items-start gap-3">
+              {/* Severity Icon */}
+              <span className="text-lg mt-1">
+                {getSeverityIcon(error.severity)}
+              </span>
+
+              {/* Error Info */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <code className="text-sm font-mono font-semibold text-gray-900">
+                    {error.code}
+                  </code>
+                  <span className="text-xs bg-gray-200 text-gray-700 px-2 py-0.5 rounded">
+                    {error.type}
+                  </span>
+                </div>
+                <p className="text-sm text-gray-700 truncate">
+                  {error.message}
+                </p>
+                <div className="flex items-center gap-2 mt-1 text-xs text-gray-500">
+                  {error.component && (
+                    <>
+                      <span>{error.component}</span>
+                      <span>•</span>
+                    </>
+                  )}
+                  <span>{formatRelativeTime(error.timestamp)}</span>
+                </div>
+              </div>
+
+              {/* Recovery Status */}
+              <span className="text-lg mt-1" title={error.recoverable ? 'Recoverable' : 'Not recoverable'}>
+                {getRecoveryStatusIcon(error.recoverable)}
+              </span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/monitoring/ErrorStats.tsx

@@ -0,0 +1,249 @@
+/**
+ * Error Statistics Component
+ * Displays error frequency, trend, and distribution charts
+ * @module components/monitoring/ErrorStats
+ */
+
+'use client'
+
+import React, { useMemo } from 'react'
+import { ErrorStats as ErrorStatsType, ErrorTrend } from '@/utils/error-statistics'
+import { ErrorSeverity } from '@/types/errors'
+
+// =============================================
+// Types
+// =============================================
+
+interface ErrorStatsProps {
+  stats: ErrorStatsType
+  trend: ErrorTrend
+}
+
+// =============================================
+// Component
+// =============================================
+
+export default function ErrorStats({ stats, trend }: ErrorStatsProps) {
+  // Calculate trend visualization
+  const trendSummary = useMemo(() => {
+    if (trend.points.length < 2) return null
+
+    const lastPoint = trend.points[trend.points.length - 1]
+    const firstPoint = trend.points[0]
+
+    return {
+      lastCount: lastPoint.count,
+      firstCount: firstPoint.count,
+      change: lastPoint.count - firstPoint.count,
+      changePercent:
+        firstPoint.count > 0
+          ? ((lastPoint.count - firstPoint.count) / firstPoint.count) * 100
+          : 0,
+    }
+  }, [trend])
+
+  // Max errors in a bucket for scaling
+  const maxBucketCount = useMemo(() => {
+    return Math.max(...trend.points.map((p) => p.count), 1)
+  }, [trend])
+
+  return (
+    <div className="grid grid-cols-4 gap-4">
+      {/* Total Errors */}
+      <div className="bg-white rounded-lg p-4 border border-gray-200">
+        <p className="text-gray-600 text-sm font-medium">Total Errors</p>
+        <p className="text-3xl font-bold text-gray-900 mt-1">{stats.total}</p>
+        {trendSummary && (
+          <p
+            className={`text-sm mt-2 ${
+              trendSummary.change >= 0 ? 'text-red-600' : 'text-green-600'
+            }`}
+          >
+            {trendSummary.change >= 0 ? '↑' : '↓'}
+            {Math.abs(trendSummary.changePercent).toFixed(1)}%
+          </p>
+        )}
+      </div>
+
+      {/* Recovery Rate */}
+      <div className="bg-white rounded-lg p-4 border border-gray-200">
+        <p className="text-gray-600 text-sm font-medium">Recovery Rate</p>
+        <p className="text-3xl font-bold text-green-600 mt-1">
+          {stats.recoveryRate.toFixed(1)}%
+        </p>
+        <p className="text-xs text-gray-500 mt-2">
+          {Math.round((stats.total * stats.recoveryRate) / 100)} recoverable
+        </p>
+      </div>
+
+      {/* Avg Recovery Time */}
+      <div className="bg-white rounded-lg p-4 border border-gray-200">
+        <p className="text-gray-600 text-sm font-medium">Avg Recovery</p>
+        <p className="text-3xl font-bold text-blue-600 mt-1">
+          {stats.avgRecoveryTime > 0
+            ? stats.avgRecoveryTime > 1000
+              ? `${(stats.avgRecoveryTime / 1000).toFixed(1)}s`
+              : `${Math.round(stats.avgRecoveryTime)}ms`
+            : 'N/A'}
+        </p>
+        <p className="text-xs text-gray-500 mt-2">per error</p>
+      </div>
+
+      {/* Trend */}
+      <div className="bg-white rounded-lg p-4 border border-gray-200">
+        <p className="text-gray-600 text-sm font-medium">Trend (24h)</p>
+        <p className="text-2xl font-bold mt-1">
+          {trend.trend === 'increasing' && '📈'}
+          {trend.trend === 'decreasing' && '📉'}
+          {trend.trend === 'stable' && '➡️'}
+          <span className="ml-2 text-lg capitalize">{trend.trend}</span>
+        </p>
+        <p className="text-xs text-gray-500 mt-2">{trend.totalErrors} in period</p>
+      </div>
+
+      {/* Error Distribution by Severity */}
+      <div className="bg-white rounded-lg p-4 border border-gray-200 col-span-2">
+        <p className="text-gray-600 text-sm font-medium mb-3">By Severity</p>
+        <div className="space-y-2">
+          {Object.entries(stats.bySeverity).map(([severity, count]) => (
+            <div key={severity} className="flex items-center gap-2">
+              <span className="w-20 text-sm capitalize">{severity}</span>
+              <div className="flex-1 bg-gray-200 rounded-full h-2 overflow-hidden">
+                <div
+                  className={`h-full transition-all ${getSeverityBarColor(
+                    severity as ErrorSeverity
+                  )}`}
+                  style={{
+                    width: `${stats.total > 0 ? (count / stats.total) * 100 : 0}%`,
+                  }}
+                />
+              </div>
+              <span className="text-sm font-medium text-gray-900 w-12 text-right">
+                {count}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Top Error Codes */}
+      <div className="bg-white rounded-lg p-4 border border-gray-200 col-span-2">
+        <p className="text-gray-600 text-sm font-medium mb-3">Top 5 Errors</p>
+        <div className="space-y-2">
+          {stats.topErrors.map((error, index) => (
+            <div key={error.code} className="flex items-center justify-between">
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded font-mono">
+                    {error.code}
+                  </span>
+                  <p className="text-xs text-gray-600 truncate">
+                    {error.message}
+                  </p>
+                </div>
+              </div>
+              <span className="text-sm font-bold text-gray-900 ml-2">
+                {error.count}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Hourly Trend Chart */}
+      <div className="bg-white rounded-lg p-4 border border-gray-200 col-span-4">
+        <p className="text-gray-600 text-sm font-medium mb-3">Error Trend (24h)</p>
+        <div className="flex items-end gap-1 h-32">
+          {trend.points.map((point, index) => (
+            <div
+              key={index}
+              className="flex-1 flex flex-col items-center"
+              title={`${point.count} errors at ${new Date(point.timestamp).toLocaleTimeString()}`}
+            >
+              <div className="flex gap-0.5 items-end h-24 w-full justify-center">
+                {/* Critical (Red) */}
+                {point.critical > 0 && (
+                  <div
+                    className="bg-red-500 rounded-t"
+                    style={{
+                      height: `${(point.critical / maxBucketCount) * 96}px`,
+                      width: '2px',
+                    }}
+                  />
+                )}
+                {/* Error (Orange) */}
+                {point.error > 0 && (
+                  <div
+                    className="bg-orange-500 rounded-t"
+                    style={{
+                      height: `${(point.error / maxBucketCount) * 96}px`,
+                      width: '2px',
+                    }}
+                  />
+                )}
+                {/* Warning (Yellow) */}
+                {point.warning > 0 && (
+                  <div
+                    className="bg-yellow-500 rounded-t"
+                    style={{
+                      height: `${(point.warning / maxBucketCount) * 96}px`,
+                      width: '2px',
+                    }}
+                  />
+                )}
+                {/* Info (Blue) */}
+                {point.info > 0 && (
+                  <div
+                    className="bg-blue-500 rounded-t"
+                    style={{
+                      height: `${(point.info / maxBucketCount) * 96}px`,
+                      width: '2px',
+                    }}
+                  />
+                )}
+              </div>
+              <span className="text-xs text-gray-500 mt-1">
+                {new Date(point.timestamp).getHours()}h
+              </span>
+            </div>
+          ))}
+        </div>
+        <div className="flex gap-4 mt-4 text-xs">
+          <div className="flex items-center gap-1">
+            <span className="w-3 h-3 bg-red-500 rounded" />
+            <span>Critical</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="w-3 h-3 bg-orange-500 rounded" />
+            <span>Error</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="w-3 h-3 bg-yellow-500 rounded" />
+            <span>Warning</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="w-3 h-3 bg-blue-500 rounded" />
+            <span>Info</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// =============================================
+// Helper Functions
+// =============================================
+
+function getSeverityBarColor(severity: ErrorSeverity): string {
+  switch (severity) {
+    case ErrorSeverity.CRITICAL:
+      return 'bg-red-500'
+    case ErrorSeverity.ERROR:
+      return 'bg-orange-500'
+    case ErrorSeverity.WARNING:
+      return 'bg-yellow-500'
+    case ErrorSeverity.INFO:
+      return 'bg-blue-500'
+  }
+}