@friggframework/devtools 2.0.0-next.5 → 2.0.0-next.50

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,25 @@
+import React from 'react'
+import { BrowserRouter as Router } from 'react-router-dom'
+import AppRouter from './components/AppRouter'
+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>
+              <AppRouter />
+            </Router>
+          </FriggProvider>
+        </SocketProvider>
+      </ThemeProvider>
+    </ErrorBoundary>
+  )
+}
+
+export default App

package/management-ui/src/assets/FriggLogo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 201.65"><defs><style>.cls-1,.cls-2{fill:#71a087;}.cls-3{letter-spacing:.02em;}.cls-3,.cls-4,.cls-5{font-family:DINCondensed-Bold, 'DIN Condensed';}.cls-3,.cls-5{fill:#fff;font-size:56.17px;}.cls-4{font-size:114.37px;}.cls-4,.cls-6{stroke:#616061;stroke-miterlimit:10;}.cls-4,.cls-6,.cls-7{fill:#565859;}.cls-5{letter-spacing:.03em;}.cls-7,.cls-2{fill-rule:evenodd;}</style></defs><g id="BADGE"><rect class="cls-1" x="0" y="121.65" width="400" height="80" rx="13" ry="13"/><g><text class="cls-5" transform="translate(132.49 179.9)"><tspan x="0" y="0">LEFT</tspan></text><text class="cls-5" transform="translate(235.62 179.14)"><tspan x="0" y="0">HOOK</tspan></text><text class="cls-3" transform="translate(64.35 179.9)"><tspan x="0" y="0">BY</tspan></text></g></g><g id="FRIGG"><path class="cls-6" d="M147.74,16.97h35.79v11.06h-23.78v24.89h20.72v11.06h-20.72v35.04h-12.01V16.97Z"/><path class="cls-6" d="M193.68,16.97h19.31c14.13,0,21.19,8.03,21.19,24.09,0,4.76-.77,8.86-2.3,12.27-1.53,3.42-4.22,6.17-8.06,8.24l12.95,37.46h-12.71l-11.18-35.04h-7.18v35.04h-12.01V16.97Zm12.01,36.65h6.83c2.12,0,3.81-.29,5.06-.87,1.25-.58,2.22-1.4,2.88-2.48,.67-1.08,1.12-2.4,1.35-3.98,.23-1.57,.35-3.4,.35-5.47s-.12-3.9-.35-5.47c-.24-1.57-.73-2.92-1.47-4.03-.75-1.11-1.79-1.94-3.12-2.48-1.34-.54-3.1-.81-5.3-.81h-6.24v25.59Z"/><path class="cls-6" d="M278.29,36.69c0-3.25,.58-6.12,1.74-8.61,1.16-2.49,2.68-4.55,4.57-6.18,1.89-1.62,4.01-2.85,6.37-3.68,2.35-.83,4.73-1.25,7.12-1.25s4.76,.42,7.12,1.25c2.35,.83,4.48,2.06,6.37,3.68,1.89,1.63,3.41,3.68,4.57,6.18,1.16,2.49,1.74,5.37,1.74,8.61v4.08h-11.81v-4.08c0-2.79-.79-4.85-2.37-6.18-1.58-1.32-3.45-1.98-5.61-1.98s-4.03,.66-5.61,1.98c-1.58,1.32-2.37,3.38-2.37,6.18v42.61c0,2.8,.79,4.86,2.37,6.18,1.58,1.32,3.45,1.98,5.61,1.98s4.03-.66,5.61-1.98c1.58-1.32,2.37-3.38,2.37-6.18v-15.19h-9.38v-10.2h21.19v25.39c0,3.33-.58,6.22-1.74,8.67-1.16,2.46-2.68,4.5-4.57,6.12-1.89,1.63-4.01,2.85-6.37,3.68-2.35,.83-4.73,1.25-7.12,1.25s-4.77-.42-7.12-1.25c-2.35-.83-4.48-2.06-6.37-3.68-1.89-1.62-3.41-3.66-4.57-6.12-1.16-2.45-1.74-5.34-1.74-8.67V36.69Z"/><path class="cls-6" d="M329.06,36.69c0-3.25,.58-6.12,1.74-8.61s2.68-4.55,4.57-6.18c1.89-1.62,4.01-2.85,6.37-3.68,2.35-.83,4.73-1.25,7.12-1.25s4.76,.42,7.12,1.25c2.35,.83,4.48,2.06,6.37,3.68,1.89,1.63,3.41,3.68,4.57,6.18,1.16,2.49,1.74,5.37,1.74,8.61v4.08h-11.81v-4.08c0-2.79-.79-4.85-2.37-6.18-1.58-1.32-3.45-1.98-5.61-1.98s-4.03,.66-5.61,1.98c-1.58,1.32-2.37,3.38-2.37,6.18v42.61c0,2.8,.79,4.86,2.37,6.18,1.58,1.32,3.45,1.98,5.61,1.98s4.03-.66,5.61-1.98c1.58-1.32,2.37-3.38,2.37-6.18v-15.19h-9.38v-10.2h21.19v25.39c0,3.33-.58,6.22-1.74,8.67-1.16,2.46-2.68,4.5-4.57,6.12-1.89,1.63-4.01,2.85-6.37,3.68-2.35,.83-4.73,1.25-7.12,1.25s-4.77-.42-7.12-1.25c-2.35-.83-4.48-2.06-6.37-3.68-1.89-1.62-3.41-3.66-4.57-6.12-1.16-2.45-1.74-5.34-1.74-8.67V36.69Z"/><text class="cls-4" transform="translate(243.51 98.4) scale(1.02 1)"><tspan x="0" y="0">I</tspan></text></g><g id="ICON"><path class="cls-2" d="M93.72,73.79c7.86-7.18,14-7.02,20.8,.72,2.94,4.35,.48,8.46-1.78,10.48-.02,.02-.04,.03-.05,.05l-2.28,1.92c2.32-4.48-1.91-5.1-3.52-4.05-.12,.08-.23,.16-.34,.26l-.03,.03-34.94,30.92c-.18,.15-.45,.13-.6-.04l-10.23-11.58c-.16-.18-.14-.45,.04-.61l32.94-28.1Z"/><path class="cls-7" d="M125.17,11.41l.32-8.7c.04-1.23-.41-1.26-1.85-.05l-42.08,35.62,7.98,7.85,33.42-29.03c1.42-1.25,2.16-4.16,2.21-5.69h0Z"/><path class="cls-2" d="M124.79,32.92l.32-8.7c.04-1.23-.41-1.26-1.85-.05l-30.28,25.64,8.05,7.51,21.54-18.71c1.42-1.25,2.16-4.16,2.21-5.69h0Z"/><path class="cls-7" d="M124.96,54.26l.32-8.7c.04-1.23-.41-1.26-1.85-.05l-18.01,15.24,7.88,7.37,9.43-8.17c1.42-1.25,2.16-4.16,2.23-5.69h0Z"/><path class="cls-2" d="M88.65,69.04L35.29,21.17c-3.14-2.81-3.26-5.55-3.12-8.58l.38-9.17L97.11,61.67l-8.46,7.37Z"/><path class="cls-7" d="M76.09,79.78L34.75,42.73c-1.65-1.49-2.15-6.15-2.08-7.85l.65-8.58,51.14,46.26-8.37,7.23Z"/><path class="cls-2" d="M62.39,91.85l-27.96-26.7c-1.93-1.84-3.17-4.71-3.07-6.67l.56-9.77,39.27,35.47-8.79,7.66Z"/></g></svg>

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)