@friggframework/devtools 2.0.0-next.29 → 2.0.0-next.30

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,109 @@
+import React from 'react'
+<<<<<<< HEAD
+<<<<<<< HEAD
+import { BrowserRouter as Router } from 'react-router-dom'
+import AppRouter from './components/AppRouter'
+=======
+<<<<<<< HEAD
+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'
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+import Monitoring from './pages/Monitoring'
+import CodeGeneration from './pages/CodeGeneration'
+=======
+import { BrowserRouter as Router } from 'react-router-dom'
+import AppRouter from './components/AppRouter'
+>>>>>>> d6114470 (feat: add comprehensive DDD/Hexagonal architecture RFC series)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+import { BrowserRouter as Router } from 'react-router-dom'
+import AppRouter from './components/AppRouter'
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+import ErrorBoundary from './components/ErrorBoundary'
+import { SocketProvider } from './hooks/useSocket'
+import { FriggProvider } from './hooks/useFrigg'
+import { ThemeProvider } from './components/theme-provider'
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+=======
+import ErrorBoundary from './components/ErrorBoundary'
+import { SocketProvider } from './hooks/useSocket'
+import { FriggProvider } from './hooks/useFrigg'
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+=======
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+
+function App() {
+  return (
+    <ErrorBoundary>
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+      <ThemeProvider defaultTheme="system">
+        <SocketProvider>
+          <FriggProvider>
+            <Router>
+              <AppRouter />
+            </Router>
+          </FriggProvider>
+        </SocketProvider>
+      </ThemeProvider>
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+=======
+      <SocketProvider>
+        <FriggProvider>
+          <Router>
+            <Layout>
+              <Routes>
+                <Route path="/" element={<Navigate to="/dashboard" />} />
+                <Route path="/dashboard" element={<Dashboard />} />
+                <Route path="/integrations" 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 />} />
+              </Routes>
+            </Layout>
+          </Router>
+        </FriggProvider>
+      </SocketProvider>
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+=======
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+    </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,70 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+// Re-export shadcn Button component
+export { Button } from './ui/button'
+=======
+<<<<<<< HEAD
+<<<<<<< HEAD
+// Re-export shadcn Button component
+export { Button } from './ui/button'
+=======
+import React from 'react';
+import { cn } from '../utils/cn';
+
+const Button = React.forwardRef(({ 
+  className, 
+  variant = 'default', 
+  size = 'default', 
+  children, 
+  disabled,
+  ...props 
+}, ref) => {
+  const variants = {
+    default: 'bg-blue-600 text-white hover:bg-blue-700 border-transparent',
+    destructive: 'bg-red-600 text-white hover:bg-red-700 border-transparent',
+    outline: 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
+    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 border-transparent',
+    ghost: 'hover:bg-gray-100 text-gray-700 border-transparent',
+    link: 'underline-offset-4 hover:underline text-blue-600 border-transparent bg-transparent p-0 h-auto',
+    success: 'bg-green-600 text-white hover:bg-green-700 border-transparent',
+    warning: 'bg-orange-600 text-white hover:bg-orange-700 border-transparent',
+  };
+
+  const sizes = {
+    default: 'h-10 px-4 py-2',
+    sm: 'h-9 px-3 text-sm',
+    lg: 'h-11 px-8',
+    icon: 'h-10 w-10',
+  };
+
+  return (
+    <button
+      className={cn(
+        'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border',
+        variants[variant],
+        sizes[size],
+        disabled && 'opacity-50 cursor-not-allowed',
+        className
+      )}
+      ref={ref}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+});
+
+Button.displayName = 'Button';
+
+export { Button };
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+=======
+// Re-export shadcn Button component
+export { Button } from './ui/button'
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+// Re-export shadcn Button component
+export { Button } from './ui/button'
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)

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

@@ -0,0 +1,97 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+<<<<<<< HEAD
+// Re-export shadcn Card components with filtered props
+export {
+  Card,
+  CardHeader,
+  CardContent,
+  CardTitle,
+  CardDescription,
+  CardFooter
+} from './ui/card'
+=======
+import React from 'react'
+import { cn } from '../utils/cn'
+
+const Card = ({ children, className, ...props }) => {
+  return (
+    <div
+      className={cn(
+        'bg-white shadow-sm rounded-lg border border-gray-200',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+const CardHeader = ({ children, className, ...props }) => {
+  return (
+    <div
+      className={cn('px-6 py-4 border-b border-gray-200', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+const CardContent = ({ children, className, ...props }) => {
+  return (
+    <div className={cn('px-6 py-4', className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+const CardTitle = ({ children, className, ...props }) => {
+  return (
+    <h3
+      className={cn('text-lg font-medium text-gray-900', className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  )
+}
+
+const CardDescription = ({ children, className, ...props }) => {
+  return (
+    <p
+      className={cn('text-sm text-gray-600 mt-1', className)}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
+
+export { Card, CardHeader, CardContent, CardTitle, CardDescription }
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+=======
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+// Re-export shadcn Card components with filtered props
+export { 
+  Card, 
+  CardHeader, 
+  CardContent, 
+  CardTitle, 
+  CardDescription,
+  CardFooter 
+<<<<<<< HEAD
+<<<<<<< HEAD
+} from './ui/card'
+=======
+} from './ui/card'
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+} from './ui/card'
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)