@friggframework/devtools 2.0.0--canary.400.bed3308.0 → 2.0.0--canary.404.e9d4980.0

package/management-ui/src/hooks/useFrigg.jsx

@@ -1,387 +0,0 @@
-import React, { createContext, useContext, useState, useEffect } from 'react'
-import { useSocket } from './useSocket'
-import api from '../services/api'
-
-const FriggContext = createContext()
-
-export const useFrigg = () => {
-  const context = useContext(FriggContext)
-  if (!context) {
-    throw new Error('useFrigg must be used within FriggProvider')
-  }
-  return context
-}
-
-export const FriggProvider = ({ children }) => {
-  const { on, emit } = useSocket()
-  const [status, setStatus] = useState('stopped') // running, stopped, starting
-  const [environment, setEnvironment] = useState('local')
-  const [integrations, setIntegrations] = useState([])
-  const [envVariables, setEnvVariables] = useState({})
-  const [users, setUsers] = useState([])
-  const [connections, setConnections] = useState([])
-  const [currentUser, setCurrentUser] = useState(null)
-  const [repositories, setRepositories] = useState([])
-  const [currentRepository, setCurrentRepository] = useState(null)
-  const [isLoading, setIsLoading] = useState(true)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(null)
-
-  useEffect(() => {
-    // Listen for status updates
-    const unsubscribeStatus = on('frigg:status', (data) => {
-      setStatus(data.status)
-    })
-
-    // Listen for integration updates
-    const unsubscribeIntegrations = on('integrations:update', (data) => {
-      setIntegrations(data.integrations)
-    })
-
-    // Initial data fetch
-    initializeApp()
-
-    return () => {
-      unsubscribeStatus && unsubscribeStatus()
-      unsubscribeIntegrations && unsubscribeIntegrations()
-    }
-  }, [on])
-
-  const initializeApp = async () => {
-    try {
-      setIsLoading(true)
-      // First fetch repositories to see what's available
-      const repos = await fetchRepositories()
-      // For the new flow, we never auto-set a current repository
-      // The user must explicitly select one from the welcome screen
-      setCurrentRepository(null)
-    } catch (error) {
-      console.error('Error initializing app:', error)
-      setError(error.message || 'Failed to initialize app')
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const fetchRepositories = async () => {
-    try {
-      const response = await api.get('/api/project/repositories')
-      const repos = response.data.data?.repositories || response.data.repositories || []
-      setRepositories(repos)
-      return repos
-    } catch (error) {
-      console.error('Error fetching repositories:', error)
-      setRepositories([])
-      return []
-    }
-  }
-
-  const fetchCurrentRepository = async () => {
-    // For the new welcome flow, we never auto-fetch a current repository
-    // The user must always make an explicit selection
-    setCurrentRepository(null)
-    return null
-  }
-
-  const switchRepository = async (repoPath) => {
-    try {
-      const response = await api.post('/api/project/switch-repository', { repositoryPath: repoPath })
-      const repo = response.data.data?.repository || response.data.repository
-      setCurrentRepository(repo)
-      // Refresh other data after switching repository
-      await fetchInitialData()
-      return repo
-    } catch (error) {
-      console.error('Error switching repository:', error)
-      throw error
-    }
-  }
-
-  const fetchInitialData = async () => {
-    try {
-      setLoading(true)
-      setError(null)
-
-      const [statusRes, integrationsRes, envRes, usersRes, connectionsRes] = await Promise.all([
-        api.get('/api/project/status'),
-        api.get('/api/integrations'),
-        api.get('/api/environment'),
-        api.get('/api/users'),
-        api.get('/api/connections'),
-      ])
-
-      setStatus(statusRes.data.data?.status || statusRes.data.status || 'stopped')
-      setIntegrations(integrationsRes.data.data?.integrations || integrationsRes.data.integrations || [])
-      setEnvVariables(envRes.data.data?.variables || envRes.data.variables || {})
-      setUsers(usersRes.data.data?.users || usersRes.data.users || [])
-      setConnections(connectionsRes.data.data?.connections || connectionsRes.data.connections || [])
-    } catch (error) {
-      console.error('Error fetching initial data:', error)
-      setError(error.message || 'Failed to fetch data')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const startFrigg = async (options = {}) => {
-    try {
-      setStatus('starting')
-      await api.post('/api/project/start', options)
-    } catch (error) {
-      console.error('Error starting Frigg:', error)
-      setStatus('stopped')
-    }
-  }
-
-  const stopFrigg = async (force = false) => {
-    try {
-      await api.post('/api/project/stop', { force })
-      setStatus('stopped')
-    } catch (error) {
-      console.error('Error stopping Frigg:', error)
-    }
-  }
-
-  const restartFrigg = async (options = {}) => {
-    try {
-      await api.post('/api/project/restart', options)
-    } catch (error) {
-      console.error('Error restarting Frigg:', error)
-    }
-  }
-
-  const getLogs = async (limit = 100) => {
-    try {
-      const response = await api.get(`/api/project/logs?limit=${limit}`)
-      return response.data.data?.logs || response.data.logs || []
-    } catch (error) {
-      console.error('Error fetching logs:', error)
-      return []
-    }
-  }
-
-  const getMetrics = async () => {
-    try {
-      const response = await api.get('/api/project/metrics')
-      return response.data.data || response.data
-    } catch (error) {
-      console.error('Error fetching metrics:', error)
-      return null
-    }
-  }
-
-  const installIntegration = async (integrationName) => {
-    try {
-      const response = await api.post('/api/integrations/install', { name: integrationName })
-      await fetchInitialData() // Refresh data
-      return response.data
-    } catch (error) {
-      console.error('Error installing integration:', error)
-      throw error
-    }
-  }
-
-  const updateEnvVariable = async (key, value) => {
-    try {
-      await api.put('/api/environment', { key, value })
-      setEnvVariables(prev => ({ ...prev, [key]: value }))
-    } catch (error) {
-      console.error('Error updating environment variable:', error)
-      throw error
-    }
-  }
-
-  const createUser = async (userData) => {
-    try {
-      const response = await api.post('/api/users', userData)
-      await fetchInitialData() // Refresh data
-      return response.data
-    } catch (error) {
-      console.error('Error creating user:', error)
-      throw error
-    }
-  }
-
-  const updateUser = async (userId, userData) => {
-    try {
-      const response = await api.put(`/api/users/${userId}`, userData)
-      await fetchInitialData() // Refresh data
-      return response.data
-    } catch (error) {
-      console.error('Error updating user:', error)
-      throw error
-    }
-  }
-
-  const deleteUser = async (userId) => {
-    try {
-      const response = await api.delete(`/api/users/${userId}`)
-      await fetchInitialData() // Refresh data
-      return response.data
-    } catch (error) {
-      console.error('Error deleting user:', error)
-      throw error
-    }
-  }
-
-  const bulkCreateUsers = async (count) => {
-    try {
-      const response = await api.post('/api/users/bulk', { count })
-      await fetchInitialData() // Refresh data
-      return response.data
-    } catch (error) {
-      console.error('Error creating bulk users:', error)
-      throw error
-    }
-  }
-
-  const deleteAllUsers = async () => {
-    try {
-      const response = await api.delete('/api/users')
-      await fetchInitialData() // Refresh data
-      return response.data
-    } catch (error) {
-      console.error('Error deleting all users:', error)
-      throw error
-    }
-  }
-
-  const switchUserContext = (user) => {
-    setCurrentUser(user)
-    // Store in localStorage for persistence
-    if (user) {
-      localStorage.setItem('frigg_current_user', JSON.stringify(user))
-    } else {
-      localStorage.removeItem('frigg_current_user')
-    }
-    // Emit event for other components to react
-    emit('user:context-switched', { user })
-  }
-
-  // Session management functions
-  const createSession = async (userId, metadata = {}) => {
-    try {
-      const response = await api.post('/api/users/sessions/create', { userId, metadata })
-      return response.data.session
-    } catch (error) {
-      console.error('Error creating session:', error)
-      throw error
-    }
-  }
-
-  const getSession = async (sessionId) => {
-    try {
-      const response = await api.get(`/api/users/sessions/${sessionId}`)
-      return response.data.session
-    } catch (error) {
-      console.error('Error fetching session:', error)
-      throw error
-    }
-  }
-
-  const getUserSessions = async (userId) => {
-    try {
-      const response = await api.get(`/api/users/sessions/user/${userId}`)
-      return response.data.sessions
-    } catch (error) {
-      console.error('Error fetching user sessions:', error)
-      throw error
-    }
-  }
-
-  const trackSessionActivity = async (sessionId, action, data = {}) => {
-    try {
-      const response = await api.post(`/api/users/sessions/${sessionId}/activity`, { action, data })
-      return response.data.activity
-    } catch (error) {
-      console.error('Error tracking session activity:', error)
-      throw error
-    }
-  }
-
-  const refreshSession = async (sessionId) => {
-    try {
-      const response = await api.post(`/api/users/sessions/${sessionId}/refresh`)
-      return response.data.session
-    } catch (error) {
-      console.error('Error refreshing session:', error)
-      throw error
-    }
-  }
-
-  const endSession = async (sessionId) => {
-    try {
-      const response = await api.delete(`/api/users/sessions/${sessionId}`)
-      return response.data
-    } catch (error) {
-      console.error('Error ending session:', error)
-      throw error
-    }
-  }
-
-  const getAllSessions = async () => {
-    try {
-      const response = await api.get('/api/users/sessions')
-      return response.data
-    } catch (error) {
-      console.error('Error fetching all sessions:', error)
-      throw error
-    }
-  }
-
-  // Load current user from localStorage on mount
-  useEffect(() => {
-    const storedUser = localStorage.getItem('frigg_current_user')
-    if (storedUser) {
-      try {
-        setCurrentUser(JSON.parse(storedUser))
-      } catch (error) {
-        console.error('Error loading stored user context:', error)
-      }
-    }
-  }, [])
-
-  const value = {
-    status,
-    environment,
-    integrations,
-    envVariables,
-    users,
-    connections,
-    currentUser,
-    repositories,
-    currentRepository,
-    isLoading,
-    loading,
-    error,
-    startFrigg,
-    stopFrigg,
-    restartFrigg,
-    getLogs,
-    getMetrics,
-    installIntegration,
-    updateEnvVariable,
-    createUser,
-    updateUser,
-    deleteUser,
-    bulkCreateUsers,
-    deleteAllUsers,
-    switchUserContext,
-    createSession,
-    getSession,
-    getUserSessions,
-    trackSessionActivity,
-    refreshSession,
-    endSession,
-    getAllSessions,
-    fetchRepositories,
-    switchRepository,
-    refreshData: fetchInitialData,
-  }
-
-  return (
-    <FriggContext.Provider value={value}>
-      {children}
-    </FriggContext.Provider>
-  )
-}

package/management-ui/src/hooks/useSocket.jsx

@@ -1,58 +0,0 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
-import io from 'socket.io-client'
-
-const SocketContext = createContext()
-
-export const useSocket = () => {
-  const context = useContext(SocketContext)
-  if (!context) {
-    throw new Error('useSocket must be used within SocketProvider')
-  }
-  return context
-}
-
-export const SocketProvider = ({ children }) => {
-  const [socket, setSocket] = useState(null)
-  const [connected, setConnected] = useState(false)
-
-  useEffect(() => {
-    const newSocket = io('http://localhost:3001', {
-      transports: ['websocket', 'polling'],
-    })
-
-    newSocket.on('connect', () => {
-      console.log('Connected to server')
-      setConnected(true)
-    })
-
-    newSocket.on('disconnect', () => {
-      console.log('Disconnected from server')
-      setConnected(false)
-    })
-
-    setSocket(newSocket)
-
-    return () => {
-      newSocket.close()
-    }
-  }, [])
-
-  const emit = (event, data) => {
-    if (socket && connected) {
-      socket.emit(event, data)
-    }
-  }
-
-  const on = (event, callback) => {
-    if (socket) {
-      socket.on(event, callback)
-      return () => socket.off(event, callback)
-    }
-  }
-
-  return (
-    <SocketContext.Provider value={{ socket, connected, emit, on }}>
-      {children}
-    </SocketContext.Provider>
-  )
-}

package/management-ui/src/index.css

@@ -1,194 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    /* Frigg Industrial Design System - Light Mode */
-    --background: 0 0% 97%;
-    --foreground: 0 0% 20%;
-
-    /* Card with subtle gray undertone */
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 20%;
-
-    /* Popover with clean white */
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 20%;
-
-    /* Primary color - Frigg Blue with industrial tint */
-    --primary: 213 84% 45%;
-    --primary-foreground: 0 0% 98%;
-
-    /* Secondary - Industrial gray */
-    --secondary: 0 0% 30%;
-    --secondary-foreground: 0 0% 98%;
-
-    /* Muted colors for subtle elements */
-    --muted: 0 0% 93%;
-    --muted-foreground: 0 0% 45%;
-
-    /* Accent for hover states */
-    --accent: 213 20% 93%;
-    --accent-foreground: 213 84% 45%;
-
-    /* Destructive actions */
-    --destructive: 0 84% 50%;
-    --destructive-foreground: 0 0% 98%;
-
-    /* Industrial borders */
-    --border: 0 0% 85%;
-    --input: 0 0% 85%;
-    --ring: 213 84% 45%;
-
-    /* Chart colors with industrial feel */
-    --chart-1: 213 84% 45%;
-    --chart-2: 0 0% 35%;
-    --chart-3: 200 18% 46%;
-    --chart-4: 24 10% 40%;
-    --chart-5: 0 0% 60%;
-    
-    /* Sharp industrial edges */
-    --radius: 0.125rem;
-  }
-
-  .dark {
-    /* Frigg Industrial Design System - Dark Mode */
-    --background: 0 0% 8%;
-    --foreground: 0 0% 90%;
-    
-    /* Dark cards with depth */
-    --card: 0 0% 12%;
-    --card-foreground: 0 0% 90%;
-    
-    /* Dark popover */
-    --popover: 0 0% 12%;
-    --popover-foreground: 0 0% 90%;
-    
-    /* Primary - Brighter blue for dark mode */
-    --primary: 213 84% 55%;
-    --primary-foreground: 0 0% 10%;
-    
-    /* Secondary - Lighter gray for contrast */
-    --secondary: 0 0% 70%;
-    --secondary-foreground: 0 0% 10%;
-    
-    /* Muted for dark mode */
-    --muted: 0 0% 20%;
-    --muted-foreground: 0 0% 60%;
-    
-    /* Accent for dark mode */
-    --accent: 213 20% 20%;
-    --accent-foreground: 213 84% 60%;
-    
-    /* Destructive remains vibrant */
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 10%;
-    
-    /* Dark borders */
-    --border: 0 0% 25%;
-    --input: 0 0% 25%;
-    --ring: 213 84% 55%;
-    
-    /* Chart colors adjusted for dark mode */
-    --chart-1: 213 84% 55%;
-    --chart-2: 0 0% 70%;
-    --chart-3: 200 18% 60%;
-    --chart-4: 24 10% 60%;
-    --chart-5: 0 0% 80%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* Industrial design patterns */
-@layer utilities {
-  /* Sharp shadows for industrial look */
-  .industrial-shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  }
-  
-  .industrial-shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  }
-  
-  .industrial-shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  }
-  
-  /* Industrial borders */
-  .industrial-border {
-    border-color: hsl(var(--border));
-    border-width: 1px;
-  }
-  
-  /* Sharp corners for buttons and cards */
-  .sharp-corners {
-    border-radius: var(--radius);
-  }
-  
-  /* Industrial transition */
-  .industrial-transition {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  
-  /* Grid pattern background */
-  .industrial-grid {
-    background-image: linear-gradient(to right, hsl(var(--border)) 1px, transparent 1px),
-                      linear-gradient(to bottom, hsl(var(--border)) 1px, transparent 1px);
-    background-size: 20px 20px;
-  }
-  
-  /* Mechanical-style badges */
-  .sharp-badge {
-    border-radius: var(--radius);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-weight: 600;
-  }
-  
-  /* Industrial button styles */
-  .sharp-button {
-    border-radius: var(--radius);
-    transition: all 150ms;
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .sharp-button::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    transition: left 0.5s;
-  }
-  
-  .sharp-button:hover::before {
-    left: 100%;
-  }
-  
-  /* Industrial input */
-  .industrial-input {
-    border-radius: var(--radius);
-    border: 1px solid hsl(var(--border));
-    background: hsl(var(--background));
-    transition: all 150ms;
-  }
-  
-  .industrial-input:focus {
-    border-color: hsl(var(--primary));
-    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
-  }
-}

package/management-ui/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/management-ui/src/main.jsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)

package/management-ui/src/pages/CodeGeneration.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { CodeGenerationWizard } from '../components/codegen';
-
-const CodeGeneration = () => {
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="py-8">
-        <CodeGenerationWizard />
-      </div>
-    </div>
-  );
-};
-
-export default CodeGeneration;