create-fluxstack 1.0.13 → 1.0.14

package/app/server/live/SystemMonitorIntegration.ts

@@ -0,0 +1,151 @@
+// 🔥 System Monitor Integration - Auto-capture metrics from Live Components
+
+import { componentRegistry } from '../../../core/server/live/ComponentRegistry'
+
+export class SystemMonitorIntegration {
+  private static instance: SystemMonitorIntegration | null = null
+  private systemMonitorId: string | null = null
+  
+  private constructor() {
+    this.setupHooks()
+  }
+  
+  public static getInstance(): SystemMonitorIntegration {
+    if (!SystemMonitorIntegration.instance) {
+      SystemMonitorIntegration.instance = new SystemMonitorIntegration()
+    }
+    return SystemMonitorIntegration.instance
+  }
+  
+  // Set the system monitor component ID
+  public setSystemMonitorId(componentId: string) {
+    this.systemMonitorId = componentId
+    console.log(`📊 SystemMonitor integration activated: ${componentId}`)
+  }
+  
+  // Get system monitor component
+  private getSystemMonitor() {
+    if (!this.systemMonitorId) return null
+    return componentRegistry.getComponent(this.systemMonitorId)
+  }
+  
+  // Setup hooks to capture Live Component events
+  private setupHooks() {
+    // Override the original mountComponent method
+    const originalMountComponent = componentRegistry.mountComponent.bind(componentRegistry)
+    componentRegistry.mountComponent = async (...args) => {
+      const result = await originalMountComponent(...args)
+      
+      // Record connection event
+      this.recordConnection(args[1], 'connected')
+      
+      return result
+    }
+    
+    // Override the original unmountComponent method
+    const originalUnmountComponent = componentRegistry.unmountComponent.bind(componentRegistry)
+    componentRegistry.unmountComponent = async (componentId) => {
+      const component = componentRegistry.getComponent(componentId)
+      const componentType = component?.constructor.name || 'Unknown'
+      
+      await originalUnmountComponent(componentId)
+      
+      // Record disconnection event
+      this.recordConnection(componentType, 'disconnected')
+    }
+    
+    // Override the original rehydrateComponent method
+    const originalRehydrateComponent = componentRegistry.rehydrateComponent.bind(componentRegistry)
+    componentRegistry.rehydrateComponent = async (...args) => {
+      const result = await originalRehydrateComponent(...args)
+      
+      if (result.success) {
+        // Record rehydration event
+        this.recordConnection(args[1], 'rehydrated')
+      }
+      
+      return result
+    }
+    
+    // Override the original executeAction method
+    const originalExecuteAction = componentRegistry.executeAction.bind(componentRegistry)
+    componentRegistry.executeAction = async (componentId, action, payload) => {
+      const startTime = Date.now()
+      let success = false
+      
+      try {
+        const result = await originalExecuteAction(componentId, action, payload)
+        success = true
+        return result
+      } catch (error) {
+        success = false
+        throw error
+      } finally {
+        const responseTime = Date.now() - startTime
+        
+        // Record message event
+        this.recordMessage(action, componentId, success, responseTime)
+      }
+    }
+    
+    console.log('🔗 SystemMonitor integration hooks setup completed')
+  }
+  
+  // Record a connection event
+  private recordConnection(componentType: string, status: 'connected' | 'disconnected' | 'rehydrated') {
+    const monitor = this.getSystemMonitor()
+    if (!monitor) return
+    
+    try {
+      monitor.executeAction('recordConnection', {
+        componentType,
+        status
+      }).catch(error => {
+        console.warn('⚠️ Failed to record connection event:', error.message)
+      })
+    } catch (error) {
+      console.warn('⚠️ Error recording connection event:', error)
+    }
+  }
+  
+  // Record a message event
+  private recordMessage(type: string, componentId: string, success: boolean, responseTime?: number) {
+    const monitor = this.getSystemMonitor()
+    if (!monitor) return
+    
+    try {
+      monitor.executeAction('recordMessage', {
+        type,
+        componentId,
+        success,
+        responseTime
+      }).catch(error => {
+        console.warn('⚠️ Failed to record message event:', error.message)
+      })
+    } catch (error) {
+      console.warn('⚠️ Error recording message event:', error)
+    }
+  }
+  
+  // Manually trigger metrics collection for all monitors
+  public triggerMetricsCollection() {
+    const monitor = this.getSystemMonitor()
+    if (!monitor) return
+    
+    try {
+      monitor.executeAction('collectMetrics', {}).catch(error => {
+        console.warn('⚠️ Failed to trigger metrics collection:', error.message)
+      })
+    } catch (error) {
+      console.warn('⚠️ Error triggering metrics collection:', error)
+    }
+  }
+  
+  // Get current system stats
+  public getSystemStats() {
+    return componentRegistry.getStats()
+  }
+}
+
+// Export singleton instance
+export const systemMonitorIntegration = SystemMonitorIntegration.getInstance()

