@friggframework/devtools 2.0.0--canary.398.7664c46.0 → 2.0.0--canary.400.bed3308.0

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

@@ -0,0 +1,387 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,194 @@
+@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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,14 @@
+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;