@friggframework/devtools 2.0.0--canary.398.7664c46.0 → 2.0.0--canary.400.bed3308.0

package/management-ui/server/websocket/handler.js

@@ -0,0 +1,325 @@
+import { EventEmitter } from 'events'
+
+class WebSocketHandler extends EventEmitter {
+    constructor() {
+        super();
+        this.clients = new Map();
+        this.subscriptions = new Map();
+    }
+
+    setupWebSocket(wss) {
+        wss.on('connection', (ws, req) => {
+            const clientId = this.generateClientId();
+            
+            console.log(`New WebSocket connection: ${clientId}`);
+            
+            // Store client connection
+            this.clients.set(clientId, {
+                ws,
+                subscriptions: new Set(),
+                connectedAt: new Date()
+            });
+
+            // Send welcome message
+            this.sendToClient(clientId, {
+                type: 'connection',
+                data: {
+                    clientId,
+                    message: 'Connected to Frigg Management Server',
+                    timestamp: new Date().toISOString()
+                }
+            });
+
+            // Handle incoming messages
+            ws.on('message', (message) => {
+                try {
+                    const data = JSON.parse(message.toString());
+                    this.handleMessage(clientId, data);
+                } catch (error) {
+                    console.error('Invalid WebSocket message:', error);
+                    this.sendToClient(clientId, {
+                        type: 'error',
+                        data: {
+                            message: 'Invalid message format',
+                            timestamp: new Date().toISOString()
+                        }
+                    });
+                }
+            });
+
+            // Handle client disconnect
+            ws.on('close', () => {
+                console.log(`Client disconnected: ${clientId}`);
+                this.handleDisconnect(clientId);
+            });
+
+            // Handle errors
+            ws.on('error', (error) => {
+                console.error(`WebSocket error for client ${clientId}:`, error);
+                this.handleDisconnect(clientId);
+            });
+
+            // Ping to keep connection alive
+            const pingInterval = setInterval(() => {
+                if (ws.readyState === ws.OPEN) {
+                    ws.ping();
+                } else {
+                    clearInterval(pingInterval);
+                }
+            }, 30000);
+        });
+    }
+
+    handleMessage(clientId, message) {
+        const { type, data } = message;
+
+        switch (type) {
+            case 'subscribe':
+                this.handleSubscribe(clientId, data);
+                break;
+            case 'unsubscribe':
+                this.handleUnsubscribe(clientId, data);
+                break;
+            case 'ping':
+                this.sendToClient(clientId, { type: 'pong', data: { timestamp: new Date().toISOString() } });
+                break;
+            default:
+                // Emit custom events for other components to handle
+                this.emit(type, { clientId, data });
+        }
+    }
+
+    handleSubscribe(clientId, data) {
+        const { topics } = data;
+        const client = this.clients.get(clientId);
+        
+        if (!client) return;
+
+        topics.forEach(topic => {
+            client.subscriptions.add(topic);
+            
+            if (!this.subscriptions.has(topic)) {
+                this.subscriptions.set(topic, new Set());
+            }
+            this.subscriptions.get(topic).add(clientId);
+        });
+
+        this.sendToClient(clientId, {
+            type: 'subscribed',
+            data: {
+                topics,
+                timestamp: new Date().toISOString()
+            }
+        });
+    }
+
+    handleUnsubscribe(clientId, data) {
+        const { topics } = data;
+        const client = this.clients.get(clientId);
+        
+        if (!client) return;
+
+        topics.forEach(topic => {
+            client.subscriptions.delete(topic);
+            
+            const topicSubscribers = this.subscriptions.get(topic);
+            if (topicSubscribers) {
+                topicSubscribers.delete(clientId);
+                if (topicSubscribers.size === 0) {
+                    this.subscriptions.delete(topic);
+                }
+            }
+        });
+
+        this.sendToClient(clientId, {
+            type: 'unsubscribed',
+            data: {
+                topics,
+                timestamp: new Date().toISOString()
+            }
+        });
+    }
+
+    handleDisconnect(clientId) {
+        const client = this.clients.get(clientId);
+        
+        if (!client) return;
+
+        // Remove from all topic subscriptions
+        client.subscriptions.forEach(topic => {
+            const topicSubscribers = this.subscriptions.get(topic);
+            if (topicSubscribers) {
+                topicSubscribers.delete(clientId);
+                if (topicSubscribers.size === 0) {
+                    this.subscriptions.delete(topic);
+                }
+            }
+        });
+
+        // Remove client
+        this.clients.delete(clientId);
+    }
+
+    sendToClient(clientId, message) {
+        const client = this.clients.get(clientId);
+        
+        if (client && client.ws.readyState === client.ws.OPEN) {
+            client.ws.send(JSON.stringify(message));
+        }
+    }
+
+    broadcast(topic, message) {
+        const subscribers = this.subscriptions.get(topic);
+        
+        if (!subscribers) return;
+
+        const broadcastMessage = {
+            type: 'broadcast',
+            topic,
+            data: message,
+            timestamp: new Date().toISOString()
+        };
+
+        subscribers.forEach(clientId => {
+            this.sendToClient(clientId, broadcastMessage);
+        });
+    }
+
+    broadcastToAll(message) {
+        const broadcastMessage = {
+            type: 'broadcast',
+            data: message,
+            timestamp: new Date().toISOString()
+        };
+
+        this.clients.forEach((client, clientId) => {
+            this.sendToClient(clientId, broadcastMessage);
+        });
+    }
+
+    generateClientId() {
+        return `client_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+}
+
+// Create singleton instance
+const wsHandler = new WebSocketHandler()
+
+/**
+ * Setup WebSocket handling for Socket.IO server
+ * @param {Server} io - Socket.IO server instance
+ */
+function setupWebSocket(io) {
+    io.on('connection', (socket) => {
+        const clientId = wsHandler.generateClientId()
+        
+        console.log(`New WebSocket connection: ${clientId}`)
+        
+        // Store client connection
+        wsHandler.clients.set(clientId, {
+            socket,
+            subscriptions: new Set(),
+            connectedAt: new Date()
+        })
+
+        // Send welcome message
+        socket.emit('connection', {
+            clientId,
+            message: 'Connected to Frigg Management Server',
+            timestamp: new Date().toISOString()
+        })
+
+        // Handle incoming messages
+        socket.on('message', (data) => {
+            try {
+                wsHandler.handleMessage(clientId, data)
+            } catch (error) {
+                console.error('Invalid WebSocket message:', error)
+                socket.emit('error', {
+                    message: 'Invalid message format',
+                    timestamp: new Date().toISOString()
+                })
+            }
+        })
+
+        // Handle subscriptions
+        socket.on('subscribe', (data) => {
+            wsHandler.handleSubscribe(clientId, data)
+        })
+
+        socket.on('unsubscribe', (data) => {
+            wsHandler.handleUnsubscribe(clientId, data)
+        })
+
+        // Handle ping
+        socket.on('ping', () => {
+            socket.emit('pong', { timestamp: new Date().toISOString() })
+        })
+
+        // Handle client disconnect
+        socket.on('disconnect', () => {
+            console.log(`Client disconnected: ${clientId}`)
+            wsHandler.handleDisconnect(clientId)
+        })
+
+        // Handle errors
+        socket.on('error', (error) => {
+            console.error(`WebSocket error for client ${clientId}:`, error)
+            wsHandler.handleDisconnect(clientId)
+        })
+
+        // Keep-alive ping
+        const pingInterval = setInterval(() => {
+            if (socket.connected) {
+                socket.emit('ping', { timestamp: new Date().toISOString() })
+            } else {
+                clearInterval(pingInterval)
+            }
+        }, 30000)
+    })
+
+    // Store io instance for broadcasting
+    wsHandler.io = io
+}
+
+// Enhanced handler methods
+WebSocketHandler.prototype.sendToClient = function(clientId, message) {
+    const client = this.clients.get(clientId)
+    
+    if (client && client.socket.connected) {
+        client.socket.emit('message', message)
+    }
+}
+
+WebSocketHandler.prototype.broadcast = function(topic, message) {
+    const subscribers = this.subscriptions.get(topic)
+    
+    if (!subscribers) {
+        // If no specific subscribers, broadcast to all connected clients
+        this.broadcastToAll({ topic, ...message })
+        return
+    }
+
+    const broadcastMessage = {
+        type: 'broadcast',
+        topic,
+        data: message,
+        timestamp: new Date().toISOString()
+    }
+
+    subscribers.forEach(clientId => {
+        this.sendToClient(clientId, broadcastMessage)
+    })
+}
+
+WebSocketHandler.prototype.broadcastToAll = function(message) {
+    if (this.io) {
+        this.io.emit('broadcast', {
+            data: message,
+            timestamp: new Date().toISOString()
+        })
+    }
+}
+
+// Export setup function and handler instance
+export { setupWebSocket, wsHandler }

package/management-ui/src/App.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
+import Layout from './components/Layout'
+import Dashboard from './pages/Dashboard'
+import Integrations from './pages/Integrations'
+import IntegrationDiscovery from './pages/IntegrationDiscovery'
+import IntegrationConfigure from './pages/IntegrationConfigure'
+import IntegrationTest from './pages/IntegrationTest'
+import Environment from './pages/Environment'
+import Users from './pages/Users'
+import ConnectionsEnhanced from './pages/ConnectionsEnhanced'
+import Simulation from './pages/Simulation'
+import Monitoring from './pages/Monitoring'
+import CodeGeneration from './pages/CodeGeneration'
+import ErrorBoundary from './components/ErrorBoundary'
+import { SocketProvider } from './hooks/useSocket'
+import { FriggProvider } from './hooks/useFrigg'
+import { ThemeProvider } from './components/theme-provider'
+
+function App() {
+  return (
+    <ErrorBoundary>
+      <ThemeProvider defaultTheme="system">
+        <SocketProvider>
+          <FriggProvider>
+            <Router>
+              <Routes>
+                <Route path="/" element={<Layout />}>
+                  <Route index element={<Navigate to="/dashboard" replace />} />
+                  <Route path="dashboard" element={<Dashboard />} />
+                  <Route path="integrations" element={<Integrations />} />
+                  <Route path="integrations/discover" element={<IntegrationDiscovery />} />
+                  <Route path="integrations/:integrationName/configure" element={<IntegrationConfigure />} />
+                  <Route path="integrations/:integrationName/test" element={<IntegrationTest />} />
+                  <Route path="environment" element={<Environment />} />
+                  <Route path="users" element={<Users />} />
+                  <Route path="connections" element={<ConnectionsEnhanced />} />
+                  <Route path="simulation" element={<Simulation />} />
+                  <Route path="monitoring" element={<Monitoring />} />
+                  <Route path="code-generation" element={<CodeGeneration />} />
+                </Route>
+              </Routes>
+            </Router>
+          </FriggProvider>
+        </SocketProvider>
+      </ThemeProvider>
+    </ErrorBoundary>
+  )
+}
+
+export default App

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

@@ -0,0 +1,65 @@
+import React from 'react'
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
+import { useFrigg } from '../hooks/useFrigg'
+import Layout from './Layout'
+import Welcome from './Welcome'
+import Dashboard from '../pages/Dashboard'
+import Integrations from '../pages/Integrations'
+import IntegrationDiscovery from '../pages/IntegrationDiscovery'
+import IntegrationConfigure from '../pages/IntegrationConfigure'
+import IntegrationTest from '../pages/IntegrationTest'
+import Environment from '../pages/Environment'
+import Users from '../pages/Users'
+import ConnectionsEnhanced from '../pages/ConnectionsEnhanced'
+import Simulation from '../pages/Simulation'
+import Monitoring from '../pages/Monitoring'
+import CodeGeneration from '../pages/CodeGeneration'
+
+export default function AppRouter() {
+  const { currentRepository, isLoading } = useFrigg()
+  const location = useLocation()
+
+  // Show loading screen while initializing
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Initializing Frigg Management UI...</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Always show welcome screen if no repository is selected
+  if (!currentRepository) {
+    return <Welcome />
+  }
+
+  // If we have a repository and we're still on welcome (shouldn't happen with new flow)
+  // or we're on root, redirect to dashboard
+  if (currentRepository && (location.pathname === '/welcome' || location.pathname === '/')) {
+    return <Navigate to="/dashboard" replace />
+  }
+
+  // Normal routing with Layout for all other cases
+  return (
+    <Layout>
+      <Routes>
+        <Route path="/welcome" element={<Welcome />} />
+        <Route path="/" element={<Navigate to="/dashboard" />} />
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/integrations" element={<Integrations />} />
+        <Route path="/integrations/discover" element={<IntegrationDiscovery />} />
+        <Route path="/integrations/:integrationName/configure" element={<IntegrationConfigure />} />
+        <Route path="/integrations/:integrationName/test" element={<IntegrationTest />} />
+        <Route path="/environment" element={<Environment />} />
+        <Route path="/users" element={<Users />} />
+        <Route path="/connections" element={<ConnectionsEnhanced />} />
+        <Route path="/simulation" element={<Simulation />} />
+        <Route path="/monitoring" element={<Monitoring />} />
+        <Route path="/code-generation" element={<CodeGeneration />} />
+      </Routes>
+    </Layout>
+  )
+}

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

@@ -0,0 +1,2 @@
+// Re-export shadcn Button component
+export { Button } from './ui/button'

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

@@ -0,0 +1,9 @@
+// Re-export shadcn Card components with filtered props
+export {
+  Card,
+  CardHeader,
+  CardContent,
+  CardTitle,
+  CardDescription,
+  CardFooter
+} from './ui/card'