package/app/server/live/TesteComponent.ts

@@ -0,0 +1,87 @@
+// 🔥 Teste - Live Component
+import { LiveComponent } from "@/core/types/types";
+
+interface TesteState {
+  message: string;
+  count: number;
+  lastUpdated: Date;
+}
+
+export class TesteComponent extends LiveComponent<TesteState> {
+  constructor(initialState: TesteState, ws: any, options?: { room?: string; userId?: string }) {
+    super({
+      message: "Hello from Teste!",
+      count: 0,
+      lastUpdated: new Date(),
+      ...initialState
+    }, ws, options);
+    // Default room: testeroom
+      this.room = 'testeroom';
+    
+    console.log(`🔥 ${this.constructor.name} component created: ${this.id}`);
+  }
+
+  async updateMessage(payload: { message: string }) {
+    const { message } = payload;
+    
+    if (!message || message.trim().length === 0) {
+      throw new Error('Message cannot be empty');
+    }
+    
+    this.setState({
+      message: message.trim(),
+      lastUpdated: new Date()
+    });
+    
+    // Broadcast to room if in multi-user mode
+    if (this.room) {
+      this.broadcast('MESSAGE_UPDATED', {
+        message: message.trim(),
+        userId: this.userId
+      });
+    }
+    
+    console.log(`📝 Message updated: "${message}"`);
+    return { success: true, message: message.trim() };
+  }
+
+  async incrementCounter() {
+    const newCount = this.state.count + 1;
+    
+    this.setState({
+      count: newCount,
+      lastUpdated: new Date()
+    });
+    
+    if (this.room) {
+      this.broadcast('COUNTER_INCREMENTED', {
+        count: newCount,
+        userId: this.userId
+      });
+    }
+    
+    return { success: true, count: newCount };
+  }
+
+  async resetData() {
+    this.setState({
+      message: "Hello from Teste!",
+      count: 0,
+      lastUpdated: new Date()
+    });
+    
+    return { success: true };
+  }
+
+  async getData() {
+    return {
+      success: true,
+      data: {
+        ...this.state,
+        componentId: this.id,
+        room: this.room,
+        userId: this.userId
+      }
+    };
+  }
+}

package/app/server/live/UserProfileComponent.ts

