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

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

@@ -0,0 +1,350 @@
+import React, { useState, useEffect } from 'react'
+import { Clock, User, Activity, RefreshCw, XCircle } from 'lucide-react'
+import { useFrigg } from '../hooks/useFrigg'
+import { useSocket } from '../hooks/useSocket'
+<<<<<<< HEAD
+<<<<<<< HEAD
+import { cn } from '../lib/utils'
+=======
+<<<<<<< HEAD
+<<<<<<< HEAD
+import { cn } from '../lib/utils'
+=======
+import { cn } from '../utils/cn'
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+=======
+import { cn } from '../lib/utils'
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+import { cn } from '../lib/utils'
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+
+const SessionMonitor = ({ userId = null }) => {
+  const { users, getAllSessions, getUserSessions, refreshSession, endSession } = useFrigg()
+  const { on } = useSocket()
+  const [sessions, setSessions] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [refreshing, setRefreshing] = useState(false)
+
+  // Fetch sessions
+  const fetchSessions = async () => {
+    try {
+      setLoading(true)
+      if (userId) {
+        const userSessions = await getUserSessions(userId)
+        setSessions(userSessions)
+      } else {
+        const allSessionsData = await getAllSessions()
+        setSessions(allSessionsData.sessions)
+      }
+    } catch (error) {
+      console.error('Error fetching sessions:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchSessions()
+
+    // Listen for session events
+    const unsubscribeCreated = on('session:created', () => {
+      fetchSessions()
+    })
+
+    const unsubscribeEnded = on('session:ended', () => {
+      fetchSessions()
+    })
+
+    const unsubscribeActivity = on('session:activity', (data) => {
+<<<<<<< HEAD
+<<<<<<< HEAD
+      setSessions(prev => prev.map(session => 
+        session.id === data.sessionId 
+=======
+<<<<<<< HEAD
+      setSessions(prev => prev.map(session =>
+        session.id === data.sessionId
+=======
+      setSessions(prev => prev.map(session => 
+        session.id === data.sessionId 
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+      setSessions(prev => prev.map(session => 
+        session.id === data.sessionId 
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+          ? { ...session, lastActivity: data.timestamp }
+          : session
+      ))
+    })
+
+    // Auto-refresh every 30 seconds
+    const interval = setInterval(fetchSessions, 30000)
+
+    return () => {
+      unsubscribeCreated && unsubscribeCreated()
+      unsubscribeEnded && unsubscribeEnded()
+      unsubscribeActivity && unsubscribeActivity()
+      clearInterval(interval)
+    }
+  }, [on, userId])
+
+  const handleRefreshSession = async (sessionId) => {
+    try {
+      setRefreshing(true)
+      await refreshSession(sessionId)
+      await fetchSessions()
+    } catch (error) {
+      console.error('Error refreshing session:', error)
+      alert('Failed to refresh session')
+    } finally {
+      setRefreshing(false)
+    }
+  }
+
+  const handleEndSession = async (sessionId) => {
+    if (window.confirm('Are you sure you want to end this session?')) {
+      try {
+        await endSession(sessionId)
+        await fetchSessions()
+      } catch (error) {
+        console.error('Error ending session:', error)
+        alert('Failed to end session')
+      }
+    }
+  }
+
+  const getUser = (userId) => {
+    return users.find(u => u.id === userId)
+  }
+
+  const formatTimeRemaining = (expiresAt) => {
+    const now = new Date()
+    const expiry = new Date(expiresAt)
+    const diff = expiry - now
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+
+    if (diff < 0) return 'Expired'
+
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(minutes / 60)
+
+=======
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+    
+    if (diff < 0) return 'Expired'
+    
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(minutes / 60)
+    
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 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)
+    if (hours > 0) return `${hours}h ${minutes % 60}m`
+    return `${minutes}m`
+  }
+
+  const getTimeAgo = (timestamp) => {
+    const now = new Date()
+    const time = new Date(timestamp)
+    const diff = now - time
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(minutes / 60)
+
+=======
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+    
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(minutes / 60)
+    
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 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)
+    if (hours > 0) return `${hours}h ago`
+    if (minutes > 0) return `${minutes}m ago`
+    return 'Just now'
+  }
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-center justify-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-900">Active Sessions</h3>
+          <p className="text-sm text-gray-600 mt-1">
+            {userId ? 'User sessions' : 'All active development sessions'}
+          </p>
+        </div>
+        <button
+          onClick={fetchSessions}
+          disabled={refreshing}
+          className={cn(
+            "flex items-center space-x-2 px-3 py-1.5 rounded-md text-sm transition-colors",
+<<<<<<< HEAD
+<<<<<<< HEAD
+            refreshing 
+=======
+<<<<<<< HEAD
+            refreshing
+=======
+            refreshing 
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+            refreshing 
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+              ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+              : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+          )}
+        >
+          <RefreshCw size={14} className={cn(refreshing && "animate-spin")} />
+          <span>Refresh</span>
+        </button>
+      </div>
+
+      {sessions.length === 0 ? (
+        <div className="text-center py-8 text-gray-500">
+          <User size={32} className="mx-auto mb-2 text-gray-400" />
+          <p>No active sessions</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {sessions.map(session => {
+            const user = getUser(session.userId)
+            const isExpiring = new Date(session.expiresAt) - new Date() < 600000 // Less than 10 minutes
+
+            return (
+              <div
+                key={session.id}
+                className="border border-gray-200 rounded-lg p-4 hover:border-gray-300 transition-colors"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center space-x-3">
+                      <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
+                        <User size={16} className="text-blue-600" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-gray-900">
+                          {user ? `${user.firstName} ${user.lastName}` : 'Unknown User'}
+                        </p>
+                        <p className="text-xs text-gray-500">
+                          {user?.email || session.userId}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="mt-3 grid grid-cols-3 gap-4 text-xs">
+                      <div className="flex items-center space-x-1 text-gray-600">
+                        <Clock size={12} />
+                        <span>Created {getTimeAgo(session.createdAt)}</span>
+                      </div>
+                      <div className="flex items-center space-x-1 text-gray-600">
+                        <Activity size={12} />
+                        <span>Active {getTimeAgo(session.lastActivity)}</span>
+                      </div>
+                      <div className={cn(
+                        "flex items-center space-x-1",
+                        isExpiring ? "text-orange-600" : "text-gray-600"
+                      )}>
+                        <Clock size={12} />
+                        <span>Expires in {formatTimeRemaining(session.expiresAt)}</span>
+                      </div>
+                    </div>
+
+                    {session.metadata && Object.keys(session.metadata).length > 0 && (
+                      <div className="mt-2 text-xs text-gray-500">
+                        <span className="font-medium">Metadata:</span> {JSON.stringify(session.metadata)}
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="flex items-center space-x-2 ml-4">
+                    <button
+                      onClick={() => handleRefreshSession(session.id)}
+                      disabled={refreshing}
+                      className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
+                      title="Refresh session"
+                    >
+                      <RefreshCw size={16} />
+                    </button>
+                    <button
+                      onClick={() => handleEndSession(session.id)}
+                      className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
+                      title="End session"
+                    >
+                      <XCircle size={16} />
+                    </button>
+                  </div>
+                </div>
+
+                <div className="mt-3 flex items-center justify-between text-xs">
+                  <code className="text-gray-500 font-mono">
+                    {session.id}
+                  </code>
+                  <span className={cn(
+                    "px-2 py-0.5 rounded-full font-medium",
+<<<<<<< HEAD
+<<<<<<< HEAD
+                    session.active 
+=======
+<<<<<<< HEAD
+                    session.active
+=======
+                    session.active 
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+                    session.active 
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+                      ? "bg-green-100 text-green-700"
+                      : "bg-gray-100 text-gray-600"
+                  )}>
+                    {session.active ? 'Active' : 'Inactive'}
+                  </span>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      <div className="mt-6 text-xs text-gray-500 text-center">
+        Sessions automatically expire after 1 hour of inactivity
+      </div>
+    </div>
+  )
+}
+
+export default SessionMonitor

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

@@ -0,0 +1,208 @@
+import React from 'react'
+<<<<<<< HEAD
+<<<<<<< HEAD
+import { Badge } from './ui/badge'
+import { cn } from '../lib/utils'
+import { Loader2, CheckCircle2, XCircle, AlertCircle, Circle } from 'lucide-react'
+=======
+<<<<<<< HEAD
+<<<<<<< HEAD
+import { Badge } from './ui/badge'
+import { cn } from '../lib/utils'
+import { Loader2, CheckCircle2, XCircle, AlertCircle, Circle } from 'lucide-react'
+=======
+import { cn } from '../utils/cn'
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+=======
+import { Badge } from './ui/badge'
+import { cn } from '../lib/utils'
+import { Loader2, CheckCircle2, XCircle, AlertCircle, Circle } from 'lucide-react'
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+import { Badge } from './ui/badge'
+import { cn } from '../lib/utils'
+import { Loader2, CheckCircle2, XCircle, AlertCircle, Circle } from 'lucide-react'
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+
+const StatusBadge = ({ status, className, showIcon = true, ...props }) => {
+  const getStatusConfig = (status) => {
+    switch (status) {
+      case 'running':
+        return {
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+<<<<<<< HEAD
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+          icon: CheckCircle2,
+          text: 'Running',
+          variant: 'default',
+          className: 'bg-green-500/10 text-green-700 hover:bg-green-500/20 border-green-200 dark:bg-green-500/20 dark:text-green-400 dark:border-green-800'
+        }
+      case 'stopped':
+        return {
+          icon: XCircle,
+          text: 'Stopped',
+          variant: 'secondary',
+          className: 'bg-red-500/10 text-red-700 hover:bg-red-500/20 border-red-200 dark:bg-red-500/20 dark:text-red-400 dark:border-red-800'
+        }
+      case 'starting':
+        return {
+          icon: Loader2,
+          text: 'Starting...',
+          variant: 'outline',
+          className: 'bg-yellow-500/10 text-yellow-700 hover:bg-yellow-500/20 border-yellow-300 dark:bg-yellow-500/20 dark:text-yellow-400 dark:border-yellow-800',
+          iconClassName: 'animate-spin'
+        }
+      case 'error':
+        return {
+          icon: AlertCircle,
+          text: 'Error',
+          variant: 'destructive',
+          className: ''
+        }
+      default:
+        return {
+          icon: Circle,
+          text: 'Unknown',
+          variant: 'outline',
+          className: ''
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+=======
+          icon: '●',
+=======
+          icon: CheckCircle2,
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+          text: 'Running',
+          variant: 'default',
+          className: 'bg-green-500/10 text-green-700 hover:bg-green-500/20 border-green-200 dark:bg-green-500/20 dark:text-green-400 dark:border-green-800'
+        }
+      case 'stopped':
+        return {
+          icon: XCircle,
+          text: 'Stopped',
+          variant: 'secondary',
+          className: 'bg-red-500/10 text-red-700 hover:bg-red-500/20 border-red-200 dark:bg-red-500/20 dark:text-red-400 dark:border-red-800'
+        }
+      case 'starting':
+        return {
+          icon: Loader2,
+          text: 'Starting...',
+          variant: 'outline',
+          className: 'bg-yellow-500/10 text-yellow-700 hover:bg-yellow-500/20 border-yellow-300 dark:bg-yellow-500/20 dark:text-yellow-400 dark:border-yellow-800',
+          iconClassName: 'animate-spin'
+        }
+      case 'error':
+        return {
+          icon: AlertCircle,
+          text: 'Error',
+          variant: 'destructive',
+          className: ''
+        }
+      default:
+        return {
+          icon: Circle,
+          text: 'Unknown',
+<<<<<<< HEAD
+          className: 'bg-gray-100 text-gray-800 border-gray-200'
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+=======
+          variant: 'outline',
+          className: ''
+>>>>>>> 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)
+        }
+    }
+  }
+
+  const config = getStatusConfig(status)
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+<<<<<<< HEAD
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+  const Icon = config.icon
+
+  return (
+    <Badge
+      variant={config.variant}
+      className={cn(
+        'gap-1.5 px-3 py-1 font-medium industrial-transition sharp-badge',
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+=======
+=======
+  const Icon = config.icon
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+
+  return (
+    <Badge 
+      variant={config.variant}
+      className={cn(
+<<<<<<< HEAD
+        'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium border',
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+=======
+        'gap-1.5 px-3 py-1 font-medium industrial-transition sharp-badge',
+>>>>>>> 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)
+        config.className,
+        className
+      )}
+      {...props}
+    >
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+<<<<<<< HEAD
+>>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
+=======
+>>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
+      {showIcon && (
+        <Icon size={14} className={cn('', config.iconClassName)} />
+      )}
+      {config.text}
+    </Badge>
+  )
+}
+
+export { StatusBadge }
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+=======
+      {showIcon && <span className="mr-1">{config.icon}</span>}
+=======
+      {showIcon && (
+        <Icon size={14} className={cn('', config.iconClassName)} />
+      )}
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+      {config.text}
+    </Badge>
+  )
+}
+
+<<<<<<< HEAD
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+=======
+export { StatusBadge }
+>>>>>>> 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)
+export default StatusBadge