@loxia-labs/loxia-autopilot-one 1.0.1

package/src/interfaces/webServer.js

@@ -0,0 +1,2162 @@
+/**
+ * Web Server - HTTP and WebSocket server for web interface
+ * 
+ * Purpose:
+ * - Serve React frontend application
+ * - Handle HTTP API requests
+ * - Manage WebSocket connections for real-time updates
+ * - File upload and project management
+ */
+
+import express from 'express';
+import { createServer } from 'http';
+import { WebSocketServer } from 'ws';
+import path from 'path';
+import { promises as fs } from 'fs';
+import { fileURLToPath } from 'url';
+
+import {
+  INTERFACE_TYPES,
+  ORCHESTRATOR_ACTIONS,
+  HTTP_STATUS,
+  AGENT_MODES
+} from '../utilities/constants.js';
+
+// Import file explorer module
+import { initFileExplorerModule } from '../modules/fileExplorer/index.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+class WebServer {
+  constructor(orchestrator, logger, config = {}) {
+    this.orchestrator = orchestrator;
+    this.logger = logger;
+    this.config = config;
+    
+    this.port = config.port || 3000;
+    this.host = config.host || 'localhost';
+    
+    // Express app
+    this.app = express();
+    this.server = createServer(this.app);
+    
+    // WebSocket server with CORS support
+    this.wss = new WebSocketServer({ 
+      server: this.server,
+      // Allow all origins for WebSocket connections
+      verifyClient: (info) => {
+        // Log connection attempt for debugging
+        this.logger?.info('WebSocket connection attempt', {
+          origin: info.origin,
+          host: info.req.headers.host,
+          userAgent: info.req.headers['user-agent'],
+          url: info.req.url
+        });
+        
+        // Allow all origins (you can restrict this later if needed)
+        return true;
+      }
+    });
+    
+    // Active WebSocket connections
+    this.connections = new Map();
+    
+    // Session management
+    this.sessions = new Map();
+    
+    // API Key Manager reference (will be set by LoxiaSystem)
+    this.apiKeyManager = null;
+    
+    this.isRunning = false;
+  }
+
+  /**
+   * Initialize web server
+   * @returns {Promise<void>}
+   */
+  async initialize() {
+    try {
+      this.setupMiddleware();
+      this.setupRoutes();
+      this.setupWebSocket();
+      
+      await this.startServer();
+      
+      this.logger.info('Web server initialized', {
+        port: this.port,
+        host: this.host,
+        url: `http://${this.host}:${this.port}`
+      });
+      
+    } catch (error) {
+      this.logger.error('Web server initialization failed', {
+        error: error.message,
+        stack: error.stack
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * Setup Express middleware
+   * @private
+   */
+  setupMiddleware() {
+    // CORS middleware
+    this.app.use((req, res, next) => {
+      res.header('Access-Control-Allow-Origin', '*');
+      res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
+      
+      if (req.method === 'OPTIONS') {
+        res.sendStatus(HTTP_STATUS.OK);
+      } else {
+        next();
+      }
+    });
+    
+    // JSON parsing
+    this.app.use(express.json({ limit: '10mb' }));
+    this.app.use(express.urlencoded({ extended: true, limit: '10mb' }));
+    
+    // Initialize file explorer module
+    this.fileExplorerModule = initFileExplorerModule({
+      showHidden: false,
+      restrictedPaths: [] // Can be configured as needed
+    });
+
+    // Mount file explorer routes
+    this.app.use('/api/file-explorer', this.fileExplorerModule.router);
+    
+    // Static files (React build)
+    const staticPath = path.join(__dirname, '../../web-ui/build');
+    this.app.use(express.static(staticPath));
+    
+    // Request logging
+    this.app.use((req, res, next) => {
+      this.logger.debug(`${req.method} ${req.path}`, {
+        ip: req.ip,
+        userAgent: req.get('User-Agent')
+      });
+      next();
+    });
+  }
+
+  /**
+   * Setup API routes
+   * @private
+   */
+  setupRoutes() {
+    // Health check
+    this.app.get('/api/health', async (req, res) => {
+      try {
+        const packageJsonPath = path.join(__dirname, '../../package.json');
+        const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'));
+
+        res.json({
+          status: 'healthy',
+          version: packageJson.version || '1.0.0',
+          timestamp: new Date().toISOString()
+        });
+      } catch (error) {
+        res.json({
+          status: 'healthy',
+          version: '1.0.0',
+          timestamp: new Date().toISOString()
+        });
+      }
+    });
+    
+    // Session creation
+    this.app.post('/api/sessions', async (req, res) => {
+      try {
+        const sessionId = `web-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const projectDir = req.body.projectDir || process.cwd();
+        
+        const session = {
+          id: sessionId,
+          projectDir,
+          createdAt: new Date().toISOString(),
+          lastActivity: new Date().toISOString()
+        };
+        
+        this.sessions.set(sessionId, session);
+        
+        res.json({
+          success: true,
+          session
+        });
+        
+      } catch (error) {
+        res.status(HTTP_STATUS.INTERNAL_SERVER_ERROR).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+    
+    // Orchestrator API proxy
+    this.app.post('/api/orchestrator', async (req, res) => {
+      try {
+        const request = {
+          interface: INTERFACE_TYPES.WEB,
+          sessionId: req.body.sessionId,
+          action: req.body.action,
+          payload: req.body.payload,
+          projectDir: req.body.projectDir || process.cwd()
+        };
+        
+        const response = await this.orchestrator.processRequest(request);
+        
+        // Broadcast updates via WebSocket
+        this.broadcastToSession(request.sessionId, {
+          type: 'orchestrator_response',
+          action: request.action,
+          response
+        });
+        
+        res.json(response);
+        
+      } catch (error) {
+        this.logger.error('Orchestrator API error', {
+          error: error.message,
+          body: req.body
+        });
+        
+        res.status(HTTP_STATUS.INTERNAL_SERVER_ERROR).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+    
+    // File operations
+    this.app.get('/api/files', async (req, res) => {
+      try {
+        const { path: filePath, projectDir } = req.query;
+        const fullPath = path.resolve(projectDir || process.cwd(), filePath || '.');
+        
+        const stats = await fs.stat(fullPath);
+        
+        if (stats.isDirectory()) {
+          const entries = await fs.readdir(fullPath, { withFileTypes: true });
+          const files = entries.map(entry => ({
+            name: entry.name,
+            type: entry.isDirectory() ? 'directory' : 'file',
+            path: path.join(filePath || '.', entry.name)
+          }));
+          
+          res.json({ success: true, files });
+        } else {
+          const content = await fs.readFile(fullPath, 'utf8');
+          res.json({ success: true, content, type: 'file' });
+        }
+        
+      } catch (error) {
+        res.status(HTTP_STATUS.NOT_FOUND).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+    
+    // File upload
+    this.app.post('/api/files/upload', async (req, res) => {
+      try {
+        const { fileName, content, projectDir } = req.body;
+        const targetDir = projectDir || process.cwd();
+        const fullPath = path.resolve(targetDir, fileName);
+
+        // Ensure the directory exists
+        await fs.mkdir(targetDir, { recursive: true });
+
+        // Write the file
+        await fs.writeFile(fullPath, content, 'utf8');
+
+        res.json({
+          success: true,
+          message: 'File uploaded successfully',
+          path: fullPath
+        });
+
+      } catch (error) {
+        res.status(HTTP_STATUS.INTERNAL_SERVER_ERROR).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+    
+    // Enhanced folder explorer endpoint
+    this.app.get('/api/explorer', async (req, res) => {
+      try {
+        const { path: requestedPath, showHidden = false } = req.query;
+        const basePath = requestedPath || process.cwd();
+        const fullPath = path.resolve(basePath);
+        
+        // Security: Basic path traversal protection
+        const normalizedPath = path.normalize(fullPath);
+        
+        const stats = await fs.stat(normalizedPath);
+        
+        if (!stats.isDirectory()) {
+          return res.status(HTTP_STATUS.BAD_REQUEST).json({
+            success: false,
+            error: 'Path is not a directory'
+          });
+        }
+        
+        const entries = await fs.readdir(normalizedPath, { withFileTypes: true });
+        
+        // Process entries
+        const items = await Promise.all(
+          entries
+            .filter(entry => showHidden === 'true' || !entry.name.startsWith('.'))
+            .map(async (entry) => {
+              const itemPath = path.join(normalizedPath, entry.name);
+              const itemStats = await fs.stat(itemPath).catch(() => null);
+              
+              return {
+                name: entry.name,
+                type: entry.isDirectory() ? 'directory' : 'file',
+                path: itemPath,
+                relativePath: path.relative(process.cwd(), itemPath),
+                size: itemStats?.size || 0,
+                modified: itemStats?.mtime || null,
+                isHidden: entry.name.startsWith('.'),
+                permissions: {
+                  readable: true, // Could check with fs.access
+                  writable: true  // Could check with fs.access
+                }
+              };
+            })
+        );
+        
+        // Sort: directories first, then files, both alphabetically
+        items.sort((a, b) => {
+          if (a.type !== b.type) {
+            return a.type === 'directory' ? -1 : 1;
+          }
+          return a.name.localeCompare(b.name);
+        });
+        
+        // Get parent directory info
+        const parentPath = path.dirname(normalizedPath);
+        const hasParent = parentPath !== normalizedPath;
+        
+        res.json({
+          success: true,
+          currentPath: normalizedPath,
+          currentRelativePath: path.relative(process.cwd(), normalizedPath),
+          parentPath: hasParent ? parentPath : null,
+          items,
+          totalItems: items.length,
+          directories: items.filter(item => item.type === 'directory').length,
+          files: items.filter(item => item.type === 'file').length
+        });
+        
+      } catch (error) {
+        res.status(HTTP_STATUS.INTERNAL_SERVER_ERROR).json({
+          success: false,
+          error: error.message,
+          code: error.code
+        });
+      }
+    });
+    
+    // Create directory endpoint
+    this.app.post('/api/explorer/mkdir', async (req, res) => {
+      try {
+        const { path: dirPath, name } = req.body;
+        const fullPath = path.resolve(dirPath, name);
+        
+        await fs.mkdir(fullPath, { recursive: false });
+        
+        res.json({
+          success: true,
+          path: fullPath,
+          relativePath: path.relative(process.cwd(), fullPath)
+        });
+        
+      } catch (error) {
+        res.status(HTTP_STATUS.INTERNAL_SERVER_ERROR).json({
+          success: false,
+          error: error.message,
+          code: error.code
+        });
+      }
+    });
+    
+    // Get directory info endpoint
+    this.app.get('/api/explorer/info', async (req, res) => {
+      try {
+        const { path: requestedPath } = req.query;
+        const fullPath = path.resolve(requestedPath);
+        
+        const stats = await fs.stat(fullPath);
+        
+        res.json({
+          success: true,
+          path: fullPath,
+          relativePath: path.relative(process.cwd(), fullPath),
+          isDirectory: stats.isDirectory(),
+          isFile: stats.isFile(),
+          size: stats.size,
+          created: stats.birthtime,
+          modified: stats.mtime,
+          accessed: stats.atime
+        });
+        
+      } catch (error) {
+        res.status(HTTP_STATUS.INTERNAL_SERVER_ERROR).json({
+          success: false,
+          error: error.message,
+          code: error.code
+        });
+      }
+    });
+    
+    // LLM Chat endpoint - proxy to Loxia Azure backend
+    this.app.post('/api/llm/chat', async (req, res) => {
+      try {
+        const { sessionId, model, platformProvided } = req.body;
+        
+        if (!sessionId) {
+          return res.status(400).json({
+            error: 'Session ID is required'
+          });
+        }
+        
+        // Get API keys from session-based storage
+        let apiKey = null;
+        let vendorApiKey = null;
+        
+        if (this.apiKeyManager) {
+          const keys = this.apiKeyManager.getKeysForRequest(sessionId, {
+            platformProvided: platformProvided || false,
+            vendor: this._getVendorFromModel(model)
+          });
+          
+          apiKey = keys.loxiaApiKey;
+          vendorApiKey = keys.vendorApiKey;
+        }
+        
+        // Fallback to config/environment if no session keys
+        if (!apiKey) {
+          apiKey = this.config.loxiaApiKey || process.env.LOXIA_API_KEY;
+        }
+        
+        // Also try API key from request body for backward compatibility
+        if (!apiKey && req.body.apiKey) {
+          apiKey = req.body.apiKey;
+        }
+        
+        if (!apiKey) {
+          this.logger.warn('No API key available for chat request', {
+            sessionId,
+            model,
+            platformProvided,
+            hasSessionManager: !!this.apiKeyManager
+          });
+          
+          return res.status(401).json({
+            error: 'No API key configured. Please configure your Loxia API key in Settings.'
+          });
+        }
+        
+        // Make request to Loxia Azure backend
+        const azureBackendUrl = 'https://autopilot-api.azurewebsites.net/llm/chat';
+        
+        // Prepare request payload with API keys
+        const requestPayload = {
+          ...req.body,
+          apiKey, // Loxia platform API key
+          ...(vendorApiKey && { vendorApiKey }) // Include vendor key if available
+        };
+        
+        const fetchOptions = {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`
+          },
+          body: JSON.stringify(requestPayload)
+        };
+        
+        this.logger.info('Proxying chat request to Loxia Azure backend', { 
+          url: azureBackendUrl,
+          model: req.body.model,
+          hasApiKey: !!apiKey
+        });
+        
+        const response = await fetch(azureBackendUrl, fetchOptions);
+        
+        if (response.ok) {
+          const data = await response.json();
+          this.logger.info('Successfully received response from Azure backend', { 
+            model: data.model,
+            contentLength: data.content?.length || 0
+          });
+          
+          res.json(data);
+        } else {
+          const errorText = await response.text();
+          this.logger.warn('Azure backend chat request failed', {
+            status: response.status,
+            statusText: response.statusText,
+            error: errorText
+          });
+          
+          res.status(response.status).json({
+            error: `Azure backend error: ${response.status} ${response.statusText}`,
+            details: errorText
+          });
+        }
+        
+      } catch (error) {
+        this.logger.error('Failed to proxy chat request to Azure backend', { 
+          error: error.message,
+          stack: error.stack 
+        });
+        
+        res.status(500).json({
+          error: 'Failed to connect to AI service',
+          details: error.message
+        });
+      }
+    });
+
+    // LLM Models endpoint - proxy to Loxia Azure backend
+    this.app.get('/api/llm/models', async (req, res) => {
+      try {
+        // Get API key from authorization header if provided
+        const authHeader = req.headers.authorization;
+        let apiKey = null;
+        
+        if (authHeader && authHeader.startsWith('Bearer ')) {
+          apiKey = authHeader.substring(7);
+        }
+        
+        // If no API key, try to get from config or environment
+        if (!apiKey) {
+          apiKey = this.config.loxiaApiKey || process.env.LOXIA_API_KEY;
+        }
+        
+        // Make request to Loxia Azure backend
+        const azureBackendUrl = 'https://autopilot-api.azurewebsites.net/llm/models';
+        
+        const fetchOptions = {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            ...(apiKey && { 'Authorization': `Bearer ${apiKey}` })
+          }
+        };
+        
+        this.logger.info('Fetching models from Loxia Azure backend', { 
+          url: azureBackendUrl,
+          hasApiKey: !!apiKey 
+        });
+        
+        const response = await fetch(azureBackendUrl, fetchOptions);
+        
+        if (response.ok) {
+          const data = await response.json();
+          this.logger.info('Successfully fetched models from Azure backend', { 
+            modelCount: data.models?.length || 0 
+          });
+          
+          res.json(data);
+        } else {
+          // If authentication failed or other error, return fallback models
+          const errorText = await response.text();
+          this.logger.warn('Azure backend request failed, using fallback models', {
+            status: response.status,
+            statusText: response.statusText,
+            error: errorText
+          });
+          
+          res.json({
+            models: this.getDefaultModels(),
+            total: this.getDefaultModels().length,
+            fallback: true,
+            reason: `Azure backend error: ${response.status} ${response.statusText}`
+          });
+        }
+        
+      } catch (error) {
+        this.logger.error('Failed to fetch models from Azure backend', { 
+          error: error.message,
+          stack: error.stack 
+        });
+        
+        // Return fallback models on network or other errors
+        res.json({
+          models: this.getDefaultModels(),
+          total: this.getDefaultModels().length,
+          fallback: true,
+          error: error.message
+        });
+      }
+    });
+    
+    // Tools information endpoint - get available tools from registry
+    this.app.get('/api/tools', async (req, res) => {
+      try {
+        // Get tools registry (passed from LoxiaSystem)
+        const toolsRegistry = this.toolsRegistry;
+        
+        if (!toolsRegistry) {
+          return res.status(500).json({
+            error: 'Tools registry not available'
+          });
+        }
+        
+        // Get available tools for UI
+        const tools = toolsRegistry.getAvailableToolsForUI();
+        
+        this.logger.info('Serving tools information', { 
+          toolCount: tools.length,
+          tools: tools.map(t => ({ id: t.id, name: t.name, category: t.category }))
+        });
+        
+        res.json({
+          success: true,
+          tools,
+          total: tools.length
+        });
+        
+      } catch (error) {
+        this.logger.error('Failed to get tools information', { 
+          error: error.message,
+          stack: error.stack 
+        });
+        
+        res.status(500).json({
+          error: 'Failed to retrieve tools information',
+          message: error.message
+        });
+      }
+    });
+    
+    // API Key Management Endpoints
+    
+    // Set API keys for current session
+    this.app.post('/api/keys', async (req, res) => {
+      try {
+        const { sessionId, loxiaApiKey, vendorKeys } = req.body;
+        
+        if (!sessionId) {
+          return res.status(400).json({
+            success: false,
+            error: 'Session ID is required'
+          });
+        }
+        
+        if (!this.apiKeyManager) {
+          return res.status(500).json({
+            success: false,
+            error: 'API key manager not available'
+          });
+        }
+        
+        // Set API keys for the session
+        this.apiKeyManager.setSessionKeys(sessionId, {
+          loxiaApiKey,
+          vendorKeys: vendorKeys || {}
+        });
+        
+        this.logger.info('API keys updated for session', {
+          sessionId,
+          hasLoxiaKey: !!loxiaApiKey,
+          vendorKeys: Object.keys(vendorKeys || {})
+        });
+        
+        // Refresh models with the new API key context
+        if (this.orchestrator && this.orchestrator.modelsService && loxiaApiKey) {
+          try {
+            await this.orchestrator.modelsService.refresh({ sessionId, apiKey: loxiaApiKey });
+            this.logger.info('Models refreshed with new API key', { sessionId });
+          } catch (error) {
+            this.logger.warn('Failed to refresh models after API key update', {
+              error: error.message,
+              sessionId
+            });
+          }
+        }
+        
+        res.json({
+          success: true,
+          message: 'API keys updated successfully',
+          sessionId,
+          hasLoxiaKey: !!loxiaApiKey,
+          vendorKeys: Object.keys(vendorKeys || {})
+        });
+        
+      } catch (error) {
+        this.logger.error('Failed to set API keys', {
+          error: error.message,
+          sessionId: req.body.sessionId
+        });
+        
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+    
+    // Get API keys for current session (returns only presence, not values)
+    this.app.get('/api/keys/:sessionId', async (req, res) => {
+      try {
+        const { sessionId } = req.params;
+        
+        if (!this.apiKeyManager) {
+          return res.status(500).json({
+            success: false,
+            error: 'API key manager not available'
+          });
+        }
+        
+        const keys = this.apiKeyManager.getSessionKeys(sessionId);
+        
+        // Return key presence only, not actual values
+        res.json({
+          success: true,
+          sessionId,
+          hasLoxiaKey: !!keys.loxiaApiKey,
+          vendorKeys: Object.keys(keys.vendorKeys || {}),
+          updatedAt: keys.updatedAt
+        });
+        
+      } catch (error) {
+        this.logger.error('Failed to get API key status', {
+          error: error.message,
+          sessionId: req.params.sessionId
+        });
+        
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+    
+    // Remove API keys for current session
+    this.app.delete('/api/keys/:sessionId', async (req, res) => {
+      try {
+        const { sessionId } = req.params;
+        
+        if (!this.apiKeyManager) {
+          return res.status(500).json({
+            success: false,
+            error: 'API key manager not available'
+          });
+        }
+        
+        const removed = this.apiKeyManager.removeSessionKeys(sessionId);
+        
+        res.json({
+          success: true,
+          removed,
+          message: removed ? 'API keys removed successfully' : 'No API keys found for session'
+        });
+        
+      } catch (error) {
+        this.logger.error('Failed to remove API keys', {
+          error: error.message,
+          sessionId: req.params.sessionId
+        });
+        
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+    
+    // Get active sessions with API keys (admin endpoint)
+    this.app.get('/api/keys', async (req, res) => {
+      try {
+        if (!this.apiKeyManager) {
+          return res.status(500).json({
+            success: false,
+            error: 'API key manager not available'
+          });
+        }
+        
+        const activeSessions = this.apiKeyManager.getActiveSessions();
+        
+        res.json({
+          success: true,
+          sessions: activeSessions,
+          total: activeSessions.length
+        });
+        
+      } catch (error) {
+        this.logger.error('Failed to get active sessions', {
+          error: error.message
+        });
+        
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // File Attachments Management Endpoints
+
+    // Upload file attachment for agent
+    this.app.post('/api/agents/:agentId/attachments/upload', async (req, res) => {
+      try {
+        const { agentId } = req.params;
+        const { filePath, mode, fileName } = req.body;
+
+        if (!this.orchestrator?.fileAttachmentService) {
+          return res.status(500).json({
+            success: false,
+            error: 'File attachment service not available'
+          });
+        }
+
+        const result = await this.orchestrator.fileAttachmentService.uploadFile({
+          agentId,
+          filePath,
+          mode: mode || 'content',
+          fileName
+        });
+
+        this.logger.info('File attachment uploaded', {
+          agentId,
+          fileId: result.fileId,
+          fileName: result.fileName
+        });
+
+        res.json({
+          success: true,
+          attachment: result
+        });
+
+      } catch (error) {
+        this.logger.error('Failed to upload file attachment', {
+          agentId: req.params.agentId,
+          error: error.message
+        });
+
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Get all attachments for an agent
+    this.app.get('/api/agents/:agentId/attachments', async (req, res) => {
+      try {
+        const { agentId } = req.params;
+        const { mode, active } = req.query;
+
+        if (!this.orchestrator?.fileAttachmentService) {
+          return res.status(500).json({
+            success: false,
+            error: 'File attachment service not available'
+          });
+        }
+
+        const filters = {};
+        if (mode) filters.mode = mode;
+        if (active !== undefined) filters.active = active === 'true';
+
+        const attachments = await this.orchestrator.fileAttachmentService.getAttachments(agentId, filters);
+
+        res.json({
+          success: true,
+          attachments,
+          total: attachments.length
+        });
+
+      } catch (error) {
+        this.logger.error('Failed to get attachments', {
+          agentId: req.params.agentId,
+          error: error.message
+        });
+
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Get single attachment by ID
+    this.app.get('/api/attachments/:fileId', async (req, res) => {
+      try {
+        const { fileId } = req.params;
+
+        if (!this.orchestrator?.fileAttachmentService) {
+          return res.status(500).json({
+            success: false,
+            error: 'File attachment service not available'
+          });
+        }
+
+        const attachment = await this.orchestrator.fileAttachmentService.getAttachment(fileId);
+
+        if (!attachment) {
+          return res.status(404).json({
+            success: false,
+            error: 'Attachment not found'
+          });
+        }
+
+        res.json({
+          success: true,
+          attachment
+        });
+
+      } catch (error) {
+        this.logger.error('Failed to get attachment', {
+          fileId: req.params.fileId,
+          error: error.message
+        });
+
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Toggle attachment active status
+    this.app.patch('/api/attachments/:fileId/toggle', async (req, res) => {
+      try {
+        const { fileId } = req.params;
+
+        if (!this.orchestrator?.fileAttachmentService) {
+          return res.status(500).json({
+            success: false,
+            error: 'File attachment service not available'
+          });
+        }
+
+        const result = await this.orchestrator.fileAttachmentService.toggleActive(fileId);
+
+        this.logger.info('Attachment active status toggled', {
+          fileId,
+          active: result.active
+        });
+
+        res.json({
+          success: true,
+          attachment: result
+        });
+
+      } catch (error) {
+        this.logger.error('Failed to toggle attachment', {
+          fileId: req.params.fileId,
+          error: error.message
+        });
+
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Update attachment metadata
+    this.app.patch('/api/attachments/:fileId', async (req, res) => {
+      try {
+        const { fileId } = req.params;
+        const { mode, active } = req.body;
+
+        if (!this.orchestrator?.fileAttachmentService) {
+          return res.status(500).json({
+            success: false,
+            error: 'File attachment service not available'
+          });
+        }
+
+        const updates = {};
+        if (mode !== undefined) updates.mode = mode;
+        if (active !== undefined) updates.active = active;
+
+        const result = await this.orchestrator.fileAttachmentService.updateAttachment(fileId, updates);
+
+        this.logger.info('Attachment updated', {
+          fileId,
+          updates
+        });
+
+        res.json({
+          success: true,
+          attachment: result
+        });
+
+      } catch (error) {
+        this.logger.error('Failed to update attachment', {
+          fileId: req.params.fileId,
+          error: error.message
+        });
+
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Delete attachment
+    this.app.delete('/api/attachments/:fileId', async (req, res) => {
+      try {
+        const { fileId } = req.params;
+        const { agentId } = req.query;
+
+        if (!agentId) {
+          return res.status(400).json({
+            success: false,
+            error: 'agentId query parameter is required'
+          });
+        }
+
+        if (!this.orchestrator?.fileAttachmentService) {
+          return res.status(500).json({
+            success: false,
+            error: 'File attachment service not available'
+          });
+        }
+
+        const result = await this.orchestrator.fileAttachmentService.deleteAttachment(fileId, agentId);
+
+        this.logger.info('Attachment deleted', {
+          fileId,
+          agentId,
+          physicallyDeleted: result.physicallyDeleted
+        });
+
+        res.json({
+          success: true,
+          message: result.physicallyDeleted ? 'Attachment deleted' : 'Reference removed',
+          physicallyDeleted: result.physicallyDeleted
+        });
+
+      } catch (error) {
+        this.logger.error('Failed to delete attachment', {
+          fileId: req.params.fileId,
+          error: error.message
+        });
+
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Import attachment from another agent
+    this.app.post('/api/attachments/:fileId/import', async (req, res) => {
+      try {
+        const { fileId } = req.params;
+        const { targetAgentId } = req.body;
+
+        if (!targetAgentId) {
+          return res.status(400).json({
+            success: false,
+            error: 'targetAgentId is required'
+          });
+        }
+
+        if (!this.orchestrator?.fileAttachmentService) {
+          return res.status(500).json({
+            success: false,
+            error: 'File attachment service not available'
+          });
+        }
+
+        const result = await this.orchestrator.fileAttachmentService.importFromAgent(fileId, targetAgentId);
+
+        this.logger.info('Attachment imported', {
+          fileId,
+          targetAgentId
+        });
+
+        res.json({
+          success: true,
+          attachment: result
+        });
+
+      } catch (error) {
+        this.logger.error('Failed to import attachment', {
+          fileId: req.params.fileId,
+          error: error.message
+        });
+
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Get attachment preview
+    this.app.get('/api/attachments/:fileId/preview', async (req, res) => {
+      try {
+        const { fileId } = req.params;
+
+        if (!this.orchestrator?.fileAttachmentService) {
+          return res.status(500).json({
+            success: false,
+            error: 'File attachment service not available'
+          });
+        }
+
+        const preview = await this.orchestrator.fileAttachmentService.getAttachmentPreview(fileId);
+
+        if (!preview) {
+          return res.status(404).json({
+            success: false,
+            error: 'Attachment not found'
+          });
+        }
+
+        res.json({
+          success: true,
+          preview
+        });
+
+      } catch (error) {
+        this.logger.error('Failed to get attachment preview', {
+          fileId: req.params.fileId,
+          error: error.message
+        });
+
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Image serving endpoint for generated images
+    this.app.get('/api/images/:sessionId/:filename', async (req, res) => {
+      try {
+        const { sessionId, filename } = req.params;
+
+        // Security validation: Check if sessionId exists
+        const session = this.sessions.get(sessionId);
+        if (!session) {
+          return res.status(HTTP_STATUS.FORBIDDEN).json({
+            success: false,
+            error: 'Invalid session'
+          });
+        }
+
+        // Security validation: Check filename for path traversal attempts
+        const normalizedFilename = path.basename(filename);
+        if (normalizedFilename !== filename || filename.includes('..') || filename.includes('/') || filename.includes('\\')) {
+          return res.status(HTTP_STATUS.BAD_REQUEST).json({
+            success: false,
+            error: 'Invalid filename'
+          });
+        }
+
+        // Try to locate the image in multiple possible locations
+        let imagePath = null;
+        const searchPaths = [
+          // 1. Session's project directory images folder
+          path.join(session.projectDir || process.cwd(), 'images', normalizedFilename),
+          // 2. Temp directory for this session
+          path.join('/tmp/loxia-images', sessionId, normalizedFilename),
+          // 3. General temp images directory
+          path.join('/tmp/loxia-images', normalizedFilename)
+        ];
+
+        // 4. Search in agent working directories for this session
+        // Get all agents and check their workingDirectory
+        if (this.orchestrator?.agentPool) {
+          try {
+            const agents = await this.orchestrator.agentPool.getAllAgents();
+            for (const agent of agents) {
+              if (agent.directoryAccess?.workingDirectory) {
+                searchPaths.push(
+                  path.join(agent.directoryAccess.workingDirectory, 'images', normalizedFilename)
+                );
+              }
+            }
+          } catch (error) {
+            this.logger.warn('Failed to get agent working directories for image search', {
+              error: error.message
+            });
+          }
+        }
+
+        // Find the first existing file
+        for (const searchPath of searchPaths) {
+          try {
+            const stats = await fs.stat(searchPath);
+            if (stats.isFile()) {
+              imagePath = searchPath;
+              this.logger.info('Image found', {
+                filename: normalizedFilename,
+                path: imagePath,
+                sessionId
+              });
+              break;
+            }
+          } catch (error) {
+            // File doesn't exist at this path, try next one
+            continue;
+          }
+        }
+
+        if (!imagePath) {
+          this.logger.warn('Image not found in any search path', {
+            filename: normalizedFilename,
+            sessionId,
+            searchPaths
+          });
+
+          return res.status(HTTP_STATUS.NOT_FOUND).json({
+            success: false,
+            error: 'Image not found'
+          });
+        }
+
+        // Serve the image file
+        res.sendFile(imagePath, (err) => {
+          if (err) {
+            this.logger.error('Failed to send image file', {
+              error: err.message,
+              imagePath,
+              filename: normalizedFilename
+            });
+
+            if (!res.headersSent) {
+              res.status(HTTP_STATUS.INTERNAL_SERVER_ERROR).json({
+                success: false,
+                error: 'Failed to serve image'
+              });
+            }
+          } else {
+            this.logger.info('Image served successfully', {
+              filename: normalizedFilename,
+              path: imagePath,
+              sessionId
+            });
+          }
+        });
+
+      } catch (error) {
+        this.logger.error('Image serving error', {
+          error: error.message,
+          sessionId: req.params.sessionId,
+          filename: req.params.filename
+        });
+
+        res.status(HTTP_STATUS.INTERNAL_SERVER_ERROR).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Agent mode control endpoints
+    this.app.post('/api/agents/:agentId/mode', async (req, res) => {
+      try {
+        const { agentId } = req.params;
+        const { mode, lockMode = false, sessionId: bodySessionId } = req.body;
+        
+        // Validate mode
+        if (!Object.values(AGENT_MODES).includes(mode)) {
+          return res.status(400).json({
+            success: false,
+            error: `Invalid mode. Must be one of: ${Object.values(AGENT_MODES).join(', ')}`
+          });
+        }
+        
+        // CRITICAL FIX: Use session ID from body first, then req.sessionID
+        const sessionId = bodySessionId || req.sessionID;
+        
+        if (!sessionId) {
+          this.logger.warn('Agent mode update requested without session ID', {
+            agentId,
+            hasBodySessionId: !!bodySessionId,
+            hasReqSessionId: !!req.sessionID
+          });
+        }
+        
+        // Update agent mode
+        const request = {
+          interface: INTERFACE_TYPES.WEB,
+          sessionId: sessionId,
+          action: 'update_agent',
+          payload: {
+            agentId,
+            updates: {
+              mode: mode  // lockMode is no longer used, only CHAT and AGENT modes
+            }
+          }
+        };
+        
+        const response = await this.orchestrator.processRequest(request);
+        
+        if (response.success) {
+          // Extract agent from response.data (orchestrator wraps result in data property)
+          const updatedAgent = response.data;
+          
+          this.logger.info(`Agent mode updated: ${agentId}`, {
+            newMode: mode,
+            lockMode,
+            finalMode: updatedAgent?.mode
+          });
+          
+          // Broadcast mode change via WebSocket
+          this.broadcastToSession(request.sessionId, {
+            type: 'agent_mode_changed',
+            agentId,
+            mode: updatedAgent?.mode,
+            modeState: updatedAgent?.modeState
+          });
+          
+          res.json({
+            success: true,
+            agent: updatedAgent,
+            message: `Agent mode switched to ${updatedAgent?.mode}`
+          });
+        } else {
+          res.status(400).json({
+            success: false,
+            error: response.error || 'Failed to update agent mode'
+          });
+        }
+        
+      } catch (error) {
+        this.logger.error('Failed to update agent mode', {
+          agentId: req.params.agentId,
+          error: error.message
+        });
+        
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+    
+    // Stop autonomous execution
+    this.app.post('/api/agents/:agentId/stop', async (req, res) => {
+      try {
+        const { agentId } = req.params;
+        
+        // Get message processor from orchestrator
+        const messageProcessor = this.orchestrator.messageProcessor;
+        if (!messageProcessor) {
+          return res.status(500).json({
+            success: false,
+            error: 'Message processor not available'
+          });
+        }
+        
+        const result = await messageProcessor.stopAutonomousExecution(agentId);
+        
+        this.logger.info(`Autonomous execution stop requested: ${agentId}`);
+        
+        // Broadcast stop event via WebSocket with updated agent state
+        // TODO: Get session ID from request body or agent context
+        const broadcastSessionId = req.sessionID || result.agent?.sessionId;
+        if (broadcastSessionId) {
+          this.broadcastToSession(broadcastSessionId, {
+            type: 'agent_mode_changed',
+            agentId,
+            mode: result.agent?.mode,
+            modeState: result.agent?.modeState
+          });
+        }
+        
+        res.json(result);
+        
+      } catch (error) {
+        this.logger.error('Failed to stop autonomous execution', {
+          agentId: req.params.agentId,
+          error: error.message
+        });
+        
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+    
+    // Get agent mode status
+    this.app.get('/api/agents/:agentId/mode', async (req, res) => {
+      try {
+        const { agentId } = req.params;
+        
+        // TODO: Get session ID from query params or headers
+        const request = {
+          interface: INTERFACE_TYPES.WEB,
+          sessionId: req.sessionID,
+          action: 'get_agent_status',
+          payload: { agentId }
+        };
+        
+        const response = await this.orchestrator.processRequest(request);
+        
+        if (response.success && response.agent) {
+          res.json({
+            success: true,
+            mode: response.agent.mode,
+            modeState: response.agent.modeState,
+            currentTask: response.agent.currentTask,
+            iterationCount: response.agent.iterationCount,
+            taskStartTime: response.agent.taskStartTime,
+            stopRequested: response.agent.stopRequested
+          });
+        } else {
+          res.status(404).json({
+            success: false,
+            error: 'Agent not found'
+          });
+        }
+        
+      } catch (error) {
+        this.logger.error('Failed to get agent mode status', {
+          agentId: req.params.agentId,
+          error: error.message
+        });
+        
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Agent Import/Resume Endpoints
+
+    // Get all available agents (active + archived)
+    this.app.get('/api/agents/available', async (req, res) => {
+      try {
+        const projectDir = this.orchestrator.config.project?.directory || process.cwd();
+        const agents = await this.orchestrator.stateManager.getAllAvailableAgents(
+          projectDir,
+          this.orchestrator.agentPool
+        );
+
+        res.json({
+          success: true,
+          agents: agents,
+          total: agents.length,
+          active: agents.filter(a => a.isLoaded).length,
+          archived: agents.filter(a => !a.isLoaded).length
+        });
+      } catch (error) {
+        this.logger.error('Failed to get available agents', {
+          error: error.message,
+          stack: error.stack
+        });
+
+        res.status(500).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Get agent metadata for preview
+    this.app.get('/api/agents/:agentId/metadata', async (req, res) => {
+      try {
+        const { agentId } = req.params;
+        const projectDir = this.orchestrator.config.project?.directory || process.cwd();
+
+        const metadata = await this.orchestrator.stateManager.getAgentMetadata(
+          agentId,
+          projectDir
+        );
+
+        res.json({
+          success: true,
+          metadata
+        });
+      } catch (error) {
+        this.logger.error('Failed to get agent metadata', {
+          agentId: req.params.agentId,
+          error: error.message
+        });
+
+        res.status(404).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Import archived agent
+    this.app.post('/api/agents/import', async (req, res) => {
+      try {
+        const { agentId } = req.body;
+
+        if (!agentId) {
+          return res.status(400).json({
+            success: false,
+            error: 'agentId is required in request body'
+          });
+        }
+
+        const projectDir = this.orchestrator.config.project?.directory || process.cwd();
+
+        // Import the agent
+        const agent = await this.orchestrator.stateManager.importArchivedAgent(
+          agentId,
+          projectDir,
+          this.orchestrator.agentPool
+        );
+
+        // Broadcast agent added event via WebSocket
+        if (this.wsManager) {
+          this.wsManager.broadcast({
+            type: 'agent-imported',
+            agent: {
+              id: agent.id,
+              name: agent.name,
+              status: agent.status,
+              capabilities: agent.capabilities,
+              model: agent.currentModel || agent.preferredModel
+            }
+          });
+        }
+
+        this.logger.info('Agent imported successfully', {
+          agentId: agent.id,
+          name: agent.name
+        });
+
+        res.json({
+          success: true,
+          agent: {
+            id: agent.id,
+            name: agent.name,
+            status: agent.status,
+            model: agent.currentModel || agent.preferredModel,
+            capabilities: agent.capabilities,
+            lastActivity: agent.lastActivity
+          },
+          message: `Agent ${agent.name} imported successfully`
+        });
+      } catch (error) {
+        this.logger.error('Failed to import agent', {
+          agentId: req.body.agentId,
+          error: error.message,
+          stack: error.stack
+        });
+
+        // Determine appropriate status code
+        const statusCode = error.message.includes('already active') ? 409 :
+                          error.message.includes('not found') ? 404 :
+                          error.message.includes('Invalid') ? 400 : 500;
+
+        res.status(statusCode).json({
+          success: false,
+          error: error.message
+        });
+      }
+    });
+
+    // Serve React app for all other routes
+    this.app.get('*', (req, res) => {
+      const indexPath = path.join(__dirname, '../../web-ui/build/index.html');
+      res.sendFile(indexPath, (err) => {
+        if (err) {
+          res.status(HTTP_STATUS.NOT_FOUND).send('Web UI not built. Run: npm run build:ui');
+        }
+      });
+    });
+  }
+
+  /**
+   * Setup WebSocket server
+   * @private
+   */
+  setupWebSocket() {
+    this.logger.info('Setting up WebSocket server', {
+      port: this.port,
+      host: this.host,
+      wsServerExists: !!this.wss,
+      httpServerExists: !!this.server
+    });
+    
+    // Add error handler for WebSocket server
+    this.wss.on('error', (error) => {
+      this.logger.error('WebSocket server error:', {
+        error: error.message,
+        stack: error.stack,
+        port: this.port
+      });
+    });
+    
+    // Log when WebSocket server is ready
+    this.wss.on('listening', () => {
+      this.logger.info('WebSocket server is now listening', {
+        port: this.port,
+        host: this.host
+      });
+    });
+    
+    this.wss.on('connection', (ws, req) => {
+      const connectionId = `conn-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      
+      this.logger.info('WebSocket connection established', {
+        connectionId,
+        ip: req.socket.remoteAddress,
+        origin: req.headers.origin,
+        host: req.headers.host,
+        userAgent: req.headers['user-agent'],
+        url: req.url
+      });
+      
+      // Store connection
+      const connection = {
+        id: connectionId,
+        ws,
+        sessionId: null,
+        connectedAt: new Date().toISOString(),
+        lastActivity: new Date().toISOString()
+      };
+      
+      this.connections.set(connectionId, connection);
+      
+      // Handle messages
+      ws.on('message', async (data) => {
+        try {
+          const message = JSON.parse(data.toString());
+          await this.handleWebSocketMessage(connectionId, message);
+        } catch (error) {
+          this.logger.error('WebSocket message error', {
+            connectionId,
+            error: error.message
+          });
+          
+          ws.send(JSON.stringify({
+            type: 'error',
+            error: error.message
+          }));
+        }
+      });
+      
+      // Handle disconnect
+      ws.on('close', () => {
+        this.logger.info('WebSocket connection closed', { connectionId });
+        this.connections.delete(connectionId);
+      });
+      
+      // Send welcome message
+      ws.send(JSON.stringify({
+        type: 'connected',
+        connectionId,
+        timestamp: new Date().toISOString()
+      }));
+    });
+  }
+
+  /**
+   * Handle WebSocket message
+   * @private
+   */
+  async handleWebSocketMessage(connectionId, message) {
+    const connection = this.connections.get(connectionId);
+    if (!connection) return;
+    
+    connection.lastActivity = new Date().toISOString();
+    
+    switch (message.type) {
+      case 'join_session':
+        const sessionId = message.sessionId;
+        connection.sessionId = sessionId;
+        
+        this.logger.info('WebSocket joined session', {
+          connectionId,
+          sessionId,
+          totalConnectionsForSession: Array.from(this.connections.values()).filter(c => c.sessionId === sessionId).length
+        });
+        
+        connection.ws.send(JSON.stringify({
+          type: 'session_joined',
+          sessionId: sessionId
+        }));
+        break;
+      
+      case 'ping':
+        connection.ws.send(JSON.stringify({
+          type: 'pong',
+          timestamp: new Date().toISOString()
+        }));
+        break;
+      
+      case 'orchestrator_request':
+        // Handle real-time orchestrator requests
+        try {
+          const request = {
+            interface: INTERFACE_TYPES.WEB,
+            sessionId: connection.sessionId,
+            action: message.action,
+            payload: message.payload,
+            projectDir: message.projectDir || process.cwd()
+          };
+          
+          const response = await this.orchestrator.processRequest(request);
+          
+          connection.ws.send(JSON.stringify({
+            type: 'orchestrator_response',
+            requestId: message.requestId,
+            response
+          }));
+          
+        } catch (error) {
+          connection.ws.send(JSON.stringify({
+            type: 'error',
+            requestId: message.requestId,
+            error: error.message
+          }));
+        }
+        break;
+      
+      default:
+        this.logger.warn('Unknown WebSocket message type', {
+          connectionId,
+          type: message.type
+        });
+    }
+  }
+
+  /**
+   * Broadcast message to all connections in a session
+   * @private
+   */
+  broadcastToSession(sessionId, message) {
+    const sessionConnections = Array.from(this.connections.values())
+      .filter(conn => conn.sessionId === sessionId);
+    
+    // If no connections found for this session, try broadcasting to all connections
+    // This handles cases where session IDs might be mismatched
+    let allConnections = [];
+    if (sessionConnections.length === 0) {
+      allConnections = Array.from(this.connections.values());
+      
+      this.logger?.warn('🔄 No connections for session, trying all connections:', {
+        targetSessionId: sessionId,
+        totalConnections: this.connections.size,
+        allSessionIds: Array.from(this.connections.values()).map(c => c.sessionId).filter(Boolean)
+      });
+    }
+    
+    const targetConnections = sessionConnections.length > 0 ? sessionConnections : allConnections;
+    
+    this.logger?.info('📡 WebSocket broadcastToSession called:', {
+      sessionId,
+      messageType: message.type,
+      agentId: message.agentId,
+      totalConnections: this.connections.size,
+      sessionConnections: sessionConnections.length,
+      targetConnections: targetConnections.length,
+      connectionIds: targetConnections.map(c => c.id),
+      usingFallback: sessionConnections.length === 0,
+      messagePreview: message.type === 'autonomous_update' && message.message ? {
+        messageId: message.message.id,
+        messageRole: message.message.role,
+        contentLength: message.message.content?.length,
+        hasToolResults: !!message.message.toolResults
+      } : undefined
+    });
+    
+    for (const connection of targetConnections) {
+      try {
+        const fullMessage = {
+          ...message,
+          timestamp: new Date().toISOString()
+        };
+        
+        connection.ws.send(JSON.stringify(fullMessage));
+        
+        this.logger?.info('✅ WebSocket message sent to connection:', {
+          connectionId: connection.id,
+          messageType: message.type,
+          agentId: message.agentId
+        });
+      } catch (error) {
+        this.logger.warn('❌ Failed to send WebSocket message', {
+          connectionId: connection.id,
+          sessionId,
+          messageType: message.type,
+          error: error.message
+        });
+      }
+    }
+  }
+
+  /**
+   * Start the HTTP server
+   * @private
+   */
+  async startServer() {
+    return new Promise((resolve, reject) => {
+      this.server.listen(this.port, this.host, (error) => {
+        if (error) {
+          this.logger.error('Failed to start HTTP server', {
+            error: error.message,
+            port: this.port,
+            host: this.host
+          });
+          reject(error);
+        } else {
+          this.isRunning = true;
+          
+          // Verify WebSocket server status
+          this.logger.info('HTTP server started successfully', {
+            port: this.port,
+            host: this.host,
+            httpUrl: `http://${this.host}:${this.port}`,
+            wsUrl: `ws://${this.host}:${this.port}`,
+            wsServerAttached: !!this.wss,
+            wsConnections: this.connections.size
+          });
+          
+          // Test WebSocket server availability
+          setTimeout(async () => {
+            await this.testWebSocketServer();
+          }, 1000);
+          
+          resolve();
+        }
+      });
+      
+      // Add server error handler
+      this.server.on('error', (error) => {
+        this.logger.error('HTTP server error:', {
+          error: error.message,
+          stack: error.stack,
+          port: this.port
+        });
+      });
+    });
+  }
+
+  /**
+   * Test WebSocket server availability
+   * @private
+   */
+  async testWebSocketServer() {
+    try {
+      const { default: WebSocket } = await import('ws');
+      const testWs = new WebSocket(`ws://localhost:${this.port}`);
+      
+      testWs.on('open', () => {
+        this.logger.info('✅ WebSocket server test: SUCCESSFUL', {
+          port: this.port,
+          url: `ws://localhost:${this.port}`
+        });
+        testWs.close();
+      });
+      
+      testWs.on('error', (error) => {
+        this.logger.error('❌ WebSocket server test: FAILED', {
+          port: this.port,
+          url: `ws://localhost:${this.port}`,
+          error: error.message,
+          code: error.code
+        });
+      });
+      
+      testWs.on('close', (code, reason) => {
+        if (code === 1000) {
+          this.logger.info('WebSocket test connection closed cleanly');
+        }
+      });
+      
+      // Timeout the test
+      setTimeout(() => {
+        if (testWs.readyState === WebSocket.CONNECTING) {
+          this.logger.error('❌ WebSocket server test: TIMEOUT', {
+            port: this.port,
+            url: `ws://localhost:${this.port}`,
+            readyState: testWs.readyState
+          });
+          testWs.terminate();
+        }
+      }, 5000);
+      
+    } catch (error) {
+      this.logger.error('❌ WebSocket server test: EXCEPTION', {
+        error: error.message,
+        stack: error.stack
+      });
+    }
+  }
+
+  /**
+   * Get default models when API is unavailable
+   * @returns {Array} Default model list
+   * @private
+   */
+  getDefaultModels() {
+    return [
+      {
+        name: 'anthropic-sonnet',
+        category: 'anthropic',
+        type: 'chat',
+        maxTokens: 10000,
+        supportsVision: true,
+        supportsSystem: true,
+        pricing: {
+          input: 0.003,
+          output: 0.015,
+          unit: '1K tokens'
+        }
+      },
+      {
+        name: 'anthropic-opus',
+        category: 'anthropic',
+        type: 'chat',
+        maxTokens: 10000,
+        supportsVision: true,
+        supportsSystem: true,
+        pricing: {
+          input: 0.015,
+          output: 0.075,
+          unit: '1K tokens'
+        }
+      },
+      {
+        name: 'anthropic-haiku',
+        category: 'anthropic',
+        type: 'chat',
+        maxTokens: 10000,
+        supportsVision: false,
+        supportsSystem: true,
+        pricing: {
+          input: 0.0025,
+          output: 0.0125,
+          unit: '1K tokens'
+        }
+      },
+      {
+        name: 'gpt-4',
+        category: 'openai',
+        type: 'chat',
+        maxTokens: 8000,
+        supportsVision: true,
+        supportsSystem: true,
+        pricing: {
+          input: 0.03,
+          output: 0.06,
+          unit: '1K tokens'
+        }
+      },
+      {
+        name: 'gpt-4-mini',
+        category: 'openai',
+        type: 'chat',
+        maxTokens: 16000,
+        supportsVision: false,
+        supportsSystem: true,
+        pricing: {
+          input: 0.0015,
+          output: 0.006,
+          unit: '1K tokens'
+        }
+      },
+      {
+        name: 'deepseek-r1',
+        category: 'deepseek',
+        type: 'chat',
+        maxTokens: 8000,
+        supportsVision: false,
+        supportsSystem: true,
+        pricing: {
+          input: 0.002,
+          output: 0.008,
+          unit: '1K tokens'
+        }
+      },
+      {
+        name: 'phi-4',
+        category: 'microsoft',
+        type: 'chat',
+        maxTokens: 4000,
+        supportsVision: false,
+        supportsSystem: true,
+        pricing: {
+          input: 0.001,
+          output: 0.004,
+          unit: '1K tokens'
+        }
+      }
+    ];
+  }
+
+  /**
+   * Set API key manager instance
+   * @param {ApiKeyManager} apiKeyManager - API key manager instance
+   */
+  setApiKeyManager(apiKeyManager) {
+    this.apiKeyManager = apiKeyManager;
+    
+    this.logger?.info('API key manager set for web server', {
+      hasManager: !!apiKeyManager
+    });
+  }
+
+  /**
+   * Extract vendor name from model name
+   * @param {string} model - Model name
+   * @returns {string|null} Vendor name
+   * @private
+   */
+  _getVendorFromModel(model) {
+    if (!model) return null;
+    
+    const modelName = model.toLowerCase();
+    
+    if (modelName.includes('anthropic') || modelName.includes('claude')) {
+      return 'anthropic';
+    } else if (modelName.includes('openai') || modelName.includes('gpt')) {
+      return 'openai';
+    } else if (modelName.includes('deepseek')) {
+      return 'deepseek';
+    } else if (modelName.includes('phi')) {
+      return 'microsoft';
+    }
+    
+    return null;
+  }
+
+  /**
+   * Get server status
+   * @returns {Object} Server status
+   */
+  getStatus() {
+    return {
+      isRunning: this.isRunning,
+      port: this.port,
+      host: this.host,
+      connections: this.connections.size,
+      sessions: this.sessions.size,
+      url: `http://${this.host}:${this.port}`
+    };
+  }
+
+  /**
+   * Shutdown the web server
+   * @returns {Promise<void>}
+   */
+  async shutdown() {
+    if (!this.isRunning) return;
+    
+    this.logger.info('Shutting down web server...');
+    
+    // Close all WebSocket connections
+    for (const connection of this.connections.values()) {
+      connection.ws.close();
+    }
+    this.connections.clear();
+    
+    // Close WebSocket server
+    this.wss.close();
+    
+    // Close HTTP server
+    return new Promise((resolve) => {
+      this.server.close(() => {
+        this.isRunning = false;
+        this.logger.info('Web server shutdown complete');
+        resolve();
+      });
+    });
+  }
+}
+
+export default WebServer;
+
+// Main execution block - start server if run directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  // Simple console logger for standalone mode
+  const simpleLogger = {
+    info: (msg, data) => console.log(`[INFO] ${msg}`, data ? JSON.stringify(data, null, 2) : ''),
+    error: (msg, data) => console.error(`[ERROR] ${msg}`, data ? JSON.stringify(data, null, 2) : ''),
+    warn: (msg, data) => console.warn(`[WARN] ${msg}`, data ? JSON.stringify(data, null, 2) : ''),
+    debug: (msg, data) => console.log(`[DEBUG] ${msg}`, data ? JSON.stringify(data, null, 2) : '')
+  };
+
+  // Simple orchestrator mock for standalone mode
+  const mockOrchestrator = {
+    processAction: async (action, data) => {
+      simpleLogger.info('Mock orchestrator action', { action, data });
+      
+      // Mock responses for different actions
+      switch (action) {
+        case ORCHESTRATOR_ACTIONS.LIST_AGENTS:
+          return {
+            success: true,
+            data: []
+          };
+        
+        case ORCHESTRATOR_ACTIONS.CREATE_AGENT:
+          return {
+            success: true,
+            data: {
+              id: `agent-${Date.now()}`,
+              name: data.name || 'New Agent',
+              status: 'active',
+              model: data.model || 'anthropic-sonnet',
+              systemPrompt: data.systemPrompt || 'You are a helpful AI assistant.'
+            }
+          };
+        
+        case ORCHESTRATOR_ACTIONS.SEND_MESSAGE:
+          return {
+            success: true,
+            data: {
+              message: {
+                id: `msg-${Date.now()}`,
+                content: `Echo: ${data.message}`,
+                timestamp: new Date().toISOString()
+              }
+            }
+          };
+        
+        default:
+          return {
+            success: false,
+            error: `Unknown action: ${action}`
+          };
+      }
+    }
+  };
+
+  const server = new WebServer(mockOrchestrator, simpleLogger, {
+    port: 8080,
+    host: '0.0.0.0'
+  });
+
+  console.log('🚀 Starting Loxia Web Server in standalone mode...');
+  
+  server.startServer()
+    .then(() => {
+      const status = server.getStatus();
+      console.log(`✅ Web Server running at ${status.url}`);
+      console.log('📱 Web UI available at: http://localhost:3001 (if running)');
+      console.log('🔧 API available at: http://localhost:8080/api');
+    })
+    .catch(error => {
+      console.error('❌ Failed to start web server:', error.message);
+      process.exit(1);
+    });
+
+  // Graceful shutdown
+  process.on('SIGINT', async () => {
+    console.log('\n🛑 Shutting down web server...');
+    await server.shutdown();
+    process.exit(0);
+  });
+}