@@ -0,0 +1,135 @@
+import { LiveComponent } from "@/core/types/types";
+
+interface UserProfileState {
+  name: string;
+  email: string;
+  avatar: string;
+  status: 'online' | 'away' | 'busy' | 'offline';
+  bio: string;
+  location: string;
+  joinedDate: string;
+  followers: number;
+  following: number;
+  posts: number;
+  isEditing: boolean;
+  lastActivity: string;
+  theme: 'light' | 'dark';
+  notifications: number;
+}
+
+export class UserProfileComponent extends LiveComponent<UserProfileState> {
+  constructor(initialState: UserProfileState, ws: any, options?: { room?: string; userId?: string }) {
+    const defaultState: UserProfileState = {
+      name: "João Silva",
+      email: "joao.silva@example.com", 
+      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
+      status: "online",
+      bio: "Desenvolvedor Full-Stack apaixonado por tecnologia e inovação. Sempre em busca de novos desafios!",
+      location: "São Paulo, Brasil",
+      joinedDate: "Janeiro 2023",
+      followers: 1234,
+      following: 567,
+      posts: 89,
+      isEditing: false,
+      lastActivity: new Date().toISOString(),
+      theme: "light",
+      notifications: 5,
+      ...initialState
+    };
+
+    super(defaultState, ws, options);
+    console.log('👤 UserProfile component created:', this.id, { initialState: defaultState });
+  }
+
+  async updateProfile(payload: { name?: string; bio?: string; location?: string }) {
+    const updates: Partial<UserProfileState> = {
+      lastActivity: new Date().toISOString()
+    };
+
+    if (payload.name) updates.name = payload.name;
+    if (payload.bio) updates.bio = payload.bio;
+    if (payload.location) updates.location = payload.location;
+
+    this.setState(updates);
+    console.log('👤 Profile updated:', this.id, updates);
+    return { success: true, updated: Object.keys(updates) };
+  }
+
+  async toggleStatus() {
+    const statuses: UserProfileState['status'][] = ['online', 'away', 'busy', 'offline'];
+    const currentIndex = statuses.indexOf(this.state.status);
+    const nextStatus = statuses[(currentIndex + 1) % statuses.length];
+    
+    this.setState({ 
+      status: nextStatus,
+      lastActivity: new Date().toISOString()
+    });
+    
+    console.log('👤 Status changed:', this.id, { from: this.state.status, to: nextStatus });
+    return { success: true, newStatus: nextStatus };
+  }
+
+  async toggleTheme() {
+    const newTheme = this.state.theme === 'light' ? 'dark' : 'light';
+    this.setState({ 
+      theme: newTheme,
+      lastActivity: new Date().toISOString()
+    });
+    
+    console.log('👤 Theme changed:', this.id, { to: newTheme });
+    return { success: true, theme: newTheme };
+  }
+
+  async followUser() {
+    this.setState({ 
+      followers: this.state.followers + 1,
+      lastActivity: new Date().toISOString()
+    });
+    
+    console.log('👤 New follower:', this.id, { followers: this.state.followers + 1 });
+    return { success: true, followers: this.state.followers };
+  }
+
+  async toggleEdit() {
+    this.setState({ 
+      isEditing: !this.state.isEditing,
+      lastActivity: new Date().toISOString()
+    });
+    
+    console.log('👤 Edit mode toggled:', this.id, { isEditing: !this.state.isEditing });
+    return { success: true, isEditing: this.state.isEditing };
+  }
+
+  async clearNotifications() {
+    this.setState({ 
+      notifications: 0,
+      lastActivity: new Date().toISOString()
+    });
+    
+    console.log('👤 Notifications cleared:', this.id);
+    return { success: true };
+  }
+
+  async updateAvatar(payload: { imageUrl: string }) {
+    if (!payload.imageUrl) {
+      throw new Error('Invalid image URL');
+    }
+
+    // Update avatar URL - in a real app, you might want to validate the URL format
+    this.setState({ 
+      avatar: payload.imageUrl,
+      lastActivity: new Date().toISOString()
+    });
+    
+    console.log('👤 Avatar updated:', this.id, { 
+      newAvatar: payload.imageUrl,
+      previousAvatar: this.state.avatar 
+    });
+    
+    return { 
+      success: true, 
+      avatar: payload.imageUrl,
+      message: 'Avatar updated successfully!' 
+    };
+  }
+}

package/app/server/live/register-components.ts

