@friggframework/devtools 2.0.0--canary.400.bed3308.0 → 2.0.0--canary.400.545e7a8.0

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

@@ -1,255 +0,0 @@
-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'
-import { cn } from '../lib/utils'
-
-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) => {
-      setSessions(prev => prev.map(session => 
-        session.id === data.sessionId 
-          ? { ...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
-    
-    if (diff < 0) return 'Expired'
-    
-    const minutes = Math.floor(diff / 60000)
-    const hours = Math.floor(minutes / 60)
-    
-    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
-    
-    const minutes = Math.floor(diff / 60000)
-    const hours = Math.floor(minutes / 60)
-    
-    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",
-            refreshing 
-              ? "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",
-                    session.active 
-                      ? "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

@@ -1,70 +0,0 @@
-import React from 'react'
-import { Badge } from './ui/badge'
-import { cn } from '../lib/utils'
-import { Loader2, CheckCircle2, XCircle, AlertCircle, Circle } from 'lucide-react'
-
-const StatusBadge = ({ status, className, showIcon = true, ...props }) => {
-  const getStatusConfig = (status) => {
-    switch (status) {
-      case 'running':
-        return {
-          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: ''
-        }
-    }
-  }
-
-  const config = getStatusConfig(status)
-  const Icon = config.icon
-
-  return (
-    <Badge 
-      variant={config.variant}
-      className={cn(
-        'gap-1.5 px-3 py-1 font-medium industrial-transition sharp-badge',
-        config.className,
-        className
-      )}
-      {...props}
-    >
-      {showIcon && (
-        <Icon size={14} className={cn('', config.iconClassName)} />
-      )}
-      {config.text}
-    </Badge>
-  )
-}
-
-export { StatusBadge }
-export default StatusBadge

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

@@ -1,154 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { User, ChevronDown, UserCircle } from 'lucide-react'
-import { cn } from '../lib/utils'
-
-const UserContextSwitcher = ({ users, currentUser, onUserSwitch }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const dropdownRef = useRef(null)
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false)
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
-
-  const handleUserSelect = (user) => {
-    onUserSwitch(user)
-    setIsOpen(false)
-  }
-
-  const clearContext = () => {
-    onUserSwitch(null)
-    setIsOpen(false)
-  }
-
-  return (
-    <div className="relative" ref={dropdownRef}>
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className={cn(
-          "flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors",
-          currentUser 
-            ? "bg-blue-100 text-blue-700 hover:bg-blue-200" 
-            : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-        )}
-      >
-        {currentUser ? (
-          <>
-            <div className="w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-xs">
-              {currentUser.firstName?.[0]}{currentUser.lastName?.[0]}
-            </div>
-            <span className="max-w-[150px] truncate">
-              {currentUser.firstName} {currentUser.lastName}
-            </span>
-          </>
-        ) : (
-          <>
-            <UserCircle size={20} />
-            <span>No User Context</span>
-          </>
-        )}
-        <ChevronDown size={16} className={cn(
-          "transition-transform",
-          isOpen && "rotate-180"
-        )} />
-      </button>
-
-      {/* Dropdown */}
-      {isOpen && (
-        <div className="absolute right-0 mt-2 w-72 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
-          <div className="p-3 border-b border-gray-200">
-            <h3 className="text-sm font-semibold text-gray-900">Switch User Context</h3>
-            <p className="text-xs text-gray-500 mt-1">
-              Simulate integration behavior as different users
-            </p>
-          </div>
-
-          <div className="max-h-64 overflow-y-auto">
-            {users.length === 0 ? (
-              <div className="p-4 text-center text-sm text-gray-500">
-                No users available. Create a test user first.
-              </div>
-            ) : (
-              <>
-                {currentUser && (
-                  <button
-                    onClick={clearContext}
-                    className="w-full text-left px-4 py-3 hover:bg-gray-50 flex items-center space-x-3 border-b border-gray-100"
-                  >
-                    <div className="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center">
-                      <User size={16} className="text-gray-600" />
-                    </div>
-                    <div>
-                      <p className="text-sm font-medium text-gray-900">Clear Context</p>
-                      <p className="text-xs text-gray-500">Use default system context</p>
-                    </div>
-                  </button>
-                )}
-                
-                {users.map((user) => (
-                  <button
-                    key={user.id}
-                    onClick={() => handleUserSelect(user)}
-                    className={cn(
-                      "w-full text-left px-4 py-3 hover:bg-gray-50 flex items-center space-x-3",
-                      currentUser?.id === user.id && "bg-blue-50"
-                    )}
-                  >
-                    <div className={cn(
-                      "w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium",
-                      currentUser?.id === user.id 
-                        ? "bg-blue-600 text-white" 
-                        : "bg-gray-300 text-gray-700"
-                    )}>
-                      {user.firstName?.[0]}{user.lastName?.[0]}
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium text-gray-900">
-                        {user.firstName} {user.lastName}
-                      </p>
-                      <p className="text-xs text-gray-500 truncate">{user.email}</p>
-                      <div className="flex items-center space-x-2 mt-1">
-                        <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
-                          {user.role}
-                        </span>
-                        {user.appOrgId && (
-                          <span className="text-xs text-gray-500">
-                            Org: {user.appOrgId}
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                    {currentUser?.id === user.id && (
-                      <div className="text-blue-600">
-                        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                        </svg>
-                      </div>
-                    )}
-                  </button>
-                ))}
-              </>
-            )}
-          </div>
-
-          {currentUser && (
-            <div className="p-3 bg-gray-50 border-t border-gray-200">
-              <p className="text-xs text-gray-600">
-                <span className="font-medium">Current context:</span> {currentUser.appUserId || currentUser.email}
-              </p>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default UserContextSwitcher