@friggframework/devtools 2.0.0-next.61 → 2.0.0-next.63

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

@@ -1,212 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { User, ChevronDown, UserCircle } from 'lucide-react'
-<<<<<<< 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 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",
-<<<<<<< HEAD
-<<<<<<< HEAD
-          currentUser 
-            ? "bg-blue-100 text-blue-700 hover:bg-blue-200" 
-=======
-<<<<<<< HEAD
-          currentUser
-            ? "bg-blue-100 text-blue-700 hover:bg-blue-200"
-=======
-          currentUser 
-            ? "bg-blue-100 text-blue-700 hover:bg-blue-200" 
->>>>>>> 652520a5 (Claude Flow RFC related development)
->>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
-=======
-          currentUser 
-            ? "bg-blue-100 text-blue-700 hover:bg-blue-200" 
->>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
-            : "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>
-                )}
-<<<<<<< HEAD
-<<<<<<< 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)
-                {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",
-<<<<<<< HEAD
-<<<<<<< HEAD
-                      currentUser?.id === user.id 
-                        ? "bg-blue-600 text-white" 
-=======
-<<<<<<< HEAD
-                      currentUser?.id === user.id
-                        ? "bg-blue-600 text-white"
-=======
-                      currentUser?.id === user.id 
-                        ? "bg-blue-600 text-white" 
->>>>>>> 652520a5 (Claude Flow RFC related development)
->>>>>>> 860052b4 (feat: integrate complete management-ui and additional features)
-=======
-                      currentUser?.id === user.id 
-                        ? "bg-blue-600 text-white" 
->>>>>>> 7e97f01c (fix: resolve ui-command merge conflicts and update package.json)
-                        : "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

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

@@ -1,327 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Play, Square, AlertCircle, CheckCircle, Clock, Zap } from 'lucide-react'
-import { useFrigg } from '../hooks/useFrigg'
-import { useSocket } from '../hooks/useSocket'
-import api from '../services/api'
-<<<<<<< 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 UserSimulation = ({ user, integration }) => {
-  const { currentUser } = useFrigg()
-  const { on } = useSocket()
-  const [isSimulating, setIsSimulating] = useState(false)
-  const [session, setSession] = useState(null)
-  const [logs, setLogs] = useState([])
-  const [selectedAction, setSelectedAction] = useState('list')
-  const [actionPayload, setActionPayload] = useState('')
-
-  const simulationUser = user || currentUser
-
-  useEffect(() => {
-    // Listen for simulation events
-    const unsubscribeAuth = on('simulation:auth', (data) => {
-      addLog('Authentication', data.session)
-    })
-
-    const unsubscribeAction = on('simulation:action', (data) => {
-      addLog('Action Performed', data.actionResult)
-    })
-
-    const unsubscribeWebhook = on('simulation:webhook', (data) => {
-      addLog('Webhook Event', data.webhookEvent)
-    })
-
-    return () => {
-      unsubscribeAuth && unsubscribeAuth()
-      unsubscribeAction && unsubscribeAction()
-      unsubscribeWebhook && unsubscribeWebhook()
-    }
-  }, [on])
-
-  const addLog = (type, data) => {
-    setLogs(prev => [{
-      id: Date.now(),
-      type,
-      data,
-      timestamp: new Date().toISOString()
-    }, ...prev].slice(0, 50)) // Keep last 50 logs
-  }
-
-  const startSimulation = async () => {
-    if (!simulationUser || !integration) {
-      alert('Please select a user and integration')
-      return
-    }
-
-    try {
-      setIsSimulating(true)
-      const response = await api.post('/api/users/simulation/authenticate', {
-        userId: simulationUser.id,
-        integrationId: integration.id
-      })
-<<<<<<< HEAD
-<<<<<<< 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)
-      setSession(response.data.session)
-      addLog('Session Started', response.data.session)
-    } catch (error) {
-      console.error('Failed to start simulation:', error)
-      alert('Failed to start simulation')
-      setIsSimulating(false)
-    }
-  }
-
-  const stopSimulation = async () => {
-    if (!session) return
-
-    try {
-      await api.delete(`/api/users/simulation/sessions/${session.sessionId}`)
-      setSession(null)
-      setIsSimulating(false)
-      addLog('Session Ended', { sessionId: session.sessionId })
-    } catch (error) {
-      console.error('Failed to stop simulation:', error)
-    }
-  }
-
-  const performAction = async () => {
-    if (!session) return
-
-    try {
-      let payload = {}
-      if (actionPayload) {
-        try {
-          payload = JSON.parse(actionPayload)
-        } catch {
-          payload = { data: actionPayload }
-        }
-      }
-
-      const response = await api.post('/api/users/simulation/action', {
-        sessionId: session.sessionId,
-        action: selectedAction,
-        payload
-      })
-
-      addLog('Action Result', response.data.actionResult)
-    } catch (error) {
-      console.error('Failed to perform action:', error)
-      alert('Failed to perform action')
-    }
-  }
-
-  const simulateWebhook = async () => {
-    if (!simulationUser || !integration) return
-
-    try {
-      const response = await api.post('/api/users/simulation/webhook', {
-        userId: simulationUser.id,
-        integrationId: integration.id,
-        event: 'data.updated',
-        data: {
-          id: 'webhook_item_' + Date.now(),
-          changes: ['field1', 'field2'],
-          timestamp: new Date().toISOString()
-        }
-      })
-
-      addLog('Webhook Simulated', response.data.webhookEvent)
-    } catch (error) {
-      console.error('Failed to simulate webhook:', error)
-      alert('Failed to simulate webhook')
-    }
-  }
-
-  const commonActions = [
-    { value: 'list', label: 'List Items' },
-    { value: 'create', label: 'Create Item' },
-    { value: 'update', label: 'Update Item' },
-    { value: 'delete', label: 'Delete Item' },
-    { value: 'sync', label: 'Sync Data' }
-  ]
-
-  return (
-    <div className="bg-white rounded-lg shadow p-6">
-      <div className="mb-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-2">User Simulation</h3>
-        <p className="text-sm text-gray-600">
-          Simulate user interactions with integrations for testing
-        </p>
-      </div>
-
-      {/* Simulation Controls */}
-      <div className="space-y-4 mb-6">
-        <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
-          <div>
-            <p className="text-sm font-medium text-gray-900">
-              {simulationUser ? `${simulationUser.firstName} ${simulationUser.lastName}` : 'No user selected'}
-            </p>
-            <p className="text-xs text-gray-500">
-              {integration ? integration.name : 'No integration selected'}
-            </p>
-          </div>
-          <div className="flex items-center space-x-2">
-            {!isSimulating ? (
-              <button
-                onClick={startSimulation}
-                disabled={!simulationUser || !integration}
-                className={cn(
-                  "flex items-center space-x-2 px-4 py-2 rounded-md transition-colors",
-                  simulationUser && integration
-                    ? "bg-green-600 text-white hover:bg-green-700"
-                    : "bg-gray-300 text-gray-500 cursor-not-allowed"
-                )}
-              >
-                <Play size={16} />
-                <span>Start Simulation</span>
-              </button>
-            ) : (
-              <button
-                onClick={stopSimulation}
-                className="flex items-center space-x-2 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
-              >
-                <Square size={16} />
-                <span>Stop Simulation</span>
-              </button>
-            )}
-          </div>
-        </div>
-
-        {session && (
-          <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
-            <div className="flex items-start space-x-3">
-              <CheckCircle className="text-blue-600 mt-0.5" size={20} />
-              <div className="flex-1">
-                <p className="text-sm font-medium text-blue-900">Session Active</p>
-                <p className="text-xs text-blue-700 mt-1">
-                  Session ID: {session.sessionId}
-                </p>
-                <p className="text-xs text-blue-700">
-                  Expires: {new Date(session.expiresAt).toLocaleTimeString()}
-                </p>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Action Simulator */}
-      {isSimulating && session && (
-        <div className="space-y-4 mb-6">
-          <div className="p-4 border border-gray-200 rounded-lg">
-            <h4 className="text-sm font-medium text-gray-900 mb-3">Simulate Action</h4>
-            <div className="space-y-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Action Type
-                </label>
-                <select
-                  value={selectedAction}
-                  onChange={(e) => setSelectedAction(e.target.value)}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
-                >
-                  {commonActions.map(action => (
-                    <option key={action.value} value={action.value}>
-                      {action.label}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
-                  Payload (JSON)
-                </label>
-                <textarea
-                  value={actionPayload}
-                  onChange={(e) => setActionPayload(e.target.value)}
-                  placeholder='{"name": "Test Item"}'
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 font-mono text-xs"
-                  rows={3}
-                />
-              </div>
-              <div className="flex space-x-2">
-                <button
-                  onClick={performAction}
-                  className="flex items-center space-x-2 px-3 py-1.5 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700"
-                >
-                  <Zap size={14} />
-                  <span>Execute Action</span>
-                </button>
-                <button
-                  onClick={simulateWebhook}
-                  className="flex items-center space-x-2 px-3 py-1.5 bg-purple-600 text-white text-sm rounded-md hover:bg-purple-700"
-                >
-                  <AlertCircle size={14} />
-                  <span>Trigger Webhook</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Activity Logs */}
-      <div>
-        <h4 className="text-sm font-medium text-gray-900 mb-3">Activity Log</h4>
-        <div className="space-y-2 max-h-64 overflow-y-auto">
-          {logs.length === 0 ? (
-            <p className="text-sm text-gray-500 text-center py-4">
-              No activity yet. Start a simulation to see logs.
-            </p>
-          ) : (
-            logs.map(log => (
-              <div
-                key={log.id}
-                className="p-3 bg-gray-50 rounded-md border border-gray-200"
-              >
-                <div className="flex items-start justify-between">
-                  <div className="flex items-center space-x-2">
-                    <Clock size={14} className="text-gray-500" />
-                    <span className="text-xs font-medium text-gray-900">
-                      {log.type}
-                    </span>
-                  </div>
-                  <span className="text-xs text-gray-500">
-                    {new Date(log.timestamp).toLocaleTimeString()}
-                  </span>
-                </div>
-                <div className="mt-1">
-                  <pre className="text-xs text-gray-600 font-mono overflow-x-auto">
-                    {JSON.stringify(log.data, null, 2)}
-                  </pre>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default UserSimulation