@friggframework/devtools 2.0.0-next.60 → 2.0.0-next.62

package/management-ui/src/pages/Dashboard.jsx

@@ -1,311 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { useFrigg } from '../hooks/useFrigg'
-import { useSocket } from '../hooks/useSocket'
-
-const Dashboard = () => {
-  const { status, startFrigg, stopFrigg, restartFrigg, integrations, users, connections, getMetrics, getLogs } = useFrigg()
-  const { on } = useSocket()
-  const [logs, setLogs] = useState([])
-  const [metrics, setMetrics] = useState(null)
-  const [showAdvanced, setShowAdvanced] = useState(false)
-  const [startOptions, setStartOptions] = useState({
-    stage: 'dev',
-    verbose: false
-  })
-
-  // Socket listeners for real-time updates
-  useEffect(() => {
-    const unsubscribeLogs = on('frigg:logs', (logData) => {
-      setLogs(logData)
-    })
-
-    const unsubscribeLog = on('frigg:log', (logEntry) => {
-      setLogs(prev => [...prev.slice(-99), logEntry]) // Keep last 100 logs
-    })
-
-    // Fetch initial logs and metrics
-    const fetchData = async () => {
-      try {
-        if (typeof getLogs === 'function') {
-          const logsData = await getLogs(50)
-          setLogs(logsData)
-        }
-        
-        if (typeof getMetrics === 'function') {
-          const metricsData = await getMetrics()
-          setMetrics(metricsData)
-        }
-      } catch (error) {
-        console.error('Error fetching data:', error)
-      }
-    }
-
-    fetchData()
-
-    // Update metrics periodically when running
-    const metricsInterval = setInterval(() => {
-      if (status === 'running' && typeof getMetrics === 'function') {
-        getMetrics().then(setMetrics).catch(console.error)
-      }
-    }, 5000)
-
-    return () => {
-      unsubscribeLogs && unsubscribeLogs()
-      unsubscribeLog && unsubscribeLog()
-      clearInterval(metricsInterval)
-    }
-  }, [on, getLogs, getMetrics, status])
-
-  const handleStart = async () => {
-    try {
-      await startFrigg(startOptions)
-    } catch (error) {
-      console.error('Failed to start Frigg:', error)
-    }
-  }
-
-  const handleStop = async (force = false) => {
-    try {
-      await stopFrigg(force)
-    } catch (error) {
-      console.error('Failed to stop Frigg:', error)
-    }
-  }
-
-  const handleRestart = async () => {
-    try {
-      await restartFrigg(startOptions)
-    } catch (error) {
-      console.error('Failed to restart Frigg:', error)
-    }
-  }
-
-  const stats = [
-    { name: 'Integrations', value: integrations.length, icon: '🔌' },
-    { name: 'Test Users', value: users.length, icon: '👤' },
-    { name: 'Active Connections', value: connections.filter(c => c.active).length, icon: '🔗' },
-    { name: 'Total Entities', value: connections.reduce((sum, c) => sum + (c.entities?.length || 0), 0), icon: '📊' },
-  ]
-
-  const formatUptime = (uptime) => {
-    if (!uptime) return 'N/A'
-    const seconds = Math.floor(uptime / 1000)
-    const minutes = Math.floor(seconds / 60)
-    const hours = Math.floor(minutes / 60)
-    
-    if (hours > 0) return `${hours}h ${minutes % 60}m`
-    if (minutes > 0) return `${minutes}m ${seconds % 60}s`
-    return `${seconds}s`
-  }
-
-  return (
-    <div>
-      <div className="mb-8">
-        <h2 className="text-3xl font-bold text-foreground">Dashboard</h2>
-        <p className="mt-2 text-muted-foreground">Manage your Frigg development environment</p>
-      </div>
-
-      {/* Control Panel */}
-      <div className="bg-card shadow rounded-lg p-6 mb-8 border border-border">
-        <div className="flex justify-between items-center mb-4">
-          <h3 className="text-lg font-medium text-card-foreground">Frigg Server Control</h3>
-          <button
-            onClick={() => setShowAdvanced(!showAdvanced)}
-            className="text-sm text-primary hover:text-primary/80"
-          >
-            {showAdvanced ? 'Hide' : 'Show'} Advanced Options
-          </button>
-        </div>
-        
-        {/* Advanced Options */}
-        {showAdvanced && (
-          <div className="mb-6 p-4 bg-muted/50 rounded-md">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-1">
-                  Stage
-                </label>
-                <select
-                  value={startOptions.stage}
-                  onChange={(e) => setStartOptions(prev => ({ ...prev, stage: e.target.value }))}
-                  className="w-full px-3 py-2 border border-input bg-background text-foreground rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
-                >
-                  <option value="dev">Development</option>
-                  <option value="staging">Staging</option>
-                  <option value="prod">Production</option>
-                </select>
-              </div>
-              <div className="flex items-center">
-                <input
-                  type="checkbox"
-                  id="verbose"
-                  checked={startOptions.verbose}
-                  onChange={(e) => setStartOptions(prev => ({ ...prev, verbose: e.target.checked }))}
-                  className="mr-2"
-                />
-                <label htmlFor="verbose" className="text-sm font-medium text-foreground">
-                  Verbose logging
-                </label>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Status Display */}
-        <div className="mb-4 p-4 bg-muted/50 rounded-md">
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-            <div>
-              <span className="text-muted-foreground">Status:</span>
-              <span className={`ml-2 font-medium ${
-                status === 'running' ? 'text-green-600' : 
-                status === 'stopped' ? 'text-red-600' : 
-                'text-yellow-600'
-              }`}>
-                {status.charAt(0).toUpperCase() + status.slice(1)}
-              </span>
-            </div>
-            {metrics && (
-              <>
-                <div>
-                  <span className="text-muted-foreground">PID:</span>
-                  <span className="ml-2 font-medium">{metrics.pid || 'N/A'}</span>
-                </div>
-                <div>
-                  <span className="text-muted-foreground">Uptime:</span>
-                  <span className="ml-2 font-medium">{formatUptime(metrics.uptime)}</span>
-                </div>
-                <div>
-                  <span className="text-muted-foreground">Stage:</span>
-                  <span className="ml-2 font-medium">{startOptions.stage}</span>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Control Buttons */}
-        <div className="flex items-center space-x-3">
-          <button
-            onClick={handleStart}
-            disabled={status === 'running' || status === 'starting'}
-            className={`px-6 py-3 rounded-md font-medium transition-colors ${
-              status === 'running' || status === 'starting'
-                ? 'bg-muted text-muted-foreground cursor-not-allowed'
-                : 'bg-green-600 text-white hover:bg-green-700'
-            }`}
-          >
-            ▶️ Start
-          </button>
-          
-          <button
-            onClick={() => handleStop()}
-            disabled={status === 'stopped' || status === 'stopping'}
-            className={`px-6 py-3 rounded-md font-medium transition-colors ${
-              status === 'stopped' || status === 'stopping'
-                ? 'bg-muted text-muted-foreground cursor-not-allowed'
-                : 'bg-red-600 text-white hover:bg-red-700'
-            }`}
-          >
-            ⏹️ Stop
-          </button>
-
-          <button
-            onClick={handleRestart}
-            disabled={status === 'starting' || status === 'stopping'}
-            className={`px-6 py-3 rounded-md font-medium transition-colors ${
-              status === 'starting' || status === 'stopping'
-                ? 'bg-muted text-muted-foreground cursor-not-allowed'
-                : 'bg-blue-600 text-white hover:bg-blue-700'
-            }`}
-          >
-            🔄 Restart
-          </button>
-
-          {(status === 'running' || status === 'stopping') && (
-            <button
-              onClick={() => handleStop(true)}
-              className="px-4 py-3 rounded-md font-medium bg-orange-600 text-white hover:bg-orange-700 transition-colors"
-            >
-              ⚠️ Force Stop
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Stats Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-        {stats.map((stat) => (
-          <div key={stat.name} className="bg-card shadow rounded-lg p-6 border border-border">
-            <div className="flex items-center">
-              <span className="text-3xl mr-3">{stat.icon}</span>
-              <div>
-                <p className="text-sm font-medium text-muted-foreground">{stat.name}</p>
-                <p className="text-2xl font-bold text-card-foreground">{stat.value}</p>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Real-time Logs */}
-      <div className="bg-card shadow rounded-lg p-6 mb-8 border border-border">
-        <div className="flex justify-between items-center mb-4">
-          <h3 className="text-lg font-medium text-card-foreground">Real-time Logs</h3>
-          <button
-            onClick={() => setLogs([])}
-            className="text-sm text-red-600 hover:text-red-800"
-          >
-            Clear Logs
-          </button>
-        </div>
-        <div className="bg-muted/30 dark:bg-gray-900 text-foreground dark:text-gray-100 p-4 rounded-md h-64 overflow-y-auto font-mono text-sm border border-border">
-          {logs.length === 0 ? (
-            <div className="text-muted-foreground text-center py-8">
-              No logs available. Start Frigg to see real-time logs.
-            </div>
-          ) : (
-            logs.map((log, index) => (
-              <div key={index} className="mb-1 flex">
-                <span className="text-muted-foreground mr-2 w-20 flex-shrink-0">
-                  {new Date(log.timestamp).toLocaleTimeString()}
-                </span>
-                <span className={`mr-2 w-12 flex-shrink-0 ${
-                  log.type === 'stderr' ? 'text-red-400' : 
-                  log.type === 'system' ? 'text-blue-400' : 
-                  'text-green-400'
-                }`}>
-                  [{log.type.toUpperCase()}]
-                </span>
-                <span className="flex-1 break-all">{log.message}</span>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* Recent Activity */}
-      <div className="bg-card shadow rounded-lg p-6 border border-border">
-        <h3 className="text-lg font-medium text-card-foreground mb-4">Recent Activity</h3>
-        <div className="space-y-3">
-          <div className="flex items-center text-sm">
-            <span className="w-2 h-2 bg-green-400 rounded-full mr-3"></span>
-            <span className="text-foreground">Frigg server started</span>
-            <span className="ml-auto text-muted-foreground">2 minutes ago</span>
-          </div>
-          <div className="flex items-center text-sm">
-            <span className="w-2 h-2 bg-blue-400 rounded-full mr-3"></span>
-            <span className="text-foreground">Integration 'Slack' installed</span>
-            <span className="ml-auto text-muted-foreground">15 minutes ago</span>
-          </div>
-          <div className="flex items-center text-sm">
-            <span className="w-2 h-2 bg-purple-400 rounded-full mr-3"></span>
-            <span className="text-foreground">Test user 'john.doe' created</span>
-            <span className="ml-auto text-muted-foreground">1 hour ago</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Dashboard

package/management-ui/src/pages/Environment.jsx

@@ -1,314 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { useFrigg } from '../hooks/useFrigg'
-import { useSocket } from '../hooks/useSocket'
-import api from '../services/api'
-import EnvironmentEditor from '../components/EnvironmentEditor'
-import EnvironmentSchema from '../components/EnvironmentSchema'
-import EnvironmentCompare from '../components/EnvironmentCompare'
-import EnvironmentImportExport from '../components/EnvironmentImportExport'
-import EnvironmentSecurity from '../components/EnvironmentSecurity'
-
-const Environment = () => {
-  const { envVariables, updateEnvVariable, refreshData } = useFrigg()
-  const { on } = useSocket()
-  const [activeTab, setActiveTab] = useState('editor') // editor, schema, compare, import-export, security
-  const [selectedEnvironment, setSelectedEnvironment] = useState('local')
-  const [variables, setVariables] = useState([])
-  const [loading, setLoading] = useState(false)
-  const [notification, setNotification] = useState(null)
-
-  // Load environment variables
-  useEffect(() => {
-    loadEnvironmentVariables()
-  }, [selectedEnvironment])
-
-  // Listen for real-time updates
-  useEffect(() => {
-    const unsubscribe = on('env-update', (data) => {
-      if (data.environment === selectedEnvironment) {
-        loadEnvironmentVariables()
-        showNotification('Environment variables updated', 'success')
-      }
-    })
-    return unsubscribe
-  }, [on, selectedEnvironment])
-
-  const loadEnvironmentVariables = async () => {
-    setLoading(true)
-    try {
-      const response = await api.get(`/api/environment/variables/${selectedEnvironment}`)
-      setVariables(response.data.variables || [])
-    } catch (error) {
-      console.error('Error loading variables:', error)
-      showNotification('Failed to load environment variables', 'error')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleSaveVariables = async (updatedVariables) => {
-    try {
-      await api.put(`/api/environment/variables/${selectedEnvironment}`, {
-        variables: updatedVariables
-      })
-      await loadEnvironmentVariables()
-      showNotification('Environment variables saved successfully', 'success')
-    } catch (error) {
-      console.error('Error saving variables:', error)
-      showNotification('Failed to save environment variables', 'error')
-      throw error
-    }
-  }
-
-  const handleVariableUpdate = async (key, value) => {
-    try {
-      await api.post('/api/environment', { key, value })
-      await loadEnvironmentVariables()
-      showNotification(`Variable ${key} updated`, 'success')
-    } catch (error) {
-      console.error('Error updating variable:', error)
-      showNotification('Failed to update variable', 'error')
-    }
-  }
-
-  const handleVariableDelete = async (key) => {
-    if (!window.confirm(`Are you sure you want to delete ${key}?`)) return
-    
-    try {
-      await api.delete(`/api/environment/${key}`)
-      await loadEnvironmentVariables()
-      showNotification(`Variable ${key} deleted`, 'success')
-    } catch (error) {
-      console.error('Error deleting variable:', error)
-      showNotification('Failed to delete variable', 'error')
-    }
-  }
-
-  const showNotification = (message, type = 'info') => {
-    setNotification({ message, type })
-    setTimeout(() => setNotification(null), 5000)
-  }
-
-  return (
-    <div>
-      {/* Header */}
-      <div className="mb-8">
-        <div className="flex items-center justify-between">
-          <div>
-            <h2 className="text-3xl font-bold text-gray-900">Environment Variables</h2>
-            <p className="mt-2 text-gray-600">Manage environment variables across different environments</p>
-          </div>
-          
-          {/* Environment Selector */}
-          <div className="flex items-center space-x-2">
-            <label className="text-sm font-medium text-gray-700">Environment:</label>
-            <select
-              value={selectedEnvironment}
-              onChange={(e) => setSelectedEnvironment(e.target.value)}
-              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
-            >
-              <option value="local">Local</option>
-              <option value="staging">Staging</option>
-              <option value="production">Production</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      {/* Notification */}
-      {notification && (
-        <div className={`mb-4 p-4 rounded-md ${
-          notification.type === 'success' ? 'bg-green-50 text-green-800' :
-          notification.type === 'error' ? 'bg-red-50 text-red-800' :
-          'bg-blue-50 text-blue-800'
-        }`}>
-          <div className="flex">
-            <div className="flex-shrink-0">
-              {notification.type === 'success' && (
-                <svg className="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-                </svg>
-              )}
-              {notification.type === 'error' && (
-                <svg className="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-                </svg>
-              )}
-            </div>
-            <div className="ml-3">
-              <p className="text-sm font-medium">{notification.message}</p>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Tabs */}
-      <div className="mb-6">
-        <div className="border-b border-gray-200">
-          <nav className="-mb-px flex space-x-8">
-            <button
-              onClick={() => setActiveTab('editor')}
-              className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                activeTab === 'editor'
-                  ? 'border-blue-500 text-blue-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              }`}
-            >
-              Editor
-            </button>
-            <button
-              onClick={() => setActiveTab('schema')}
-              className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                activeTab === 'schema'
-                  ? 'border-blue-500 text-blue-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              }`}
-            >
-              Schema & Validation
-            </button>
-            <button
-              onClick={() => setActiveTab('compare')}
-              className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                activeTab === 'compare'
-                  ? 'border-blue-500 text-blue-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              }`}
-            >
-              Compare & Sync
-            </button>
-            <button
-              onClick={() => setActiveTab('import-export')}
-              className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                activeTab === 'import-export'
-                  ? 'border-blue-500 text-blue-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              }`}
-            >
-              Import/Export
-            </button>
-            <button
-              onClick={() => setActiveTab('security')}
-              className={`py-2 px-1 border-b-2 font-medium text-sm ${
-                activeTab === 'security'
-                  ? 'border-blue-500 text-blue-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              }`}
-            >
-              Security
-            </button>
-          </nav>
-        </div>
-      </div>
-
-      {/* Tab Content */}
-      <div className="mt-6">
-        {loading ? (
-          <div className="flex items-center justify-center h-64">
-            <div className="text-gray-500">Loading...</div>
-          </div>
-        ) : (
-          <>
-            {/* Editor Tab */}
-            {activeTab === 'editor' && (
-              <EnvironmentEditor
-                variables={variables}
-                environment={selectedEnvironment}
-                onSave={handleSaveVariables}
-                onVariableUpdate={handleVariableUpdate}
-                onVariableDelete={handleVariableDelete}
-                readOnly={selectedEnvironment === 'production'}
-              />
-            )}
-
-            {/* Schema Tab */}
-            {activeTab === 'schema' && (
-              <EnvironmentSchema
-                variables={variables}
-                environment={selectedEnvironment}
-                onSchemaUpdate={(schema) => {
-                  showNotification('Schema updated', 'success')
-                }}
-              />
-            )}
-
-            {/* Compare Tab */}
-            {activeTab === 'compare' && (
-              <EnvironmentCompare
-                onSync={(result) => {
-                  showNotification(
-                    `Synced ${result.count} variables from ${result.source} to ${result.target}`,
-                    'success'
-                  )
-                  if (result.target === selectedEnvironment) {
-                    loadEnvironmentVariables()
-                  }
-                }}
-              />
-            )}
-
-            {/* Import/Export Tab */}
-            {activeTab === 'import-export' && (
-              <EnvironmentImportExport
-                environment={selectedEnvironment}
-                onImport={(result) => {
-                  showNotification(
-                    `Imported ${result.imported} variables`,
-                    'success'
-                  )
-                  loadEnvironmentVariables()
-                }}
-                onExport={(result) => {
-                  showNotification(
-                    `Exported variables as ${result.format.toUpperCase()}`,
-                    'success'
-                  )
-                }}
-              />
-            )}
-
-            {/* Security Tab */}
-            {activeTab === 'security' && (
-              <EnvironmentSecurity
-                environment={selectedEnvironment}
-              />
-            )}
-          </>
-        )}
-      </div>
-
-      {/* AWS Parameter Store Status (for production) */}
-      {selectedEnvironment === 'production' && (
-        <div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-          <div className="flex items-center justify-between">
-            <div className="flex">
-              <svg className="h-5 w-5 text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
-                <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-              </svg>
-              <div className="text-sm text-yellow-700">
-                <p className="font-medium">Production Environment</p>
-                <p>This environment can sync with AWS Parameter Store for secure secret management.</p>
-              </div>
-            </div>
-            <button
-              onClick={async () => {
-                try {
-                  await api.post('/api/environment/sync/aws-parameter-store', {
-                    environment: 'production'
-                  })
-                  showNotification('Synced with AWS Parameter Store', 'success')
-                } catch (error) {
-                  showNotification('Failed to sync with AWS', 'error')
-                }
-              }}
-              className="px-3 py-1 text-sm bg-yellow-600 text-white rounded hover:bg-yellow-700"
-            >
-              Sync with AWS
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default Environment