@@ -0,0 +1,28 @@
+// 🔥 Register all live components
+// NOTE: Components are now auto-discovered from this directory!
+// Manual registration is optional for custom initial states
+
+import { CounterComponent } from "./CounterComponent"
+
+// Manual registration is now optional - components are auto-discovered
+// Uncomment below for custom initial states:
+
+/* 
+import { componentRegistry } from "@/core/server/live/ComponentRegistry"
+
+componentRegistry.registerComponent({
+  name: 'CounterComponent',
+  component: CounterComponent,
+  initialState: {
+    count: 0,
+    title: 'Live Counter',
+    step: 1,
+    history: [0],
+    lastUpdated: new Date()
+  }
+})
+*/
+
+console.log('📝 Live components registered successfully!')
+
+export { CounterComponent }

package/app/server/middleware/auth.ts

@@ -0,0 +1,136 @@
+/**
+ * Authentication Middleware
+ * Handles user authentication and authorization
+ */
+
+import type { Context } from 'elysia'
+
+export interface AuthUser {
+  id: number
+  email: string
+  name: string
+  role: 'admin' | 'user'
+}
+
+export interface AuthContext extends Context {
+  user?: AuthUser
+}
+
+/**
+ * Authentication middleware
+ * Validates JWT tokens and sets user context
+ */
+export const authMiddleware = {
+  name: 'auth',
+  
+  beforeHandle: async (context: AuthContext) => {
+    const authHeader = context.headers.authorization
+    
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return new Response(
+        JSON.stringify({ error: 'Missing or invalid authorization header' }),
+        { status: 401, headers: { 'Content-Type': 'application/json' } }
+      )
+    }
+
+    const token = authHeader.substring(7) // Remove 'Bearer ' prefix
+    
+    try {
+      // In a real application, you would validate the JWT token here
+      // For demo purposes, we'll simulate token validation
+      const user = await validateToken(token)
+      
+      if (!user) {
+        return new Response(
+          JSON.stringify({ error: 'Invalid or expired token' }),
+          { status: 401, headers: { 'Content-Type': 'application/json' } }
+        )
+      }
+
+      // Set user in context
+      context.user = user
+    } catch (error) {
+      return new Response(
+        JSON.stringify({ error: 'Token validation failed' }),
+        { status: 401, headers: { 'Content-Type': 'application/json' } }
+      )
+    }
+  }
+}
+
+/**
+ * Optional authentication middleware
+ * Sets user context if token is present, but doesn't require it
+ */
+export const optionalAuthMiddleware = {
+  name: 'optional-auth',
+  
+  beforeHandle: async (context: AuthContext) => {
+    const authHeader = context.headers.authorization
+    
+    if (authHeader && authHeader.startsWith('Bearer ')) {
+      const token = authHeader.substring(7)
+      
+      try {
+        const user = await validateToken(token)
+        if (user) {
+          context.user = user
+        }
+      } catch (error) {
+        // Ignore errors for optional auth
+      }
+    }
+  }
+}
+
+/**
+ * Role-based authorization middleware
+ */
+export const requireRole = (requiredRole: 'admin' | 'user') => ({
+  name: `require-${requiredRole}`,
+  
+  beforeHandle: async (context: AuthContext) => {
+    if (!context.user) {
+      return new Response(
+        JSON.stringify({ error: 'Authentication required' }),
+        { status: 401, headers: { 'Content-Type': 'application/json' } }
+      )
+    }
+
+    if (requiredRole === 'admin' && context.user.role !== 'admin') {
+      return new Response(
+        JSON.stringify({ error: 'Admin access required' }),
+        { status: 403, headers: { 'Content-Type': 'application/json' } }
+      )
+    }
+  }
+})
+
+/**
+ * Validate JWT token (mock implementation)
+ * In a real application, this would use a proper JWT library
+ */
+async function validateToken(token: string): Promise<AuthUser | null> {
+  // Mock token validation
+  // In reality, you would decode and verify the JWT
+  
+  if (token === 'valid-admin-token') {
+    return {
+      id: 1,
+      email: 'admin@example.com',
+      name: 'Admin User',
+      role: 'admin'
+    }
+  }
+  
+  if (token === 'valid-user-token') {
+    return {
+      id: 2,
+      email: 'user@example.com',
+      name: 'Regular User',
+      role: 'user'
+    }
+  }
+  
+  return null
+}