@friggframework/devtools 2.0.0--canary.400.bed3308.0 → 2.0.0--canary.400.545e7a8.0

package/management-ui/src/components/IntegrationExplorer.jsx

@@ -1,379 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { Search, Filter, Package, Code, GitBranch, ExternalLink, Download, Eye } from 'lucide-react'
-import { RefreshCw } from 'lucide-react'
-import { Card } from './ui/card'
-import { Button } from './ui/button'
-
-/**
- * Visual Integration Explorer using @friggframework/ui-react components
- * Shows available integrations, installed integrations, and code analysis
- */
-export default function IntegrationExplorer({ mode = 'browse' }) {
-  const [integrations, setIntegrations] = useState([])
-  const [loading, setLoading] = useState(true)
-  const [searchTerm, setSearchTerm] = useState('')
-  const [selectedCategory, setSelectedCategory] = useState('all')
-  const [viewMode, setViewMode] = useState('grid') // 'grid', 'list', 'code'
-
-  useEffect(() => {
-    fetchIntegrations()
-  }, [])
-
-  const fetchIntegrations = async () => {
-    try {
-      setLoading(true)
-      const response = await fetch('/api/integrations')
-      const data = await response.json()
-      
-      // Combine installed integrations and available API modules
-      const allIntegrations = [
-        ...data.integrations.map(int => ({ ...int, source: 'installed' })),
-        ...data.availableApiModules.map(mod => ({ ...mod, source: 'available' }))
-      ]
-      
-      setIntegrations(allIntegrations)
-    } catch (error) {
-      console.error('Failed to fetch integrations:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const filteredIntegrations = integrations.filter(integration => {
-    const matchesSearch = integration.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         integration.displayName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         integration.description?.toLowerCase().includes(searchTerm.toLowerCase())
-    
-    const matchesCategory = selectedCategory === 'all' || 
-                           integration.category?.toLowerCase() === selectedCategory.toLowerCase()
-    
-    return matchesSearch && matchesCategory
-  })
-
-  const categories = ['all', ...new Set(integrations.map(i => i.category).filter(Boolean))]
-
-  const handleInstall = async (integration) => {
-    try {
-      const response = await fetch('/api/integrations/install', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ packageName: integration.name })
-      })
-      
-      if (response.ok) {
-        await fetchIntegrations() // Refresh the list
-      }
-    } catch (error) {
-      console.error('Failed to install integration:', error)
-    }
-  }
-
-  const handleViewCode = (integration) => {
-    // Open code view for this integration
-    setViewMode('code')
-    // In a real implementation, you'd fetch and display the integration's source code
-  }
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <RefreshCw className="w-8 h-8 animate-spin text-primary" />
-        <span className="ml-3">Loading integrations...</span>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Header with Search and Filters */}
-      <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
-        <div className="flex items-center gap-4">
-          <h3 className="text-xl font-semibold">Integration Explorer</h3>
-          <div className="flex gap-2">
-            <Button
-              variant={viewMode === 'grid' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setViewMode('grid')}
-            >
-              Grid
-            </Button>
-            <Button
-              variant={viewMode === 'list' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setViewMode('list')}
-            >
-              List
-            </Button>
-            <Button
-              variant={viewMode === 'code' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setViewMode('code')}
-            >
-              Code
-            </Button>
-          </div>
-        </div>
-        
-        <div className="flex gap-3">
-          {/* Search */}
-          <div className="relative">
-            <Search className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
-            <input
-              type="text"
-              placeholder="Search integrations..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10 pr-4 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50"
-            />
-          </div>
-          
-          {/* Category Filter */}
-          <select
-            value={selectedCategory}
-            onChange={(e) => setSelectedCategory(e.target.value)}
-            className="px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50"
-          >
-            {categories.map(category => (
-              <option key={category} value={category}>
-                {category === 'all' ? 'All Categories' : category}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-
-      {/* Results Summary */}
-      <div className="text-sm text-muted-foreground">
-        Found {filteredIntegrations.length} integrations
-        {searchTerm && ` matching "${searchTerm}"`}
-        {selectedCategory !== 'all' && ` in ${selectedCategory}`}
-      </div>
-
-      {/* Integration Views */}
-      <AnimatePresence mode="wait">
-        {viewMode === 'grid' && (
-          <motion.div
-            key="grid"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
-          >
-            {filteredIntegrations.map((integration, index) => (
-              <motion.div
-                key={integration.name}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: index * 0.05 }}
-              >
-                <Card className="p-4 hover:shadow-lg transition-all">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <div className={`w-3 h-3 rounded-full ${
-                        integration.source === 'installed' ? 'bg-green-500' : 'bg-gray-400'
-                      }`} />
-                      <div>
-                        <h4 className="font-semibold">{integration.displayName || integration.name}</h4>
-                        <p className="text-sm text-muted-foreground">{integration.description}</p>
-                        <div className="flex items-center gap-2 mt-1">
-                          <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded">
-                            {integration.category}
-                          </span>
-                          <span className="text-xs text-muted-foreground">
-                            {integration.source === 'installed' ? 'Installed' : 'Available'}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div className="flex gap-2">
-                      <Button size="sm" variant="outline" onClick={() => handleViewCode(integration)}>
-                        <Code className="w-4 h-4" />
-                      </Button>
-                      {integration.source === 'available' && (
-                        <Button size="sm" onClick={() => handleInstall(integration)}>
-                          <Download className="w-4 h-4" />
-                        </Button>
-                      )}
-                    </div>
-                  </div>
-                </Card>
-              </motion.div>
-            ))}
-          </motion.div>
-        )}
-
-        {viewMode === 'list' && (
-          <motion.div
-            key="list"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-3"
-          >
-            {filteredIntegrations.map((integration, index) => (
-              <motion.div
-                key={integration.name}
-                initial={{ opacity: 0, x: -20 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ delay: index * 0.03 }}
-              >
-                <Card className="p-4 hover:shadow-md transition-all">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-4">
-                      <div className={`w-3 h-3 rounded-full ${
-                        integration.source === 'installed' ? 'bg-green-500' : 'bg-gray-400'
-                      }`} />
-                      <div>
-                        <h4 className="font-semibold">{integration.displayName || integration.name}</h4>
-                        <p className="text-sm text-muted-foreground">{integration.description}</p>
-                        <div className="flex items-center gap-2 mt-1">
-                          <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded">
-                            {integration.category}
-                          </span>
-                          <span className="text-xs text-muted-foreground">
-                            {integration.source === 'installed' ? 'Installed' : 'Available'}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div className="flex gap-2">
-                      <Button size="sm" variant="outline" onClick={() => handleViewCode(integration)}>
-                        <Eye className="w-4 h-4" />
-                        View
-                      </Button>
-                      {integration.source === 'available' && (
-                        <Button size="sm" onClick={() => handleInstall(integration)}>
-                          <Download className="w-4 h-4" />
-                          Install
-                        </Button>
-                      )}
-                    </div>
-                  </div>
-                </Card>
-              </motion.div>
-            ))}
-          </motion.div>
-        )}
-
-        {viewMode === 'code' && (
-          <motion.div
-            key="code"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-          >
-            <CodeAnalysisView integrations={filteredIntegrations} />
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {filteredIntegrations.length === 0 && (
-        <div className="text-center py-12">
-          <Package className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
-          <h3 className="text-lg font-semibold mb-2">No integrations found</h3>
-          <p className="text-muted-foreground">
-            Try adjusting your search terms or category filter
-          </p>
-        </div>
-      )}
-    </div>
-  )
-}
-
-/**
- * Code Analysis View showing integration structure and relationships
- */
-function CodeAnalysisView({ integrations }) {
-  const installedIntegrations = integrations.filter(i => i.source === 'installed')
-  
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center gap-2">
-        <GitBranch className="w-5 h-5" />
-        <h4 className="text-lg font-semibold">Integration Code Structure</h4>
-      </div>
-      
-      {installedIntegrations.length === 0 ? (
-        <Card className="p-8 text-center">
-          <Code className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
-          <h3 className="font-semibold mb-2">No Installed Integrations</h3>
-          <p className="text-muted-foreground">Install some integrations to analyze their code structure</p>
-        </Card>
-      ) : (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {installedIntegrations.map(integration => (
-            <Card key={integration.name} className="p-6">
-              <div className="flex items-center gap-3 mb-4">
-                <div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
-                  <Code className="w-4 h-4 text-primary" />
-                </div>
-                <div>
-                  <h4 className="font-semibold">{integration.displayName}</h4>
-                  <p className="text-sm text-muted-foreground">{integration.className}</p>
-                </div>
-              </div>
-              
-              <div className="space-y-3">
-                {integration.constructor && (
-                  <div>
-                    <h5 className="font-medium text-sm mb-2">Constructor Properties</h5>
-                    <div className="space-y-1 text-sm">
-                      <div className="flex justify-between">
-                        <span>Has Config:</span>
-                        <span className={integration.constructor.hasConfig ? 'text-green-600' : 'text-gray-500'}>
-                          {integration.constructor.hasConfig ? 'Yes' : 'No'}
-                        </span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span>Has Options:</span>
-                        <span className={integration.constructor.hasOptions ? 'text-green-600' : 'text-gray-500'}>
-                          {integration.constructor.hasOptions ? 'Yes' : 'No'}
-                        </span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span>Has Modules:</span>
-                        <span className={integration.constructor.hasModules ? 'text-green-600' : 'text-gray-500'}>
-                          {integration.constructor.hasModules ? 'Yes' : 'No'}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-                
-                {integration.apiModules && integration.apiModules.length > 0 && (
-                  <div>
-                    <h5 className="font-medium text-sm mb-2">API Modules</h5>
-                    <div className="space-y-1">
-                      {integration.apiModules.map(module => (
-                        <div key={module.name} className="text-xs bg-gray-50 p-2 rounded">
-                          <div className="font-medium">{module.name}</div>
-                          <div className="text-muted-foreground">{module.description}</div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-                
-                {integration.events && integration.events.length > 0 && (
-                  <div>
-                    <h5 className="font-medium text-sm mb-2">Events</h5>
-                    <div className="flex flex-wrap gap-1">
-                      {integration.events.map(event => (
-                        <span key={event} className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
-                          {event}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </Card>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

package/management-ui/src/components/IntegrationStatus.jsx

@@ -1,235 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { CheckCircle, AlertCircle, Clock, Activity, RefreshCw, Zap, Shield, AlertTriangle } from 'lucide-react'
-import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
-import { Button } from './ui/button'
-import LoadingSpinner from './LoadingSpinner'
-import { cn } from '../lib/utils'
-import api from '../services/api'
-import { useSocket } from '../hooks/useSocket'
-
-const IntegrationStatus = ({ integrationName, className }) => {
-  const { on } = useSocket()
-  const [status, setStatus] = useState(null)
-  const [loading, setLoading] = useState(true)
-  const [refreshing, setRefreshing] = useState(false)
-  const [metrics, setMetrics] = useState(null)
-
-  useEffect(() => {
-    fetchStatus()
-    // Subscribe to real-time updates
-    const unsubscribeHealth = on('integration:health:update', (data) => {
-      if (data.packageName === integrationName) {
-        setStatus(prevStatus => ({
-          ...prevStatus,
-          health: data.health,
-          lastChecked: new Date().toISOString()
-        }))
-      }
-    })
-
-    const unsubscribeMetrics = on('integration:metrics:update', (data) => {
-      if (data.packageName === integrationName) {
-        setMetrics(data.metrics)
-      }
-    })
-
-    // Poll for updates every 30 seconds
-    const interval = setInterval(fetchStatus, 30000)
-
-    return () => {
-      unsubscribeHealth && unsubscribeHealth()
-      unsubscribeMetrics && unsubscribeMetrics()
-      clearInterval(interval)
-    }
-  }, [integrationName, on])
-
-  const fetchStatus = async () => {
-    try {
-      setLoading(true)
-      const [healthRes, metricsRes] = await Promise.all([
-        api.get(`/api/discovery/health/${integrationName}`),
-        api.get(`/api/integrations/${integrationName}/metrics`)
-      ])
-
-      setStatus(healthRes.data.data)
-      setMetrics(metricsRes.data.metrics)
-    } catch (err) {
-      console.error('Failed to fetch integration status:', err)
-      setStatus({
-        installed: false,
-        available: false,
-        error: 'Failed to fetch status'
-      })
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleRefresh = async () => {
-    setRefreshing(true)
-    await fetchStatus()
-    setRefreshing(false)
-  }
-
-  const getStatusIcon = () => {
-    if (!status?.installed) return <AlertCircle className="text-gray-400" />
-    if (status.error) return <AlertCircle className="text-red-500" />
-    if (status.updateAvailable) return <AlertTriangle className="text-yellow-500" />
-    return <CheckCircle className="text-green-500" />
-  }
-
-  const getStatusText = () => {
-    if (!status?.installed) return 'Not Installed'
-    if (status.error) return 'Error'
-    if (status.updateAvailable) return 'Update Available'
-    return 'Healthy'
-  }
-
-  const getStatusColor = () => {
-    if (!status?.installed) return 'text-gray-500'
-    if (status.error) return 'text-red-500'
-    if (status.updateAvailable) return 'text-yellow-600'
-    return 'text-green-600'
-  }
-
-  if (loading && !status) {
-    return (
-      <Card className={className}>
-        <CardContent className="p-6 flex items-center justify-center">
-          <LoadingSpinner size="sm" />
-        </CardContent>
-      </Card>
-    )
-  }
-
-  return (
-    <Card className={className}>
-      <CardHeader className="pb-3">
-        <CardTitle className="flex items-center justify-between">
-          <span className="flex items-center">
-            <Activity size={20} className="mr-2" />
-            Integration Status
-          </span>
-          <Button
-            size="sm"
-            variant="ghost"
-            onClick={handleRefresh}
-            disabled={refreshing}
-          >
-            <RefreshCw size={14} className={cn(refreshing && "animate-spin")} />
-          </Button>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Overall Status */}
-        <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-          <div className="flex items-center">
-            {getStatusIcon()}
-            <div className="ml-3">
-              <p className={cn("font-medium", getStatusColor())}>
-                {getStatusText()}
-              </p>
-              {status?.lastChecked && (
-                <p className="text-xs text-gray-500">
-                  Last checked: {new Date(status.lastChecked).toLocaleTimeString()}
-                </p>
-              )}
-            </div>
-          </div>
-          {status?.installed && (
-            <div className="text-right">
-              <p className="text-sm font-medium text-gray-700">
-                v{status.version}
-              </p>
-              {status.updateAvailable && (
-                <p className="text-xs text-blue-600">
-                  v{status.latestVersion} available
-                </p>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* Connection Metrics */}
-        {metrics && (
-          <div className="grid grid-cols-2 gap-3">
-            <div className="p-3 bg-blue-50 rounded-lg">
-              <div className="flex items-center justify-between">
-                <Zap size={16} className="text-blue-500" />
-                <span className="text-2xl font-bold text-blue-700">
-                  {metrics.activeConnections || 0}
-                </span>
-              </div>
-              <p className="text-xs text-blue-600 mt-1">Active Connections</p>
-            </div>
-            <div className="p-3 bg-green-50 rounded-lg">
-              <div className="flex items-center justify-between">
-                <Activity size={16} className="text-green-500" />
-                <span className="text-2xl font-bold text-green-700">
-                  {metrics.requestsToday || 0}
-                </span>
-              </div>
-              <p className="text-xs text-green-600 mt-1">Requests Today</p>
-            </div>
-            <div className="p-3 bg-purple-50 rounded-lg">
-              <div className="flex items-center justify-between">
-                <Clock size={16} className="text-purple-500" />
-                <span className="text-lg font-bold text-purple-700">
-                  {metrics.avgResponseTime || 0}ms
-                </span>
-              </div>
-              <p className="text-xs text-purple-600 mt-1">Avg Response Time</p>
-            </div>
-            <div className="p-3 bg-orange-50 rounded-lg">
-              <div className="flex items-center justify-between">
-                <Shield size={16} className="text-orange-500" />
-                <span className="text-lg font-bold text-orange-700">
-                  {metrics.successRate || 100}%
-                </span>
-              </div>
-              <p className="text-xs text-orange-600 mt-1">Success Rate</p>
-            </div>
-          </div>
-        )}
-
-        {/* Recent Events */}
-        {metrics?.recentEvents && metrics.recentEvents.length > 0 && (
-          <div>
-            <h4 className="text-sm font-medium text-gray-700 mb-2">Recent Events</h4>
-            <div className="space-y-1">
-              {metrics.recentEvents.slice(0, 3).map((event, index) => (
-                <div key={index} className="flex items-center text-xs">
-                  <span className={cn(
-                    "w-2 h-2 rounded-full mr-2",
-                    event.type === 'success' && "bg-green-500",
-                    event.type === 'error' && "bg-red-500",
-                    event.type === 'warning' && "bg-yellow-500"
-                  )} />
-                  <span className="text-gray-600 flex-1">{event.message}</span>
-                  <span className="text-gray-400">
-                    {new Date(event.timestamp).toLocaleTimeString()}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Error Details */}
-        {status?.error && (
-          <div className="p-3 bg-red-50 rounded-lg">
-            <div className="flex items-start">
-              <AlertCircle size={16} className="text-red-500 mr-2 mt-0.5" />
-              <div>
-                <p className="text-sm font-medium text-red-800">Error Details</p>
-                <p className="text-xs text-red-600 mt-1">{status.error}</p>
-              </div>
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-export default IntegrationStatus