moved most api stuff to web-api and built out a better monitoring solution for web-app

apps/stock/web-api/src/index.ts

@@ -4,19 +4,23 @@
  */
 
 import { initializeStockConfig } from '@stock-bot/stock-config';
-import {
-  ServiceApplication,
-  createServiceContainerFromConfig,
-  initializeServices as initializeAwilixServices,
-} from '@stock-bot/di';
+import { ServiceApplication } from '@stock-bot/di';
 import { getLogger } from '@stock-bot/logger';
 
 // Local imports
 import { createRoutes } from './routes/create-routes';
-import { setupServiceContainer } from './container-setup';
 
 // Initialize configuration with service-specific overrides
 const config = initializeStockConfig('webApi');
+
+// Override queue settings for web-api (no workers needed)
+if (config.queue) {
+  config.queue.workers = 0;
+  config.queue.concurrency = 0;
+  config.queue.enableScheduledJobs = false;
+  config.queue.delayWorkerStart = true;
+}
+
 console.log('Web API Service Configuration:', JSON.stringify(config, null, 2));
 
 // Create service application
@@ -44,9 +48,15 @@ const app = new ServiceApplication(
   {
     // Custom lifecycle hooks
     onContainerReady: (container) => {
-      // Setup service-specific configuration
-      const enhancedContainer = setupServiceContainer(config, container);
-      return enhancedContainer;
+      // Override queue configuration to disable workers
+      const config = container.cradle.config;
+      if (config.queue) {
+        config.queue.workers = 0;
+        config.queue.concurrency = 0;
+        config.queue.enableScheduledJobs = false;
+        config.queue.delayWorkerStart = true;
+      }
+      return container;
     },
     onStarted: (port) => {
       const logger = getLogger('web-api');
@@ -57,16 +67,21 @@ const app = new ServiceApplication(
 
 // Container factory function
 async function createContainer(config: any) {
-  const container = createServiceContainerFromConfig(config, {
-    enableQuestDB: false, // Web API doesn't need QuestDB
-    enableMongoDB: true,
-    enablePostgres: true,
-    enableCache: true,
-    enableQueue: false, // Web API doesn't need queue processing
-    enableBrowser: false, // Web API doesn't need browser
-    enableProxy: false, // Web API doesn't need proxy
-  });
-  await initializeAwilixServices(container);
+  const { ServiceContainerBuilder } = await import('@stock-bot/di');
+  
+  const container = await new ServiceContainerBuilder()
+    .withConfig(config)
+    .withOptions({
+      enableQuestDB: false, // Disable QuestDB for now
+      enableMongoDB: true,
+      enablePostgres: true,
+      enableCache: true,
+      enableQueue: true, // Enable for pipeline operations
+      enableBrowser: false, // Web API doesn't need browser
+      enableProxy: false, // Web API doesn't need proxy
+    })
+    .build(); // This automatically initializes services
+    
   return container;
 }
 

apps/stock/web-api/src/routes/create-routes.ts

@@ -1,23 +1,29 @@
-/**
- * Route factory for web API service
- * Creates routes with access to the service container
- */
-
-import { Hono } from 'hono';
-import type { IServiceContainer } from '@stock-bot/handlers';
-import { createHealthRoutes } from './health.routes';
-import { createExchangeRoutes } from './exchange.routes';
-
-export function createRoutes(container: IServiceContainer): Hono {
-  const app = new Hono();
-
-  // Create routes with container
-  const healthRoutes = createHealthRoutes(container);
-  const exchangeRoutes = createExchangeRoutes(container);
-
-  // Mount routes
-  app.route('/health', healthRoutes);
-  app.route('/api/exchanges', exchangeRoutes);
-
-  return app;
+/**
+ * Route factory for web API service
+ * Creates routes with access to the service container
+ */
+
+import { Hono } from 'hono';
+import type { IServiceContainer } from '@stock-bot/handlers';
+import { createHealthRoutes } from './health.routes';
+import { createExchangeRoutes } from './exchange.routes';
+import { createMonitoringRoutes } from './monitoring.routes';
+import { createPipelineRoutes } from './pipeline.routes';
+
+export function createRoutes(container: IServiceContainer): Hono {
+  const app = new Hono();
+
+  // Create routes with container
+  const healthRoutes = createHealthRoutes(container);
+  const exchangeRoutes = createExchangeRoutes(container);
+  const monitoringRoutes = createMonitoringRoutes(container);
+  const pipelineRoutes = createPipelineRoutes(container);
+
+  // Mount routes
+  app.route('/health', healthRoutes);
+  app.route('/api/exchanges', exchangeRoutes);
+  app.route('/api/system/monitoring', monitoringRoutes);
+  app.route('/api/pipeline', pipelineRoutes);
+
+  return app;
 }

apps/stock/web-api/src/routes/monitoring.routes.ts

@@ -0,0 +1,183 @@
+/**
+ * Monitoring routes for system health and metrics
+ */
+
+import { Hono } from 'hono';
+import type { IServiceContainer } from '@stock-bot/handlers';
+import { MonitoringService } from '../services/monitoring.service';
+
+export function createMonitoringRoutes(container: IServiceContainer) {
+  const monitoring = new Hono();
+  const monitoringService = new MonitoringService(container);
+
+  /**
+   * Get overall system health
+   */
+  monitoring.get('/', async (c) => {
+    try {
+      const health = await monitoringService.getSystemHealth();
+      
+      // Set appropriate status code based on health
+      const statusCode = health.status === 'healthy' ? 200 :
+                        health.status === 'degraded' ? 503 : 500;
+      
+      return c.json(health, statusCode);
+    } catch (error) {
+      return c.json({
+        status: 'error',
+        message: 'Failed to retrieve system health',
+        error: error instanceof Error ? error.message : 'Unknown error',
+      }, 500);
+    }
+  });
+
+  /**
+   * Get cache/Dragonfly statistics
+   */
+  monitoring.get('/cache', async (c) => {
+    try {
+      const stats = await monitoringService.getCacheStats();
+      return c.json(stats);
+    } catch (error) {
+      return c.json({
+        error: 'Failed to retrieve cache statistics',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }, 500);
+    }
+  });
+
+  /**
+   * Get queue statistics
+   */
+  monitoring.get('/queues', async (c) => {
+    try {
+      const stats = await monitoringService.getQueueStats();
+      return c.json({ queues: stats });
+    } catch (error) {
+      return c.json({
+        error: 'Failed to retrieve queue statistics',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }, 500);
+    }
+  });
+
+  /**
+   * Get specific queue statistics
+   */
+  monitoring.get('/queues/:name', async (c) => {
+    try {
+      const queueName = c.req.param('name');
+      const stats = await monitoringService.getQueueStats();
+      const queueStats = stats.find(q => q.name === queueName);
+      
+      if (!queueStats) {
+        return c.json({
+          error: 'Queue not found',
+          message: `Queue '${queueName}' does not exist`,
+        }, 404);
+      }
+      
+      return c.json(queueStats);
+    } catch (error) {
+      return c.json({
+        error: 'Failed to retrieve queue statistics',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }, 500);
+    }
+  });
+
+  /**
+   * Get database statistics
+   */
+  monitoring.get('/databases', async (c) => {
+    try {
+      const stats = await monitoringService.getDatabaseStats();
+      return c.json({ databases: stats });
+    } catch (error) {
+      return c.json({
+        error: 'Failed to retrieve database statistics',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }, 500);
+    }
+  });
+
+  /**
+   * Get specific database statistics
+   */
+  monitoring.get('/databases/:type', async (c) => {
+    try {
+      const dbType = c.req.param('type') as 'postgres' | 'mongodb' | 'questdb';
+      const stats = await monitoringService.getDatabaseStats();
+      const dbStats = stats.find(db => db.type === dbType);
+      
+      if (!dbStats) {
+        return c.json({
+          error: 'Database not found',
+          message: `Database type '${dbType}' not found or not enabled`,
+        }, 404);
+      }
+      
+      return c.json(dbStats);
+    } catch (error) {
+      return c.json({
+        error: 'Failed to retrieve database statistics',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }, 500);
+    }
+  });
+
+  /**
+   * Get service metrics
+   */
+  monitoring.get('/metrics', async (c) => {
+    try {
+      const metrics = await monitoringService.getServiceMetrics();
+      return c.json(metrics);
+    } catch (error) {
+      return c.json({
+        error: 'Failed to retrieve service metrics',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }, 500);
+    }
+  });
+
+  /**
+   * Get detailed cache info (Redis INFO command output)
+   */
+  monitoring.get('/cache/info', async (c) => {
+    try {
+      if (!container.cache) {
+        return c.json({
+          error: 'Cache not available',
+          message: 'Cache service is not enabled',
+        }, 503);
+      }
+      
+      const info = await container.cache.info();
+      const stats = await monitoringService.getCacheStats();
+      
+      return c.json({
+        parsed: stats,
+        raw: info,
+      });
+    } catch (error) {
+      return c.json({
+        error: 'Failed to retrieve cache info',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }, 500);
+    }
+  });
+
+  /**
+   * Health check endpoint for monitoring
+   */
+  monitoring.get('/ping', (c) => {
+    return c.json({ 
+      status: 'ok', 
+      timestamp: new Date().toISOString(),
+      service: 'monitoring',
+    });
+  });
+
+  return monitoring;
+}

apps/stock/web-api/src/routes/pipeline.routes.ts

@@ -0,0 +1,135 @@
+/**
+ * Pipeline Routes
+ * API endpoints for data pipeline operations
+ */
+
+import { Hono } from 'hono';
+import type { IServiceContainer } from '@stock-bot/handlers';
+import { getLogger } from '@stock-bot/logger';
+import { PipelineService } from '../services/pipeline.service';
+
+const logger = getLogger('pipeline-routes');
+
+export function createPipelineRoutes(container: IServiceContainer) {
+  const pipeline = new Hono();
+  const pipelineService = new PipelineService(container);
+
+  // Symbol sync endpoints
+  pipeline.post('/symbols', async c => {
+    try {
+      const result = await pipelineService.syncQMSymbols();
+      return c.json(result, result.success ? 200 : 503);
+    } catch (error) {
+      logger.error('Error in POST /symbols', { error });
+      return c.json({ success: false, error: 'Internal server error' }, 500);
+    }
+  });
+
+  pipeline.post('/symbols/:provider', async c => {
+    try {
+      const provider = c.req.param('provider');
+      const result = await pipelineService.syncProviderSymbols(provider);
+      return c.json(result, result.success ? 200 : 503);
+    } catch (error) {
+      logger.error('Error in POST /symbols/:provider', { error });
+      return c.json({ success: false, error: 'Internal server error' }, 500);
+    }
+  });
+
+  // Exchange sync endpoints
+  pipeline.post('/exchanges', async c => {
+    try {
+      const result = await pipelineService.syncQMExchanges();
+      return c.json(result, result.success ? 200 : 503);
+    } catch (error) {
+      logger.error('Error in POST /exchanges', { error });
+      return c.json({ success: false, error: 'Internal server error' }, 500);
+    }
+  });
+
+  pipeline.post('/exchanges/all', async c => {
+    try {
+      const clearFirst = c.req.query('clear') === 'true';
+      const result = await pipelineService.syncAllExchanges(clearFirst);
+      return c.json(result, result.success ? 200 : 503);
+    } catch (error) {
+      logger.error('Error in POST /exchanges/all', { error });
+      return c.json({ success: false, error: 'Internal server error' }, 500);
+    }
+  });
+
+  // Provider mapping sync endpoints
+  pipeline.post('/provider-mappings/qm', async c => {
+    try {
+      const result = await pipelineService.syncQMProviderMappings();
+      return c.json(result, result.success ? 200 : 503);
+    } catch (error) {
+      logger.error('Error in POST /provider-mappings/qm', { error });
+      return c.json({ success: false, error: 'Internal server error' }, 500);
+    }
+  });
+
+  pipeline.post('/provider-mappings/ib', async c => {
+    try {
+      const result = await pipelineService.syncIBExchanges();
+      return c.json(result, result.success ? 200 : 503);
+    } catch (error) {
+      logger.error('Error in POST /provider-mappings/ib', { error });
+      return c.json({ success: false, error: 'Internal server error' }, 500);
+    }
+  });
+
+  // Status endpoint
+  pipeline.get('/status', async c => {
+    try {
+      const result = await pipelineService.getSyncStatus();
+      return c.json(result, result.success ? 200 : 503);
+    } catch (error) {
+      logger.error('Error in GET /status', { error });
+      return c.json({ success: false, error: 'Internal server error' }, 500);
+    }
+  });
+
+  // Clear data endpoint
+  pipeline.post('/clear/postgresql', async c => {
+    try {
+      const dataType = c.req.query('type') as 'exchanges' | 'provider_mappings' | 'all';
+      const result = await pipelineService.clearPostgreSQLData(dataType || 'all');
+      return c.json(result, result.success ? 200 : 503);
+    } catch (error) {
+      logger.error('Error in POST /clear/postgresql', { error });
+      return c.json({ success: false, error: 'Internal server error' }, 500);
+    }
+  });
+
+  // Statistics endpoints
+  pipeline.get('/stats/exchanges', async c => {
+    try {
+      const result = await pipelineService.getExchangeStats();
+      if (result.success) {
+        return c.json(result.data);
+      } else {
+        return c.json({ error: result.error }, 503);
+      }
+    } catch (error) {
+      logger.error('Error in GET /stats/exchanges', { error });
+      return c.json({ error: 'Internal server error' }, 500);
+    }
+  });
+
+  pipeline.get('/stats/provider-mappings', async c => {
+    try {
+      const result = await pipelineService.getProviderMappingStats();
+      if (result.success) {
+        return c.json(result.data);
+      } else {
+        return c.json({ error: result.error }, 503);
+      }
+    } catch (error) {
+      logger.error('Error in GET /stats/provider-mappings', { error });
+      return c.json({ error: 'Internal server error' }, 500);
+    }
+  });
+
+  return pipeline;
+}

apps/stock/web-api/src/services/monitoring.service.ts

@@ -0,0 +1,356 @@
+/**
+ * Monitoring Service
+ * Collects health and performance metrics from all system components
+ */
+
+import type { IServiceContainer } from '@stock-bot/handlers';
+import { getLogger } from '@stock-bot/logger';
+import type { 
+  CacheStats, 
+  QueueStats, 
+  DatabaseStats, 
+  SystemHealth,
+  ServiceMetrics,
+  MetricSnapshot
+} from '../types/monitoring.types';
+
+export class MonitoringService {
+  private readonly logger = getLogger('monitoring-service');
+  private startTime = Date.now();
+
+  constructor(private readonly container: IServiceContainer) {}
+
+  /**
+   * Get cache/Dragonfly statistics
+   */
+  async getCacheStats(): Promise<CacheStats> {
+    try {
+      if (!this.container.cache) {
+        return {
+          provider: 'dragonfly',
+          connected: false,
+        };
+      }
+
+      // Get Redis/Dragonfly info
+      const info = await this.container.cache.info();
+      const dbSize = await this.container.cache.dbsize();
+      
+      // Parse memory stats from info
+      const memoryUsed = this.parseInfoValue(info, 'used_memory');
+      const memoryPeak = this.parseInfoValue(info, 'used_memory_peak');
+      
+      // Parse stats
+      const hits = this.parseInfoValue(info, 'keyspace_hits');
+      const misses = this.parseInfoValue(info, 'keyspace_misses');
+      const evictedKeys = this.parseInfoValue(info, 'evicted_keys');
+      const expiredKeys = this.parseInfoValue(info, 'expired_keys');
+      
+      return {
+        provider: 'dragonfly',
+        connected: true,
+        uptime: this.parseInfoValue(info, 'uptime_in_seconds'),
+        memoryUsage: {
+          used: memoryUsed,
+          peak: memoryPeak,
+        },
+        stats: {
+          hits,
+          misses,
+          keys: dbSize,
+          evictedKeys,
+          expiredKeys,
+        },
+        info: this.parseRedisInfo(info),
+      };
+    } catch (error) {
+      this.logger.error('Failed to get cache stats', { error });
+      return {
+        provider: 'dragonfly',
+        connected: false,
+      };
+    }
+  }
+
+  /**
+   * Get queue statistics
+   */
+  async getQueueStats(): Promise<QueueStats[]> {
+    const stats: QueueStats[] = [];
+    
+    try {
+      if (!this.container.queue) {
+        return stats;
+      }
+
+      // Get all queue names from the queue manager
+      const queueManager = this.container.queue;
+      const queueNames = ['default', 'proxy', 'qm', 'ib', 'ceo', 'webshare']; // Add your queue names
+      
+      for (const queueName of queueNames) {
+        try {
+          const queue = queueManager.getQueue(queueName);
+          if (!queue) continue;
+
+          const [waiting, active, completed, failed, delayed, paused] = await Promise.all([
+            queue.getWaitingCount(),
+            queue.getActiveCount(),
+            queue.getCompletedCount(),
+            queue.getFailedCount(),
+            queue.getDelayedCount(),
+            queue.getPausedCount(),
+          ]);
+
+          // Get worker info if available
+          const workers = queueManager.getWorker(queueName);
+          const workerInfo = workers ? {
+            count: 1, // Assuming single worker per queue
+            concurrency: workers.concurrency || 1,
+          } : undefined;
+
+          stats.push({
+            name: queueName,
+            connected: true,
+            jobs: {
+              waiting,
+              active,
+              completed,
+              failed,
+              delayed,
+              paused,
+            },
+            workers: workerInfo,
+          });
+        } catch (error) {
+          this.logger.warn(`Failed to get stats for queue ${queueName}`, { error });
+          stats.push({
+            name: queueName,
+            connected: false,
+            jobs: {
+              waiting: 0,
+              active: 0,
+              completed: 0,
+              failed: 0,
+              delayed: 0,
+              paused: 0,
+            },
+          });
+        }
+      }
+    } catch (error) {
+      this.logger.error('Failed to get queue stats', { error });
+    }
+
+    return stats;
+  }
+
+  /**
+   * Get database statistics
+   */
+  async getDatabaseStats(): Promise<DatabaseStats[]> {
+    const stats: DatabaseStats[] = [];
+
+    // PostgreSQL stats
+    if (this.container.postgres) {
+      try {
+        const startTime = Date.now();
+        const result = await this.container.postgres.query('SELECT 1');
+        const latency = Date.now() - startTime;
+
+        // Get pool stats
+        const pool = (this.container.postgres as any).pool;
+        const poolStats = pool ? {
+          size: pool.totalCount || 0,
+          active: pool.idleCount || 0,
+          idle: pool.waitingCount || 0,
+          max: pool.options?.max || 0,
+        } : undefined;
+
+        stats.push({
+          type: 'postgres',
+          name: 'PostgreSQL',
+          connected: true,
+          latency,
+          pool: poolStats,
+        });
+      } catch (error) {
+        this.logger.error('Failed to get PostgreSQL stats', { error });
+        stats.push({
+          type: 'postgres',
+          name: 'PostgreSQL',
+          connected: false,
+        });
+      }
+    }
+
+    // MongoDB stats
+    if (this.container.mongodb) {
+      try {
+        const startTime = Date.now();
+        const db = this.container.mongodb.db();
+        await db.admin().ping();
+        const latency = Date.now() - startTime;
+
+        const serverStatus = await db.admin().serverStatus();
+        
+        stats.push({
+          type: 'mongodb',
+          name: 'MongoDB',
+          connected: true,
+          latency,
+          stats: {
+            version: serverStatus.version,
+            uptime: serverStatus.uptime,
+            connections: serverStatus.connections,
+            opcounters: serverStatus.opcounters,
+          },
+        });
+      } catch (error) {
+        this.logger.error('Failed to get MongoDB stats', { error });
+        stats.push({
+          type: 'mongodb',
+          name: 'MongoDB',
+          connected: false,
+        });
+      }
+    }
+
+    // QuestDB stats
+    if (this.container.questdb) {
+      try {
+        const startTime = Date.now();
+        // QuestDB health check
+        const response = await fetch(`http://${process.env.QUESTDB_HOST || 'localhost'}:9000/exec?query=SELECT%201`);
+        const latency = Date.now() - startTime;
+        
+        stats.push({
+          type: 'questdb',
+          name: 'QuestDB',
+          connected: response.ok,
+          latency,
+        });
+      } catch (error) {
+        this.logger.error('Failed to get QuestDB stats', { error });
+        stats.push({
+          type: 'questdb',
+          name: 'QuestDB',
+          connected: false,
+        });
+      }
+    }
+
+    return stats;
+  }
+
+  /**
+   * Get system health summary
+   */
+  async getSystemHealth(): Promise<SystemHealth> {
+    const [cacheStats, queueStats, databaseStats] = await Promise.all([
+      this.getCacheStats(),
+      this.getQueueStats(),
+      this.getDatabaseStats(),
+    ]);
+
+    const memory = process.memoryUsage();
+    const uptime = Date.now() - this.startTime;
+
+    // Determine overall health status
+    const errors: string[] = [];
+    
+    if (!cacheStats.connected) {
+      errors.push('Cache service is disconnected');
+    }
+    
+    const disconnectedQueues = queueStats.filter(q => !q.connected);
+    if (disconnectedQueues.length > 0) {
+      errors.push(`${disconnectedQueues.length} queue(s) are disconnected`);
+    }
+    
+    const disconnectedDbs = databaseStats.filter(db => !db.connected);
+    if (disconnectedDbs.length > 0) {
+      errors.push(`${disconnectedDbs.length} database(s) are disconnected`);
+    }
+
+    const status = errors.length === 0 ? 'healthy' : 
+                   errors.length < 3 ? 'degraded' : 'unhealthy';
+
+    return {
+      status,
+      timestamp: new Date().toISOString(),
+      uptime,
+      memory: {
+        used: memory.heapUsed,
+        total: memory.heapTotal,
+        percentage: (memory.heapUsed / memory.heapTotal) * 100,
+      },
+      services: {
+        cache: cacheStats,
+        queues: queueStats,
+        databases: databaseStats,
+      },
+      errors: errors.length > 0 ? errors : undefined,
+    };
+  }
+
+  /**
+   * Get service metrics (placeholder for future implementation)
+   */
+  async getServiceMetrics(): Promise<ServiceMetrics> {
+    const now = new Date().toISOString();
+    
+    return {
+      requestsPerSecond: {
+        timestamp: now,
+        value: 0,
+        unit: 'req/s',
+      },
+      averageResponseTime: {
+        timestamp: now,
+        value: 0,
+        unit: 'ms',
+      },
+      errorRate: {
+        timestamp: now,
+        value: 0,
+        unit: '%',
+      },
+      activeConnections: {
+        timestamp: now,
+        value: 0,
+        unit: 'connections',
+      },
+    };
+  }
+
+  /**
+   * Parse value from Redis INFO output
+   */
+  private parseInfoValue(info: string, key: string): number {
+    const match = info.match(new RegExp(`${key}:(\\d+)`));
+    return match ? parseInt(match[1], 10) : 0;
+  }
+
+  /**
+   * Parse Redis INFO into structured object
+   */
+  private parseRedisInfo(info: string): Record<string, any> {
+    const result: Record<string, any> = {};
+    const sections = info.split('\r\n\r\n');
+    
+    for (const section of sections) {
+      const lines = section.split('\r\n');
+      const sectionName = lines[0]?.replace('# ', '') || 'general';
+      result[sectionName] = {};
+      
+      for (let i = 1; i < lines.length; i++) {
+        const [key, value] = lines[i].split(':');
+        if (key && value) {
+          result[sectionName][key] = value;
+        }
+      }
+    }
+    
+    return result;
+  }
+}

apps/stock/web-api/src/services/pipeline.service.ts

@@ -0,0 +1,335 @@
+/**
+ * Pipeline Service
+ * Manages data pipeline operations by queuing jobs for the data-pipeline service
+ */
+
+import type { IServiceContainer } from '@stock-bot/handlers';
+import { getLogger } from '@stock-bot/logger';
+
+const logger = getLogger('pipeline-service');
+
+export interface PipelineJobResult {
+  success: boolean;
+  jobId?: string;
+  message?: string;
+  error?: string;
+  data?: any;
+}
+
+export interface PipelineStatsResult {
+  success: boolean;
+  data?: any;
+  error?: string;
+}
+
+export class PipelineService {
+  constructor(private container: IServiceContainer) {}
+
+  /**
+   * Queue a job to sync symbols from QuestionsAndMethods
+   */
+  async syncQMSymbols(): Promise<PipelineJobResult> {
+    try {
+      const queueManager = this.container.queue;
+      if (!queueManager) {
+        return { success: false, error: 'Queue manager not available' };
+      }
+
+      const symbolsQueue = queueManager.getQueue('symbols');
+      const job = await symbolsQueue.addJob('sync-qm-symbols', {
+        handler: 'symbols',
+        operation: 'sync-qm-symbols',
+        payload: {},
+      });
+
+      logger.info('QM symbols sync job queued', { jobId: job.id });
+      return { success: true, jobId: job.id, message: 'QM symbols sync job queued' };
+    } catch (error) {
+      logger.error('Failed to queue QM symbols sync job', { error });
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to queue sync job',
+      };
+    }
+  }
+
+  /**
+   * Queue a job to sync exchanges from QuestionsAndMethods
+   */
+  async syncQMExchanges(): Promise<PipelineJobResult> {
+    try {
+      const queueManager = this.container.queue;
+      if (!queueManager) {
+        return { success: false, error: 'Queue manager not available' };
+      }
+
+      const exchangesQueue = queueManager.getQueue('exchanges');
+      const job = await exchangesQueue.addJob('sync-qm-exchanges', {
+        handler: 'exchanges',
+        operation: 'sync-qm-exchanges',
+        payload: {},
+      });
+
+      logger.info('QM exchanges sync job queued', { jobId: job.id });
+      return { success: true, jobId: job.id, message: 'QM exchanges sync job queued' };
+    } catch (error) {
+      logger.error('Failed to queue QM exchanges sync job', { error });
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to queue sync job',
+      };
+    }
+  }
+
+  /**
+   * Queue a job to sync symbols from a specific provider
+   */
+  async syncProviderSymbols(provider: string): Promise<PipelineJobResult> {
+    try {
+      const queueManager = this.container.queue;
+      if (!queueManager) {
+        return { success: false, error: 'Queue manager not available' };
+      }
+
+      const symbolsQueue = queueManager.getQueue('symbols');
+      const job = await symbolsQueue.addJob('sync-symbols-from-provider', {
+        handler: 'symbols',
+        operation: 'sync-symbols-from-provider',
+        payload: { provider },
+      });
+
+      logger.info(`${provider} symbols sync job queued`, { jobId: job.id, provider });
+      return {
+        success: true,
+        jobId: job.id,
+        message: `${provider} symbols sync job queued`,
+      };
+    } catch (error) {
+      logger.error('Failed to queue provider symbols sync job', { error, provider });
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to queue sync job',
+      };
+    }
+  }
+
+  /**
+   * Queue a job to sync all exchanges
+   */
+  async syncAllExchanges(clearFirst: boolean = false): Promise<PipelineJobResult> {
+    try {
+      const queueManager = this.container.queue;
+      if (!queueManager) {
+        return { success: false, error: 'Queue manager not available' };
+      }
+
+      const exchangesQueue = queueManager.getQueue('exchanges');
+      const job = await exchangesQueue.addJob('sync-all-exchanges', {
+        handler: 'exchanges',
+        operation: 'sync-all-exchanges',
+        payload: { clearFirst },
+      });
+
+      logger.info('Enhanced exchanges sync job queued', { jobId: job.id, clearFirst });
+      return {
+        success: true,
+        jobId: job.id,
+        message: 'Enhanced exchanges sync job queued',
+      };
+    } catch (error) {
+      logger.error('Failed to queue enhanced exchanges sync job', { error });
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to queue sync job',
+      };
+    }
+  }
+
+  /**
+   * Queue a job to sync QM provider mappings
+   */
+  async syncQMProviderMappings(): Promise<PipelineJobResult> {
+    try {
+      const queueManager = this.container.queue;
+      if (!queueManager) {
+        return { success: false, error: 'Queue manager not available' };
+      }
+
+      const exchangesQueue = queueManager.getQueue('exchanges');
+      const job = await exchangesQueue.addJob('sync-qm-provider-mappings', {
+        handler: 'exchanges',
+        operation: 'sync-qm-provider-mappings',
+        payload: {},
+      });
+
+      logger.info('QM provider mappings sync job queued', { jobId: job.id });
+      return {
+        success: true,
+        jobId: job.id,
+        message: 'QM provider mappings sync job queued',
+      };
+    } catch (error) {
+      logger.error('Failed to queue QM provider mappings sync job', { error });
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to queue sync job',
+      };
+    }
+  }
+
+  /**
+   * Queue a job to sync IB exchanges
+   */
+  async syncIBExchanges(): Promise<PipelineJobResult> {
+    try {
+      const queueManager = this.container.queue;
+      if (!queueManager) {
+        return { success: false, error: 'Queue manager not available' };
+      }
+
+      const exchangesQueue = queueManager.getQueue('exchanges');
+      const job = await exchangesQueue.addJob('sync-ib-exchanges', {
+        handler: 'exchanges',
+        operation: 'sync-ib-exchanges',
+        payload: {},
+      });
+
+      logger.info('IB exchanges sync job queued', { jobId: job.id });
+      return {
+        success: true,
+        jobId: job.id,
+        message: 'IB exchanges sync job queued',
+      };
+    } catch (error) {
+      logger.error('Failed to queue IB exchanges sync job', { error });
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to queue sync job',
+      };
+    }
+  }
+
+  /**
+   * Get sync status
+   */
+  async getSyncStatus(): Promise<PipelineJobResult> {
+    try {
+      const queueManager = this.container.queue;
+      if (!queueManager) {
+        return { success: false, error: 'Queue manager not available' };
+      }
+
+      const symbolsQueue = queueManager.getQueue('symbols');
+      const job = await symbolsQueue.addJob('sync-status', {
+        handler: 'symbols',
+        operation: 'sync-status',
+        payload: {},
+      });
+
+      logger.info('Sync status job queued', { jobId: job.id });
+      return {
+        success: true,
+        jobId: job.id,
+        message: 'Sync status job queued',
+      };
+    } catch (error) {
+      logger.error('Failed to queue sync status job', { error });
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to queue status job',
+      };
+    }
+  }
+
+  /**
+   * Clear PostgreSQL data
+   */
+  async clearPostgreSQLData(
+    dataType: 'exchanges' | 'provider_mappings' | 'all' = 'all'
+  ): Promise<PipelineJobResult> {
+    try {
+      const queueManager = this.container.queue;
+      if (!queueManager) {
+        return { success: false, error: 'Queue manager not available' };
+      }
+
+      const exchangesQueue = queueManager.getQueue('exchanges');
+      const job = await exchangesQueue.addJob('clear-postgresql-data', {
+        handler: 'exchanges',
+        operation: 'clear-postgresql-data',
+        payload: { dataType },
+      });
+
+      logger.info('PostgreSQL data clear job queued', { jobId: job.id, dataType });
+      return {
+        success: true,
+        jobId: job.id,
+        message: 'PostgreSQL data clear job queued',
+      };
+    } catch (error) {
+      logger.error('Failed to queue PostgreSQL clear job', { error });
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to queue clear job',
+      };
+    }
+  }
+
+  /**
+   * Get exchange statistics (waits for result)
+   */
+  async getExchangeStats(): Promise<PipelineStatsResult> {
+    try {
+      const queueManager = this.container.queue;
+      if (!queueManager) {
+        return { success: false, error: 'Queue manager not available' };
+      }
+
+      const exchangesQueue = queueManager.getQueue('exchanges');
+      const job = await exchangesQueue.addJob('get-exchange-stats', {
+        handler: 'exchanges',
+        operation: 'get-exchange-stats',
+        payload: {},
+      });
+
+      // Wait for job to complete and return result
+      const result = await job.waitUntilFinished();
+      return { success: true, data: result };
+    } catch (error) {
+      logger.error('Failed to get exchange stats', { error });
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to get stats',
+      };
+    }
+  }
+
+  /**
+   * Get provider mapping statistics (waits for result)
+   */
+  async getProviderMappingStats(): Promise<PipelineStatsResult> {
+    try {
+      const queueManager = this.container.queue;
+      if (!queueManager) {
+        return { success: false, error: 'Queue manager not available' };
+      }
+
+      const exchangesQueue = queueManager.getQueue('exchanges');
+      const job = await exchangesQueue.addJob('get-provider-mapping-stats', {
+        handler: 'exchanges',
+        operation: 'get-provider-mapping-stats',
+        payload: {},
+      });
+
+      // Wait for job to complete and return result
+      const result = await job.waitUntilFinished();
+      return { success: true, data: result };
+    } catch (error) {
+      logger.error('Failed to get provider mapping stats', { error });
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to get stats',
+      };
+    }
+  }
+}

apps/stock/web-api/src/types/monitoring.types.ts

@@ -0,0 +1,93 @@
+/**
+ * Monitoring types for system health and metrics
+ */
+
+export interface CacheStats {
+  provider: string;
+  connected: boolean;
+  uptime?: number;
+  memoryUsage?: {
+    used: number;
+    peak: number;
+    total?: number;
+  };
+  stats?: {
+    hits: number;
+    misses: number;
+    keys: number;
+    evictedKeys?: number;
+    expiredKeys?: number;
+  };
+  info?: Record<string, any>;
+}
+
+export interface QueueStats {
+  name: string;
+  connected: boolean;
+  jobs: {
+    waiting: number;
+    active: number;
+    completed: number;
+    failed: number;
+    delayed: number;
+    paused: number;
+  };
+  workers?: {
+    count: number;
+    concurrency: number;
+  };
+  throughput?: {
+    processed: number;
+    failed: number;
+    avgProcessingTime?: number;
+  };
+}
+
+export interface DatabaseStats {
+  type: 'postgres' | 'mongodb' | 'questdb';
+  name: string;
+  connected: boolean;
+  latency?: number;
+  pool?: {
+    size: number;
+    active: number;
+    idle: number;
+    waiting?: number;
+    max: number;
+  };
+  stats?: Record<string, any>;
+}
+
+export interface SystemHealth {
+  status: 'healthy' | 'degraded' | 'unhealthy';
+  timestamp: string;
+  uptime: number;
+  memory: {
+    used: number;
+    total: number;
+    percentage: number;
+  };
+  cpu?: {
+    usage: number;
+    loadAverage?: number[];
+  };
+  services: {
+    cache: CacheStats;
+    queues: QueueStats[];
+    databases: DatabaseStats[];
+  };
+  errors?: string[];
+}
+
+export interface MetricSnapshot {
+  timestamp: string;
+  value: number;
+  unit?: string;
+}
+
+export interface ServiceMetrics {
+  requestsPerSecond: MetricSnapshot;
+  averageResponseTime: MetricSnapshot;
+  errorRate: MetricSnapshot;
+  activeConnections: MetricSnapshot;
+}

apps/stock/web-app/.env

@@ -1,5 +1,5 @@
 # API Configuration
-VITE_API_BASE_URL=http://localhost:4000/api
+VITE_API_BASE_URL=http://localhost:2003
 VITE_DATA_SERVICE_URL=http://localhost:3001
 VITE_PORTFOLIO_SERVICE_URL=http://localhost:3002
 VITE_STRATEGY_SERVICE_URL=http://localhost:3003

apps/stock/web-app/.env.example

@@ -1,9 +1,12 @@
 # API Configuration
-VITE_API_BASE_URL=http://localhost:8080
+# Web API service URL (default port: 2003)
+VITE_API_BASE_URL=http://localhost:2003
+
+# Other services (if needed in the future)
 VITE_DATA_SERVICE_URL=http://localhost:3001
 VITE_PORTFOLIO_SERVICE_URL=http://localhost:3002
 VITE_STRATEGY_SERVICE_URL=http://localhost:3003
 VITE_EXECUTION_SERVICE_URL=http://localhost:3004
 
 # Environment
-VITE_NODE_ENV=development
+VITE_NODE_ENV=development

apps/stock/web-app/src/app/App.tsx

@@ -1,6 +1,8 @@
 import { Layout } from '@/components/layout';
 import { DashboardPage } from '@/features/dashboard';
 import { ExchangesPage } from '@/features/exchanges';
+import { MonitoringPage } from '@/features/monitoring';
+import { PipelinePage } from '@/features/pipeline';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 
 export function App() {
@@ -24,6 +26,8 @@ export function App() {
             element={<div className="p-4">Analytics Page - Coming Soon</div>}
           />
           <Route path="settings" element={<div className="p-4">Settings Page - Coming Soon</div>} />
+          <Route path="system/monitoring" element={<MonitoringPage />} />
+          <Route path="system/pipeline" element={<PipelinePage />} />
         </Route>
       </Routes>
     </BrowserRouter>

apps/stock/web-app/src/components/layout/Layout.tsx

@@ -10,7 +10,17 @@ export function Layout() {
   // Determine title from current route
   const getTitle = () => {
     const path = location.pathname.replace('/', '');
-    if (!path || path === 'dashboard') {return 'Dashboard';}
+    if (!path || path === 'dashboard') return 'Dashboard';
+    
+    // Handle nested routes
+    if (path.includes('/')) {
+      const parts = path.split('/');
+      // For system routes, show the sub-page name
+      if (parts[0] === 'system' && parts[1]) {
+        return parts[1].charAt(0).toUpperCase() + parts[1].slice(1);
+      }
+    }
+    
     return path.charAt(0).toUpperCase() + path.slice(1);
   };
 

apps/stock/web-app/src/components/layout/Sidebar.tsx

@@ -1,9 +1,9 @@
 import { navigation } from '@/lib/constants';
 import { cn } from '@/lib/utils';
 import { Dialog, Transition } from '@headlessui/react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import { Fragment } from 'react';
-import { NavLink } from 'react-router-dom';
+import { XMarkIcon, ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { Fragment, useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -76,6 +76,35 @@ export function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
 }
 
 function SidebarContent() {
+  const location = useLocation();
+  
+  // Auto-expand items that have active children
+  const getInitialExpanded = () => {
+    const expanded = new Set<string>();
+    navigation.forEach(item => {
+      if (item.children && item.children.some(child => location.pathname === child.href)) {
+        expanded.add(item.name);
+      }
+    });
+    return expanded;
+  };
+  
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(getInitialExpanded());
+
+  const toggleExpanded = (name: string) => {
+    const newExpanded = new Set(expandedItems);
+    if (newExpanded.has(name)) {
+      newExpanded.delete(name);
+    } else {
+      newExpanded.add(name);
+    }
+    setExpandedItems(newExpanded);
+  };
+
+  const isChildActive = (children: any[]) => {
+    return children.some(child => location.pathname === child.href);
+  };
+
   return (
     <div className="flex grow flex-col gap-y-3 overflow-y-auto border-r border-border bg-background px-3">
       <div className="flex h-12 shrink-0 items-center border-b border-border">
@@ -87,32 +116,96 @@ function SidebarContent() {
             <ul role="list" className="-mx-1 space-y-0.5">
               {navigation.map(item => (
                 <li key={item.name}>
-                  <NavLink
-                    to={item.href}
-                    className={({ isActive }) =>
-                      cn(
-                        isActive
-                          ? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
-                          : 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
-                        'group flex gap-x-2 rounded-r-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors'
-                      )
-                    }
-                  >
-                    {({ isActive }) => (
-                      <>
+                  {item.children ? (
+                    <>
+                      <button
+                        onClick={() => toggleExpanded(item.name)}
+                        className={cn(
+                          isChildActive(item.children)
+                            ? 'bg-surface-secondary text-primary-400'
+                            : 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
+                          'group flex w-full gap-x-2 rounded-r-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors'
+                        )}
+                      >
                         <item.icon
                           className={cn(
-                            isActive
+                            isChildActive(item.children)
                               ? 'text-primary-400'
                               : 'text-text-muted group-hover:text-primary-400',
                             'h-4 w-4 shrink-0 transition-colors'
                           )}
                           aria-hidden="true"
                         />
-                        {item.name}
-                      </>
-                    )}
-                  </NavLink>
+                        <span className="flex-1 text-left">{item.name}</span>
+                        {expandedItems.has(item.name) ? (
+                          <ChevronDownIcon className="h-3 w-3 text-text-muted" />
+                        ) : (
+                          <ChevronRightIcon className="h-3 w-3 text-text-muted" />
+                        )}
+                      </button>
+                      {expandedItems.has(item.name) && (
+                        <ul className="mt-1 space-y-0.5 pl-8">
+                          {item.children.map(child => (
+                            <li key={child.name}>
+                              <NavLink
+                                to={child.href!}
+                                className={({ isActive }) =>
+                                  cn(
+                                    isActive
+                                      ? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
+                                      : 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
+                                    'group flex gap-x-2 rounded-r-md px-2 py-1 text-sm leading-tight font-medium transition-colors'
+                                  )
+                                }
+                              >
+                                {({ isActive }) => (
+                                  <>
+                                    <child.icon
+                                      className={cn(
+                                        isActive
+                                          ? 'text-primary-400'
+                                          : 'text-text-muted group-hover:text-primary-400',
+                                        'h-3 w-3 shrink-0 transition-colors'
+                                      )}
+                                      aria-hidden="true"
+                                    />
+                                    {child.name}
+                                  </>
+                                )}
+                              </NavLink>
+                            </li>
+                          ))}
+                        </ul>
+                      )}
+                    </>
+                  ) : (
+                    <NavLink
+                      to={item.href!}
+                      className={({ isActive }) =>
+                        cn(
+                          isActive
+                            ? 'bg-surface-secondary text-primary-400 border-l-2 border-primary-500'
+                            : 'text-text-secondary hover:text-primary-400 hover:bg-surface-secondary',
+                          'group flex gap-x-2 rounded-r-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors'
+                        )
+                      }
+                    >
+                      {({ isActive }) => (
+                        <>
+                          <item.icon
+                            className={cn(
+                              isActive
+                                ? 'text-primary-400'
+                                : 'text-text-muted group-hover:text-primary-400',
+                              'h-4 w-4 shrink-0 transition-colors'
+                            )}
+                            aria-hidden="true"
+                          />
+                          {item.name}
+                        </>
+                      )}
+                    </NavLink>
+                  )}
                 </li>
               ))}
             </ul>

apps/stock/web-app/src/components/ui/DataTable/DataTable.tsx

@@ -1,15 +1,13 @@
 import { cn } from '@/lib/utils';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import {
-  ColumnDef,
   flexRender,
   getCoreRowModel,
   getExpandedRowModel,
   getSortedRowModel,
-  Row,
-  SortingState,
   useReactTable,
 } from '@tanstack/react-table';
+import type { ColumnDef, Row, SortingState } from '@tanstack/react-table';
 import { useState, useRef } from 'react';
 import { TableVirtuoso } from 'react-virtuoso';
 

apps/stock/web-app/src/features/dashboard/components/PortfolioTable.tsx

@@ -1,5 +1,5 @@
 import { DataTable } from '@/components/ui';
-import { ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef } from '@tanstack/react-table';
 import React from 'react';
 
 interface PortfolioItem {

apps/stock/web-app/src/features/exchanges/components/AddExchangeDialog.tsx

@@ -1,8 +1,8 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle, Button } from '@/components/ui';
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui';
 import { useCallback } from 'react';
-import { CreateExchangeRequest, AddExchangeDialogProps } from '../types';
-import { validateExchangeForm } from '../utils/validation';
 import { useFormValidation } from '../hooks/useFormValidation';
+import type { AddExchangeDialogProps, CreateExchangeRequest } from '../types';
+import { validateExchangeForm } from '../utils/validation';
 
 const initialFormData: CreateExchangeRequest = {
   code: '',

apps/stock/web-app/src/features/exchanges/components/AddProviderMappingDialog.tsx

@@ -1,7 +1,7 @@
 import { Dialog, DialogContent, DialogHeader, DialogTitle, Button } from '@/components/ui';
 import { useCallback, useEffect, useState } from 'react';
 import { useExchanges } from '../hooks/useExchanges';
-import { CreateProviderMappingRequest } from '../types';
+import type { CreateProviderMappingRequest } from '../types/index';
 
 interface AddProviderMappingDialogProps {
   isOpen: boolean;

apps/stock/web-app/src/features/exchanges/components/AddSourceDialog.tsx

@@ -1,216 +0,0 @@
-import { Dialog, Transition } from '@headlessui/react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import React, { useState } from 'react';
-import { AddSourceRequest } from '../types';
-
-interface AddSourceDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onAddSource: (request: AddSourceRequest) => Promise<void>;
-  exchangeId: string;
-  exchangeName: string;
-}
-
-export function AddSourceDialog({
-  isOpen,
-  onClose,
-  onAddSource,
-  exchangeName,
-}: AddSourceDialogProps) {
-  const [source, setSource] = useState('');
-  const [sourceCode, setSourceCode] = useState('');
-  const [id, setId] = useState('');
-  const [name, setName] = useState('');
-  const [code, setCode] = useState('');
-  const [aliases, setAliases] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!source || !sourceCode || !id || !name || !code) {return;}
-
-    setLoading(true);
-    try {
-      await onAddSource({
-        source,
-        source_code: sourceCode,
-        mapping: {
-          id,
-          name,
-          code,
-          aliases: aliases
-            .split(',')
-            .map(a => a.trim())
-            .filter(Boolean),
-        },
-      });
-
-      // Reset form
-      setSource('');
-      setSourceCode('');
-      setId('');
-      setName('');
-      setCode('');
-      setAliases('');
-    } catch (_error) {
-      // TODO: Implement proper error handling/toast notification
-      // eslint-disable-next-line no-console
-      console.error('Error adding source:', _error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Transition appear show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-50" onClose={onClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black bg-opacity-25" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-lg bg-background border border-border p-6 text-left align-middle shadow-xl transition-all">
-                <div className="flex items-center justify-between mb-4">
-                  <Dialog.Title className="text-lg font-medium text-text-primary">
-                    Add Source to {exchangeName}
-                  </Dialog.Title>
-                  <button
-                    onClick={onClose}
-                    className="text-text-muted hover:text-text-primary transition-colors"
-                  >
-                    <XMarkIcon className="h-5 w-5" />
-                  </button>
-                </div>
-
-                <form onSubmit={handleSubmit} className="space-y-4">
-                  <div>
-                    <label className="block text-sm font-medium text-text-primary mb-1">
-                      Source Provider
-                    </label>
-                    <select
-                      value={source}
-                      onChange={e => setSource(e.target.value)}
-                      className="w-full bg-surface border border-border rounded px-3 py-2 text-text-primary focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
-                      required
-                    >
-                      <option value="">Select a source</option>
-                      <option value="ib">Interactive Brokers</option>
-                      <option value="alpaca">Alpaca</option>
-                      <option value="polygon">Polygon</option>
-                      <option value="yahoo">Yahoo Finance</option>
-                      <option value="alpha_vantage">Alpha Vantage</option>
-                    </select>
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-text-primary mb-1">
-                      Source Code
-                    </label>
-                    <input
-                      type="text"
-                      value={sourceCode}
-                      onChange={e => setSourceCode(e.target.value)}
-                      className="w-full bg-surface border border-border rounded px-3 py-2 text-text-primary focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
-                      placeholder="e.g., IB, ALP, POLY"
-                      required
-                    />
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-text-primary mb-1">
-                      Source ID
-                    </label>
-                    <input
-                      type="text"
-                      value={id}
-                      onChange={e => setId(e.target.value)}
-                      className="w-full bg-surface border border-border rounded px-3 py-2 text-text-primary focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
-                      placeholder="e.g., NYSE, NASDAQ"
-                      required
-                    />
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-text-primary mb-1">
-                      Source Name
-                    </label>
-                    <input
-                      type="text"
-                      value={name}
-                      onChange={e => setName(e.target.value)}
-                      className="w-full bg-surface border border-border rounded px-3 py-2 text-text-primary focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
-                      placeholder="e.g., New York Stock Exchange"
-                      required
-                    />
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-text-primary mb-1">
-                      Source Code
-                    </label>
-                    <input
-                      type="text"
-                      value={code}
-                      onChange={e => setCode(e.target.value)}
-                      className="w-full bg-surface border border-border rounded px-3 py-2 text-text-primary focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
-                      placeholder="e.g., NYSE"
-                      required
-                    />
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-text-primary mb-1">
-                      Aliases (comma-separated)
-                    </label>
-                    <input
-                      type="text"
-                      value={aliases}
-                      onChange={e => setAliases(e.target.value)}
-                      className="w-full bg-surface border border-border rounded px-3 py-2 text-text-primary focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
-                      placeholder="e.g., NYSE, New York, Big Board"
-                    />
-                  </div>
-
-                  <div className="flex justify-end space-x-3 pt-4">
-                    <button
-                      type="button"
-                      onClick={onClose}
-                      className="px-4 py-2 border border-border text-text-secondary hover:text-text-primary hover:bg-surface-secondary rounded transition-colors"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      type="submit"
-                      disabled={loading || !source || !sourceCode || !id || !name || !code}
-                      className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                    >
-                      {loading ? 'Adding...' : 'Add Source'}
-                    </button>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  );
-}

apps/stock/web-app/src/features/exchanges/components/ExchangesTable.tsx

@@ -1,12 +1,12 @@
 import { DataTable } from '@/components/ui';
 import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
-import { ColumnDef } from '@tanstack/react-table';
+import type { ColumnDef } from '@tanstack/react-table';
 import { useCallback, useMemo, useState } from 'react';
 import { useExchanges } from '../hooks/useExchanges';
-import { Exchange, EditingCell, AddProviderMappingDialogState, DeleteDialogState } from '../types';
+import type { AddProviderMappingDialogState, DeleteDialogState, EditingCell, Exchange } from '../types';
+import { formatDate, formatProviderMapping, getProviderMappingColor, sortProviderMappings } from '../utils/formatters';
 import { AddProviderMappingDialog } from './AddProviderMappingDialog';
 import { DeleteExchangeDialog } from './DeleteExchangeDialog';
-import { sortProviderMappings, getProviderMappingColor, formatProviderMapping, formatDate } from '../utils/formatters';
 
 export function ExchangesTable() {
   const { 
@@ -235,7 +235,7 @@ export function ExchangesTable() {
         cell: ({ getValue, row }) => {
           const totalMappings = parseInt(getValue() as string) || 0;
           const activeMappings = parseInt(row.original.active_mapping_count) || 0;
-          const _verifiedMappings = parseInt(row.original.verified_mapping_count) || 0;
+          // const _verifiedMappings = parseInt(row.original.verified_mapping_count) || 0;
           
           // Get provider mappings directly from the exchange data
           const mappings = row.original.provider_mappings || [];
@@ -329,7 +329,7 @@ export function ExchangesTable() {
         <h3 className="text-danger font-medium mb-2">Error Loading Exchanges</h3>
         <p className="text-text-secondary text-sm">{error}</p>
         <p className="text-text-muted text-xs mt-2">
-          Make sure the web-api service is running on localhost:4000
+          Make sure the web-api service is running on localhost:2003
         </p>
       </div>
     );

apps/stock/web-app/src/features/exchanges/components/index.ts

@@ -1,4 +1,4 @@
-export { AddSourceDialog } from './AddSourceDialog';
+
 export { AddProviderMappingDialog } from './AddProviderMappingDialog';
 export { AddExchangeDialog } from './AddExchangeDialog';
 export { DeleteExchangeDialog } from './DeleteExchangeDialog';

apps/stock/web-app/src/features/exchanges/hooks/useExchanges.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { exchangeApi } from '../services/exchangeApi';
-import {
+import type {
   CreateExchangeRequest,
   CreateProviderMappingRequest,
   Exchange,
@@ -10,7 +10,7 @@ import {
   ProviderMapping,
   UpdateExchangeRequest,
   UpdateProviderMappingRequest,
-} from '../types';
+} from '../types/index';
 
 export function useExchanges() {
   const [exchanges, setExchanges] = useState<Exchange[]>([]);

apps/stock/web-app/src/features/exchanges/hooks/useFormValidation.ts

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { FormErrors } from '../types';
+import type { FormErrors } from '../types';
 
 export function useFormValidation<T>(initialData: T, validateFn: (data: T) => FormErrors) {
   const [formData, setFormData] = useState<T>(initialData);

apps/stock/web-app/src/features/exchanges/services/exchangeApi.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   ApiResponse,
   CreateExchangeRequest,
   CreateProviderMappingRequest,
@@ -9,13 +9,13 @@ import {
   ProviderMapping,
   UpdateExchangeRequest,
   UpdateProviderMappingRequest,
-} from '../types';
+} from '../types/index';
 
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000/api';
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:2003';
 
 class ExchangeApiService {
   private async request<T>(endpoint: string, options?: RequestInit): Promise<ApiResponse<T>> {
-    const url = `${API_BASE_URL}${endpoint}`;
+    const url = `${API_BASE_URL}/api${endpoint}`;
 
     const response = await fetch(url, {
       headers: {

apps/stock/web-app/src/features/exchanges/types/index.ts

@@ -1,7 +1,154 @@
-// Re-export all types from organized files
-export * from './api.types';
-export * from './request.types';
-export * from './component.types';
+// API Response types
+export interface ApiResponse<T = unknown> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  message?: string;
+  total?: number;
+}
+
+// Base entity types
+export interface BaseEntity {
+  id: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ProviderMapping extends BaseEntity {
+  provider: string;
+  provider_exchange_code: string;
+  provider_exchange_name: string;
+  master_exchange_id: string;
+  country_code: string | null;
+  currency: string | null;
+  confidence: number;
+  active: boolean;
+  verified: boolean;
+  auto_mapped: boolean;
+  master_exchange_code?: string;
+  master_exchange_name?: string;
+  master_exchange_active?: boolean;
+}
+
+export interface Exchange extends BaseEntity {
+  code: string;
+  name: string;
+  country: string;
+  currency: string;
+  active: boolean;
+  visible: boolean;
+  provider_mapping_count: string;
+  active_mapping_count: string;
+  verified_mapping_count: string;
+  providers: string | null;
+  provider_mappings: ProviderMapping[];
+}
+
+export interface ExchangeDetails {
+  exchange: Exchange;
+  provider_mappings: ProviderMapping[];
+}
+
+export interface ProviderExchange {
+  provider_exchange_code: string;
+  provider_exchange_name: string;
+  country_code: string | null;
+  currency: string | null;
+  symbol_count: number | null;
+}
+
+export interface ExchangeStats {
+  total_exchanges: string;
+  active_exchanges: string;
+  countries: string;
+  currencies: string;
+  total_provider_mappings: string;
+  active_provider_mappings: string;
+  verified_provider_mappings: string;
+  providers: string;
+}
+
+// Request types for API calls
+export interface CreateExchangeRequest {
+  code: string;
+  name: string;
+  country: string;
+  currency: string;
+  active?: boolean;
+}
+
+export interface UpdateExchangeRequest {
+  name?: string;
+  active?: boolean;
+  visible?: boolean;
+  country?: string;
+  currency?: string;
+}
+
+export interface CreateProviderMappingRequest {
+  provider: string;
+  provider_exchange_code: string;
+  provider_exchange_name?: string;
+  master_exchange_id: string;
+  country_code?: string;
+  currency?: string;
+  confidence?: number;
+  active?: boolean;
+  verified?: boolean;
+}
+
+export interface UpdateProviderMappingRequest {
+  active?: boolean;
+  verified?: boolean;
+  confidence?: number;
+  master_exchange_id?: string;
+}
+
+// Component-specific types
+export interface EditingCell {
+  id: string;
+  field: string;
+}
+
+export interface AddProviderMappingDialogState {
+  exchangeId: string;
+  exchangeName: string;
+}
+
+export interface DeleteDialogState {
+  exchangeId: string;
+  exchangeName: string;
+  providerMappingCount: number;
+}
+
+export interface FormErrors {
+  [key: string]: string;
+}
+
+// Dialog props interfaces
+export interface BaseDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export interface AddExchangeDialogProps extends BaseDialogProps {
+  onCreateExchange: (request: CreateExchangeRequest) => Promise<void>;
+}
+
+export interface AddProviderMappingDialogProps extends BaseDialogProps {
+  exchangeId: string;
+  exchangeName: string;
+  onCreateMapping: (
+    request: CreateProviderMappingRequest
+  ) => Promise<unknown>;
+}
+
+export interface DeleteExchangeDialogProps extends BaseDialogProps {
+  exchangeId: string;
+  exchangeName: string;
+  providerMappingCount: number;
+  onConfirmDelete: (exchangeId: string) => Promise<boolean>;
+}
 
 // Legacy compatibility - can be removed later
-export type ExchangesApiResponse<T = unknown> = import('./api.types').ApiResponse<T>;
+export type ExchangesApiResponse<T = unknown> = ApiResponse<T>;

apps/stock/web-app/src/features/exchanges/utils/formatters.ts

@@ -1,4 +1,4 @@
-import { ProviderMapping } from '../types';
+import type { ProviderMapping } from '../types';
 
 export function formatDate(dateString: string): string {
   return new Date(dateString).toLocaleDateString();

apps/stock/web-app/src/features/exchanges/utils/validation.ts

@@ -1,4 +1,4 @@
-import { FormErrors } from '../types';
+import type { FormErrors } from '../types';
 
 export function validateExchangeForm(data: {
   code: string;

apps/stock/web-app/src/features/monitoring/MonitoringPage.tsx

@@ -0,0 +1,104 @@
+/**
+ * System Monitoring Page
+ */
+
+import React, { useState } from 'react';
+import { useSystemHealth, useCacheStats, useQueueStats, useDatabaseStats } from './hooks';
+import { SystemHealthCard, CacheStatsCard, QueueStatsTable, DatabaseStatsGrid } from './components';
+
+export function MonitoringPage() {
+  const [refreshInterval, setRefreshInterval] = useState(5000); // 5 seconds default
+  
+  const { data: health, loading: healthLoading, error: healthError } = useSystemHealth(refreshInterval);
+  const { data: cache, loading: cacheLoading, error: cacheError } = useCacheStats(refreshInterval);
+  const { data: queues, loading: queuesLoading, error: queuesError } = useQueueStats(refreshInterval);
+  const { data: databases, loading: dbLoading, error: dbError } = useDatabaseStats(refreshInterval);
+
+  const handleRefreshIntervalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setRefreshInterval(Number(e.target.value));
+  };
+
+  if (healthLoading || cacheLoading || queuesLoading || dbLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">Loading monitoring data...</p>
+        </div>
+      </div>
+    );
+  }
+
+  const hasErrors = healthError || cacheError || queuesError || dbError;
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold">System Monitoring</h1>
+          <div className="flex items-center space-x-4">
+            <div className="flex items-center space-x-2">
+              <label htmlFor="refresh-interval" className="text-sm text-gray-600">
+                Refresh interval:
+              </label>
+              <select
+                id="refresh-interval"
+                value={refreshInterval}
+                onChange={handleRefreshIntervalChange}
+                className="text-sm border rounded px-2 py-1"
+              >
+                <option value={0}>Manual</option>
+                <option value={5000}>5 seconds</option>
+                <option value={10000}>10 seconds</option>
+                <option value={30000}>30 seconds</option>
+                <option value={60000}>1 minute</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {hasErrors && (
+        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
+          <h3 className="font-semibold text-red-800 mb-2">Errors occurred while fetching data:</h3>
+          <ul className="list-disc list-inside text-sm text-red-700 space-y-1">
+            {healthError && <li>System Health: {healthError}</li>}
+            {cacheError && <li>Cache Stats: {cacheError}</li>}
+            {queuesError && <li>Queue Stats: {queuesError}</li>}
+            {dbError && <li>Database Stats: {dbError}</li>}
+          </ul>
+        </div>
+      )}
+
+      <div className="space-y-6">
+        {/* System Health */}
+        {health && (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-1">
+              <SystemHealthCard health={health} />
+            </div>
+            <div className="lg:col-span-2">
+              {cache && <CacheStatsCard stats={cache} />}
+            </div>
+          </div>
+        )}
+
+        {/* Database Stats */}
+        {databases && databases.length > 0 && (
+          <div>
+            <h2 className="text-xl font-semibold mb-4">Database Connections</h2>
+            <DatabaseStatsGrid databases={databases} />
+          </div>
+        )}
+
+        {/* Queue Stats */}
+        {queues && queues.length > 0 && (
+          <div>
+            <h2 className="text-xl font-semibold mb-4">Queue Status</h2>
+            <QueueStatsTable queues={queues} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/stock/web-app/src/features/monitoring/components/CacheStatsCard.tsx

@@ -0,0 +1,96 @@
+/**
+ * Cache Statistics Card Component
+ */
+
+import React from 'react';
+import { Card } from '../../../components/ui/Card';
+import type { CacheStats } from '../types';
+
+interface CacheStatsCardProps {
+  stats: CacheStats;
+}
+
+export function CacheStatsCard({ stats }: CacheStatsCardProps) {
+  const formatBytes = (bytes: number) => {
+    const mb = bytes / 1024 / 1024;
+    return mb.toFixed(2) + ' MB';
+  };
+
+  const hitRate = stats.stats && (stats.stats.hits + stats.stats.misses) > 0
+    ? (stats.stats.hits / (stats.stats.hits + stats.stats.misses) * 100).toFixed(1)
+    : '0';
+
+  return (
+    <Card className="p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold">Cache (Dragonfly)</h3>
+        <span className={`px-2 py-1 rounded text-xs font-medium ${
+          stats.connected ? 'text-green-600 bg-green-100' : 'text-red-600 bg-red-100'
+        }`}>
+          {stats.connected ? 'Connected' : 'Disconnected'}
+        </span>
+      </div>
+
+      {stats.connected ? (
+        <div className="space-y-4">
+          {stats.memoryUsage && (
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <div className="text-sm text-gray-600">Memory Used</div>
+                <div className="text-xl font-semibold">{formatBytes(stats.memoryUsage.used)}</div>
+              </div>
+              <div>
+                <div className="text-sm text-gray-600">Peak Memory</div>
+                <div className="text-xl font-semibold">{formatBytes(stats.memoryUsage.peak)}</div>
+              </div>
+            </div>
+          )}
+
+          {stats.stats && (
+            <>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <div className="text-sm text-gray-600">Hit Rate</div>
+                  <div className="text-xl font-semibold">{hitRate}%</div>
+                </div>
+                <div>
+                  <div className="text-sm text-gray-600">Total Keys</div>
+                  <div className="text-xl font-semibold">{stats.stats.keys.toLocaleString()}</div>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <span className="text-gray-600">Hits:</span> {stats.stats.hits.toLocaleString()}
+                </div>
+                <div>
+                  <span className="text-gray-600">Misses:</span> {stats.stats.misses.toLocaleString()}
+                </div>
+                {stats.stats.evictedKeys !== undefined && (
+                  <div>
+                    <span className="text-gray-600">Evicted:</span> {stats.stats.evictedKeys.toLocaleString()}
+                  </div>
+                )}
+                {stats.stats.expiredKeys !== undefined && (
+                  <div>
+                    <span className="text-gray-600">Expired:</span> {stats.stats.expiredKeys.toLocaleString()}
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+
+          {stats.uptime && (
+            <div className="text-sm text-gray-600">
+              Uptime: {Math.floor(stats.uptime / 3600)}h {Math.floor((stats.uptime % 3600) / 60)}m
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="text-center py-8 text-gray-500">
+          Cache service is not available
+        </div>
+      )}
+    </Card>
+  );
+}

apps/stock/web-app/src/features/monitoring/components/DatabaseStatsGrid.tsx

@@ -0,0 +1,104 @@
+/**
+ * Database Statistics Grid Component
+ */
+
+import React from 'react';
+import { Card } from '../../../components/ui/Card';
+import type { DatabaseStats } from '../types';
+
+interface DatabaseStatsGridProps {
+  databases: DatabaseStats[];
+}
+
+export function DatabaseStatsGrid({ databases }: DatabaseStatsGridProps) {
+  const getDbIcon = (type: string) => {
+    switch (type) {
+      case 'postgres':
+        return '🐘';
+      case 'mongodb':
+        return '🍃';
+      case 'questdb':
+        return '⚡';
+      default:
+        return '💾';
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      {databases.map((db) => (
+        <Card key={db.type} className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center space-x-2">
+              <span className="text-2xl">{getDbIcon(db.type)}</span>
+              <h4 className="font-semibold">{db.name}</h4>
+            </div>
+            <span className={`px-2 py-1 rounded text-xs font-medium ${
+              db.connected ? 'text-green-600 bg-green-100' : 'text-red-600 bg-red-100'
+            }`}>
+              {db.connected ? 'Connected' : 'Disconnected'}
+            </span>
+          </div>
+
+          {db.connected ? (
+            <div className="space-y-3">
+              {db.latency !== undefined && (
+                <div>
+                  <div className="text-sm text-gray-600">Latency</div>
+                  <div className="text-lg font-semibold">{db.latency}ms</div>
+                </div>
+              )}
+
+              {db.pool && (
+                <div>
+                  <div className="text-sm text-gray-600 mb-1">Connection Pool</div>
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    <div>
+                      <span className="text-gray-600">Active:</span> {db.pool.active}
+                    </div>
+                    <div>
+                      <span className="text-gray-600">Idle:</span> {db.pool.idle}
+                    </div>
+                    <div>
+                      <span className="text-gray-600">Size:</span> {db.pool.size}
+                    </div>
+                    <div>
+                      <span className="text-gray-600">Max:</span> {db.pool.max}
+                    </div>
+                  </div>
+                  
+                  {db.pool.max > 0 && (
+                    <div className="mt-2">
+                      <div className="w-full bg-gray-200 rounded-full h-2">
+                        <div
+                          className="bg-blue-600 h-2 rounded-full"
+                          style={{ width: `${(db.pool.size / db.pool.max) * 100}%` }}
+                        />
+                      </div>
+                      <div className="text-xs text-gray-500 mt-1">
+                        {((db.pool.size / db.pool.max) * 100).toFixed(0)}% utilized
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {db.type === 'mongodb' && db.stats && (
+                <div className="text-xs text-gray-600">
+                  <div>Version: {db.stats.version}</div>
+                  {db.stats.connections && (
+                    <div>Connections: {db.stats.connections.current}/{db.stats.connections.available}</div>
+                  )}
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="text-center py-4 text-gray-500">
+              Database is not available
+            </div>
+          )}
+        </Card>
+      ))}
+    </div>
+  );
+}

apps/stock/web-app/src/features/monitoring/components/QueueStatsTable.tsx

@@ -0,0 +1,77 @@
+/**
+ * Queue Statistics Table Component
+ */
+
+import React from 'react';
+import { Card } from '../../../components/ui/Card';
+import type { QueueStats } from '../types';
+
+interface QueueStatsTableProps {
+  queues: QueueStats[];
+}
+
+export function QueueStatsTable({ queues }: QueueStatsTableProps) {
+  const totalJobs = (queue: QueueStats) => {
+    const { jobs } = queue;
+    return jobs.waiting + jobs.active + jobs.completed + jobs.failed + jobs.delayed + jobs.paused;
+  };
+
+  return (
+    <Card className="p-6">
+      <h3 className="text-lg font-semibold mb-4">Queue Statistics</h3>
+      
+      {queues.length > 0 ? (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b">
+                <th className="text-left py-2 px-3">Queue</th>
+                <th className="text-center py-2 px-3">Status</th>
+                <th className="text-right py-2 px-3">Waiting</th>
+                <th className="text-right py-2 px-3">Active</th>
+                <th className="text-right py-2 px-3">Completed</th>
+                <th className="text-right py-2 px-3">Failed</th>
+                <th className="text-right py-2 px-3">Delayed</th>
+                <th className="text-right py-2 px-3">Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              {queues.map((queue) => (
+                <tr key={queue.name} className="border-b hover:bg-gray-50">
+                  <td className="py-2 px-3 font-medium">{queue.name}</td>
+                  <td className="py-2 px-3 text-center">
+                    <span className={`inline-block w-2 h-2 rounded-full ${
+                      queue.connected ? 'bg-green-500' : 'bg-red-500'
+                    }`} />
+                  </td>
+                  <td className="py-2 px-3 text-right">{queue.jobs.waiting.toLocaleString()}</td>
+                  <td className="py-2 px-3 text-right">
+                    {queue.jobs.active > 0 ? (
+                      <span className="text-blue-600 font-medium">{queue.jobs.active}</span>
+                    ) : (
+                      queue.jobs.active
+                    )}
+                  </td>
+                  <td className="py-2 px-3 text-right">{queue.jobs.completed.toLocaleString()}</td>
+                  <td className="py-2 px-3 text-right">
+                    {queue.jobs.failed > 0 ? (
+                      <span className="text-red-600 font-medium">{queue.jobs.failed}</span>
+                    ) : (
+                      queue.jobs.failed
+                    )}
+                  </td>
+                  <td className="py-2 px-3 text-right">{queue.jobs.delayed.toLocaleString()}</td>
+                  <td className="py-2 px-3 text-right font-medium">{totalJobs(queue).toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="text-center py-8 text-gray-500">
+          No queue data available
+        </div>
+      )}
+    </Card>
+  );
+}

apps/stock/web-app/src/features/monitoring/components/SystemHealthCard.tsx

@@ -0,0 +1,87 @@
+/**
+ * System Health Card Component
+ */
+
+import React from 'react';
+import { Card } from '../../../components/ui/Card';
+import type { SystemHealth } from '../types';
+
+interface SystemHealthCardProps {
+  health: SystemHealth;
+}
+
+export function SystemHealthCard({ health }: SystemHealthCardProps) {
+  const statusColor = {
+    healthy: 'text-green-600 bg-green-100',
+    degraded: 'text-yellow-600 bg-yellow-100',
+    unhealthy: 'text-red-600 bg-red-100',
+  }[health.status];
+
+  const formatUptime = (ms: number) => {
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (days > 0) return `${days}d ${hours % 24}h`;
+    if (hours > 0) return `${hours}h ${minutes % 60}m`;
+    if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
+    return `${seconds}s`;
+  };
+
+  const formatBytes = (bytes: number) => {
+    const gb = bytes / 1024 / 1024 / 1024;
+    return gb.toFixed(2) + ' GB';
+  };
+
+  return (
+    <Card className="p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold">System Health</h3>
+        <span className={`px-3 py-1 rounded-full text-sm font-medium ${statusColor}`}>
+          {health.status.toUpperCase()}
+        </span>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <div className="text-sm text-gray-600">Uptime</div>
+          <div className="text-2xl font-semibold">{formatUptime(health.uptime)}</div>
+        </div>
+
+        <div>
+          <div className="text-sm text-gray-600">Memory Usage</div>
+          <div className="mt-1">
+            <div className="flex justify-between text-sm">
+              <span>{formatBytes(health.memory.used)} / {formatBytes(health.memory.total)}</span>
+              <span>{health.memory.percentage.toFixed(1)}%</span>
+            </div>
+            <div className="mt-1 w-full bg-gray-200 rounded-full h-2">
+              <div
+                className="bg-blue-600 h-2 rounded-full"
+                style={{ width: `${health.memory.percentage}%` }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {health.errors && health.errors.length > 0 && (
+          <div>
+            <div className="text-sm text-gray-600 mb-2">Issues</div>
+            <ul className="space-y-1">
+              {health.errors.map((error, index) => (
+                <li key={index} className="text-sm text-red-600">
+                  • {error}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        <div className="text-xs text-gray-500">
+          Last updated: {new Date(health.timestamp).toLocaleTimeString()}
+        </div>
+      </div>
+    </Card>
+  );
+}

apps/stock/web-app/src/features/monitoring/components/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Monitoring components exports
+ */
+
+export { SystemHealthCard } from './SystemHealthCard';
+export { CacheStatsCard } from './CacheStatsCard';
+export { QueueStatsTable } from './QueueStatsTable';
+export { DatabaseStatsGrid } from './DatabaseStatsGrid';

apps/stock/web-app/src/features/monitoring/hooks/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Monitoring hooks exports
+ */
+
+export * from './useMonitoring';

apps/stock/web-app/src/features/monitoring/hooks/useMonitoring.ts

@@ -0,0 +1,123 @@
+/**
+ * Custom hook for monitoring data
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { monitoringApi } from '../services/monitoringApi';
+import type { SystemHealth, CacheStats, QueueStats, DatabaseStats } from '../types';
+
+export function useSystemHealth(refreshInterval: number = 5000) {
+  const [data, setData] = useState<SystemHealth | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const health = await monitoringApi.getSystemHealth();
+      setData(health);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch system health');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    
+    if (refreshInterval > 0) {
+      const interval = setInterval(fetchData, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [fetchData, refreshInterval]);
+
+  return { data, loading, error, refetch: fetchData };
+}
+
+export function useCacheStats(refreshInterval: number = 5000) {
+  const [data, setData] = useState<CacheStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const stats = await monitoringApi.getCacheStats();
+      setData(stats);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch cache stats');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    
+    if (refreshInterval > 0) {
+      const interval = setInterval(fetchData, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [fetchData, refreshInterval]);
+
+  return { data, loading, error, refetch: fetchData };
+}
+
+export function useQueueStats(refreshInterval: number = 5000) {
+  const [data, setData] = useState<QueueStats[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const result = await monitoringApi.getQueueStats();
+      setData(result.queues);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch queue stats');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    
+    if (refreshInterval > 0) {
+      const interval = setInterval(fetchData, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [fetchData, refreshInterval]);
+
+  return { data, loading, error, refetch: fetchData };
+}
+
+export function useDatabaseStats(refreshInterval: number = 5000) {
+  const [data, setData] = useState<DatabaseStats[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const result = await monitoringApi.getDatabaseStats();
+      setData(result.databases);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch database stats');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    
+    if (refreshInterval > 0) {
+      const interval = setInterval(fetchData, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [fetchData, refreshInterval]);
+
+  return { data, loading, error, refetch: fetchData };
+}

apps/stock/web-app/src/features/monitoring/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Monitoring feature exports
+ */
+
+export { MonitoringPage } from './MonitoringPage';
+export * from './types';
+export * from './hooks/useMonitoring';
+export * from './services/monitoringApi';

apps/stock/web-app/src/features/monitoring/services/monitoringApi.ts

@@ -0,0 +1,87 @@
+/**
+ * Monitoring API Service
+ */
+
+import type { SystemHealth, CacheStats, QueueStats, DatabaseStats } from '../types';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:2003';
+const MONITORING_BASE = `${API_BASE_URL}/api/system/monitoring`;
+
+export const monitoringApi = {
+  /**
+   * Get overall system health
+   */
+  async getSystemHealth(): Promise<SystemHealth> {
+    const response = await fetch(MONITORING_BASE);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch system health: ${response.statusText}`);
+    }
+    return response.json();
+  },
+
+  /**
+   * Get cache statistics
+   */
+  async getCacheStats(): Promise<CacheStats> {
+    const response = await fetch(`${MONITORING_BASE}/cache`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch cache stats: ${response.statusText}`);
+    }
+    return response.json();
+  },
+
+  /**
+   * Get queue statistics
+   */
+  async getQueueStats(): Promise<{ queues: QueueStats[] }> {
+    const response = await fetch(`${MONITORING_BASE}/queues`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch queue stats: ${response.statusText}`);
+    }
+    return response.json();
+  },
+
+  /**
+   * Get specific queue statistics
+   */
+  async getQueueStatsByName(name: string): Promise<QueueStats> {
+    const response = await fetch(`${MONITORING_BASE}/queues/${name}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch queue ${name} stats: ${response.statusText}`);
+    }
+    return response.json();
+  },
+
+  /**
+   * Get database statistics
+   */
+  async getDatabaseStats(): Promise<{ databases: DatabaseStats[] }> {
+    const response = await fetch(`${MONITORING_BASE}/databases`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch database stats: ${response.statusText}`);
+    }
+    return response.json();
+  },
+
+  /**
+   * Get specific database statistics
+   */
+  async getDatabaseStatsByType(type: 'postgres' | 'mongodb' | 'questdb'): Promise<DatabaseStats> {
+    const response = await fetch(`${MONITORING_BASE}/databases/${type}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ${type} stats: ${response.statusText}`);
+    }
+    return response.json();
+  },
+
+  /**
+   * Get detailed cache info
+   */
+  async getCacheInfo(): Promise<{ parsed: CacheStats; raw: string }> {
+    const response = await fetch(`${MONITORING_BASE}/cache/info`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch cache info: ${response.statusText}`);
+    }
+    return response.json();
+  },
+};

apps/stock/web-app/src/features/monitoring/types/index.ts

@@ -0,0 +1,80 @@
+/**
+ * Monitoring types for system health and metrics
+ */
+
+export interface CacheStats {
+  provider: string;
+  connected: boolean;
+  uptime?: number;
+  memoryUsage?: {
+    used: number;
+    peak: number;
+    total?: number;
+  };
+  stats?: {
+    hits: number;
+    misses: number;
+    keys: number;
+    evictedKeys?: number;
+    expiredKeys?: number;
+  };
+  info?: Record<string, any>;
+}
+
+export interface QueueStats {
+  name: string;
+  connected: boolean;
+  jobs: {
+    waiting: number;
+    active: number;
+    completed: number;
+    failed: number;
+    delayed: number;
+    paused: number;
+  };
+  workers?: {
+    count: number;
+    concurrency: number;
+  };
+  throughput?: {
+    processed: number;
+    failed: number;
+    avgProcessingTime?: number;
+  };
+}
+
+export interface DatabaseStats {
+  type: 'postgres' | 'mongodb' | 'questdb';
+  name: string;
+  connected: boolean;
+  latency?: number;
+  pool?: {
+    size: number;
+    active: number;
+    idle: number;
+    waiting?: number;
+    max: number;
+  };
+  stats?: Record<string, any>;
+}
+
+export interface SystemHealth {
+  status: 'healthy' | 'degraded' | 'unhealthy';
+  timestamp: string;
+  uptime: number;
+  memory: {
+    used: number;
+    total: number;
+    percentage: number;
+  };
+  cpu?: {
+    usage: number;
+    loadAverage?: number[];
+  };
+  services: {
+    cache: CacheStats;
+    queues: QueueStats[];
+    databases: DatabaseStats[];
+  };
+  errors?: string[];
+}

apps/stock/web-app/src/features/pipeline/PipelinePage.tsx

@@ -0,0 +1,406 @@
+import { useState, useEffect } from 'react';
+import { 
+  ArrowPathIcon, 
+  CircleStackIcon,
+  CloudArrowDownIcon,
+  ExclamationTriangleIcon,
+  CheckCircleIcon,
+  ClockIcon,
+} from '@heroicons/react/24/outline';
+import { usePipeline } from './hooks/usePipeline';
+import type { PipelineOperation } from './types';
+
+const operations: PipelineOperation[] = [
+  // Symbol operations
+  {
+    id: 'sync-qm-symbols',
+    name: 'Sync QM Symbols',
+    description: 'Sync symbols from QuestionsAndMethods API',
+    endpoint: '/symbols',
+    method: 'POST',
+    category: 'sync',
+  },
+  {
+    id: 'sync-provider-symbols',
+    name: 'Sync Provider Symbols',
+    description: 'Sync symbols from a specific provider',
+    endpoint: '/symbols/:provider',
+    method: 'POST',
+    category: 'sync',
+    params: { provider: 'yahoo' }, // Default provider
+  },
+  // Exchange operations
+  {
+    id: 'sync-qm-exchanges',
+    name: 'Sync QM Exchanges',
+    description: 'Sync exchanges from QuestionsAndMethods API',
+    endpoint: '/exchanges',
+    method: 'POST',
+    category: 'sync',
+  },
+  {
+    id: 'sync-all-exchanges',
+    name: 'Sync All Exchanges',
+    description: 'Sync all exchanges with optional clear',
+    endpoint: '/exchanges/all',
+    method: 'POST',
+    category: 'sync',
+  },
+  // Provider mapping operations
+  {
+    id: 'sync-qm-provider-mappings',
+    name: 'Sync QM Provider Mappings',
+    description: 'Sync provider mappings from QuestionsAndMethods',
+    endpoint: '/provider-mappings/qm',
+    method: 'POST',
+    category: 'sync',
+  },
+  {
+    id: 'sync-ib-exchanges',
+    name: 'Sync IB Exchanges',
+    description: 'Sync exchanges from Interactive Brokers',
+    endpoint: '/provider-mappings/ib',
+    method: 'POST',
+    category: 'sync',
+  },
+  // Maintenance operations
+  {
+    id: 'clear-postgresql',
+    name: 'Clear PostgreSQL Data',
+    description: 'Clear exchange and provider mapping data',
+    endpoint: '/clear/postgresql',
+    method: 'POST',
+    category: 'maintenance',
+    dangerous: true,
+  },
+];
+
+export function PipelinePage() {
+  const {
+    loading,
+    error,
+    lastJobResult,
+    syncQMSymbols,
+    syncProviderSymbols,
+    syncQMExchanges,
+    syncAllExchanges,
+    syncQMProviderMappings,
+    syncIBExchanges,
+    clearPostgreSQLData,
+    getExchangeStats,
+    getProviderMappingStats,
+  } = usePipeline();
+
+  const [selectedProvider, setSelectedProvider] = useState('yahoo');
+  const [clearFirst, setClearFirst] = useState(false);
+  const [clearDataType, setClearDataType] = useState<'all' | 'exchanges' | 'provider_mappings'>('all');
+  const [stats, setStats] = useState<{ exchanges?: any; providerMappings?: any }>({});
+
+  // Load stats on mount
+  useEffect(() => {
+    loadStats();
+  }, []);
+
+  const loadStats = async () => {
+    const [exchangeStats, mappingStats] = await Promise.all([
+      getExchangeStats(),
+      getProviderMappingStats(),
+    ]);
+    setStats({
+      exchanges: exchangeStats,
+      providerMappings: mappingStats,
+    });
+  };
+
+  const handleOperation = async (op: PipelineOperation) => {
+    switch (op.id) {
+      case 'sync-qm-symbols':
+        await syncQMSymbols();
+        break;
+      case 'sync-provider-symbols':
+        await syncProviderSymbols(selectedProvider);
+        break;
+      case 'sync-qm-exchanges':
+        await syncQMExchanges();
+        break;
+      case 'sync-all-exchanges':
+        await syncAllExchanges(clearFirst);
+        break;
+      case 'sync-qm-provider-mappings':
+        await syncQMProviderMappings();
+        break;
+      case 'sync-ib-exchanges':
+        await syncIBExchanges();
+        break;
+      case 'clear-postgresql':
+        if (confirm(`Are you sure you want to clear ${clearDataType} data? This action cannot be undone.`)) {
+          await clearPostgreSQLData(clearDataType);
+        }
+        break;
+    }
+    // Reload stats after operation
+    await loadStats();
+  };
+
+  const getCategoryIcon = (category: string) => {
+    switch (category) {
+      case 'sync':
+        return <CloudArrowDownIcon className="h-5 w-5" />;
+      case 'maintenance':
+        return <ExclamationTriangleIcon className="h-5 w-5" />;
+      default:
+        return <CircleStackIcon className="h-5 w-5" />;
+    }
+  };
+
+  const getCategoryColor = (category: string) => {
+    switch (category) {
+      case 'sync':
+        return 'text-primary-400';
+      case 'maintenance':
+        return 'text-warning';
+      default:
+        return 'text-text-secondary';
+    }
+  };
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-text-primary mb-2">Data Pipeline Management</h1>
+        <p className="text-text-secondary">
+          Manage data synchronization and maintenance operations
+        </p>
+      </div>
+
+      {/* Stats Overview */}
+      {(stats.exchanges || stats.providerMappings) && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
+          {stats.exchanges && (
+            <div className="bg-surface-secondary p-4 rounded-lg border border-border">
+              <h3 className="text-lg font-semibold text-text-primary mb-3">Exchange Statistics</h3>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Total Exchanges:</span>
+                  <span className="text-text-primary font-medium">{stats.exchanges.totalExchanges}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Active Exchanges:</span>
+                  <span className="text-success font-medium">{stats.exchanges.activeExchanges}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Total Provider Mappings:</span>
+                  <span className="text-text-primary font-medium">{stats.exchanges.totalProviderMappings}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Active Mappings:</span>
+                  <span className="text-success font-medium">{stats.exchanges.activeProviderMappings}</span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {stats.providerMappings && (
+            <div className="bg-surface-secondary p-4 rounded-lg border border-border">
+              <h3 className="text-lg font-semibold text-text-primary mb-3">Provider Mapping Statistics</h3>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Coverage:</span>
+                  <span className="text-primary-400 font-medium">
+                    {stats.providerMappings.coveragePercentage?.toFixed(1)}%
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Verified Mappings:</span>
+                  <span className="text-success font-medium">{stats.providerMappings.verifiedMappings}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-text-secondary">Auto-mapped:</span>
+                  <span className="text-text-primary font-medium">{stats.providerMappings.autoMappedCount}</span>
+                </div>
+                {stats.providerMappings.mappingsByProvider && (
+                  <div className="mt-2 pt-2 border-t border-border">
+                    <span className="text-text-secondary text-xs">By Provider:</span>
+                    <div className="mt-1 flex flex-wrap gap-2">
+                      {Object.entries(stats.providerMappings.mappingsByProvider).map(([provider, count]) => (
+                        <span key={provider} className="text-xs bg-surface px-2 py-1 rounded">
+                          {provider}: {count}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Status Messages */}
+      {error && (
+        <div className="mb-6 p-4 bg-danger/10 border border-danger/20 rounded-lg">
+          <div className="flex items-center gap-2">
+            <ExclamationTriangleIcon className="h-5 w-5 text-danger" />
+            <span className="text-danger">{error}</span>
+          </div>
+        </div>
+      )}
+
+      {lastJobResult && (
+        <div className={`mb-6 p-4 rounded-lg border ${
+          lastJobResult.success 
+            ? 'bg-success/10 border-success/20' 
+            : 'bg-danger/10 border-danger/20'
+        }`}>
+          <div className="flex items-center gap-2">
+            {lastJobResult.success ? (
+              <CheckCircleIcon className="h-5 w-5 text-success" />
+            ) : (
+              <ExclamationTriangleIcon className="h-5 w-5 text-danger" />
+            )}
+            <span className={lastJobResult.success ? 'text-success' : 'text-danger'}>
+              {lastJobResult.message || lastJobResult.error}
+            </span>
+            {lastJobResult.jobId && (
+              <span className="text-text-muted text-xs ml-auto">
+                Job ID: {lastJobResult.jobId}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Operations Grid */}
+      <div className="space-y-6">
+        {/* Sync Operations */}
+        <div>
+          <h2 className="text-lg font-semibold text-text-primary mb-4 flex items-center gap-2">
+            <CloudArrowDownIcon className="h-5 w-5 text-primary-400" />
+            Sync Operations
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {operations.filter(op => op.category === 'sync').map(op => (
+              <div
+                key={op.id}
+                className="bg-surface-secondary p-4 rounded-lg border border-border hover:border-primary-500/50 transition-colors"
+              >
+                <div className="flex items-start justify-between mb-2">
+                  <h3 className="font-medium text-text-primary">{op.name}</h3>
+                  <div className={getCategoryColor(op.category)}>
+                    {getCategoryIcon(op.category)}
+                  </div>
+                </div>
+                <p className="text-sm text-text-secondary mb-3">{op.description}</p>
+                
+                {/* Special inputs for specific operations */}
+                {op.id === 'sync-provider-symbols' && (
+                  <div className="mb-3">
+                    <label className="block text-xs text-text-muted mb-1">Provider</label>
+                    <select
+                      value={selectedProvider}
+                      onChange={e => setSelectedProvider(e.target.value)}
+                      className="w-full px-2 py-1 text-sm bg-surface border border-border rounded focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
+                    >
+                      <option value="yahoo">Yahoo</option>
+                      <option value="qm">QuestionsAndMethods</option>
+                      <option value="ib">Interactive Brokers</option>
+                    </select>
+                  </div>
+                )}
+
+                {op.id === 'sync-all-exchanges' && (
+                  <div className="mb-3">
+                    <label className="flex items-center gap-2 text-sm">
+                      <input
+                        type="checkbox"
+                        checked={clearFirst}
+                        onChange={e => setClearFirst(e.target.checked)}
+                        className="rounded border-border text-primary-500 focus:ring-primary-500"
+                      />
+                      <span className="text-text-secondary">Clear existing data first</span>
+                    </label>
+                  </div>
+                )}
+
+                <button
+                  onClick={() => handleOperation(op)}
+                  disabled={loading}
+                  className="w-full px-3 py-2 bg-primary-500/20 text-primary-400 rounded text-sm font-medium hover:bg-primary-500/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
+                >
+                  {loading ? (
+                    <>
+                      <ArrowPathIcon className="h-4 w-4 animate-spin" />
+                      Processing...
+                    </>
+                  ) : (
+                    <>
+                      <CloudArrowDownIcon className="h-4 w-4" />
+                      Execute
+                    </>
+                  )}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Maintenance Operations */}
+        <div>
+          <h2 className="text-lg font-semibold text-text-primary mb-4 flex items-center gap-2">
+            <ExclamationTriangleIcon className="h-5 w-5 text-warning" />
+            Maintenance Operations
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {operations.filter(op => op.category === 'maintenance').map(op => (
+              <div
+                key={op.id}
+                className="bg-surface-secondary p-4 rounded-lg border border-warning/20 hover:border-warning/50 transition-colors"
+              >
+                <div className="flex items-start justify-between mb-2">
+                  <h3 className="font-medium text-text-primary">{op.name}</h3>
+                  <div className={getCategoryColor(op.category)}>
+                    {getCategoryIcon(op.category)}
+                  </div>
+                </div>
+                <p className="text-sm text-text-secondary mb-3">{op.description}</p>
+                
+                {op.id === 'clear-postgresql' && (
+                  <div className="mb-3">
+                    <label className="block text-xs text-text-muted mb-1">Data Type</label>
+                    <select
+                      value={clearDataType}
+                      onChange={e => setClearDataType(e.target.value as any)}
+                      className="w-full px-2 py-1 text-sm bg-surface border border-border rounded focus:ring-1 focus:ring-warning focus:border-warning"
+                    >
+                      <option value="all">All Data</option>
+                      <option value="exchanges">Exchanges Only</option>
+                      <option value="provider_mappings">Provider Mappings Only</option>
+                    </select>
+                  </div>
+                )}
+
+                <button
+                  onClick={() => handleOperation(op)}
+                  disabled={loading}
+                  className="w-full px-3 py-2 bg-warning/20 text-warning rounded text-sm font-medium hover:bg-warning/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
+                >
+                  {loading ? (
+                    <>
+                      <ArrowPathIcon className="h-4 w-4 animate-spin" />
+                      Processing...
+                    </>
+                  ) : (
+                    <>
+                      <ExclamationTriangleIcon className="h-4 w-4" />
+                      Execute
+                    </>
+                  )}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/stock/web-app/src/features/pipeline/hooks/usePipeline.ts

@@ -0,0 +1,159 @@
+import { useCallback, useState } from 'react';
+import { pipelineApi } from '../services/pipelineApi';
+import type {
+  DataClearType,
+  ExchangeStats,
+  PipelineJobResult,
+  ProviderMappingStats,
+} from '../types';
+
+export function usePipeline() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [lastJobResult, setLastJobResult] = useState<PipelineJobResult | null>(null);
+
+  const executeOperation = useCallback(async (
+    operation: () => Promise<PipelineJobResult>
+  ): Promise<boolean> => {
+    try {
+      setLoading(true);
+      setError(null);
+      const result = await operation();
+      setLastJobResult(result);
+      if (!result.success) {
+        setError(result.error || 'Operation failed');
+        return false;
+      }
+      return true;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      setError(errorMessage);
+      setLastJobResult({ success: false, error: errorMessage });
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Symbol sync operations
+  const syncQMSymbols = useCallback(
+    () => executeOperation(() => pipelineApi.syncQMSymbols()),
+    [executeOperation]
+  );
+
+  const syncProviderSymbols = useCallback(
+    (provider: string) => executeOperation(() => pipelineApi.syncProviderSymbols(provider)),
+    [executeOperation]
+  );
+
+  // Exchange sync operations
+  const syncQMExchanges = useCallback(
+    () => executeOperation(() => pipelineApi.syncQMExchanges()),
+    [executeOperation]
+  );
+
+  const syncAllExchanges = useCallback(
+    (clearFirst: boolean = false) => 
+      executeOperation(() => pipelineApi.syncAllExchanges(clearFirst)),
+    [executeOperation]
+  );
+
+  // Provider mapping sync operations
+  const syncQMProviderMappings = useCallback(
+    () => executeOperation(() => pipelineApi.syncQMProviderMappings()),
+    [executeOperation]
+  );
+
+  const syncIBExchanges = useCallback(
+    () => executeOperation(() => pipelineApi.syncIBExchanges()),
+    [executeOperation]
+  );
+
+  // Maintenance operations
+  const clearPostgreSQLData = useCallback(
+    (dataType: DataClearType = 'all') => 
+      executeOperation(() => pipelineApi.clearPostgreSQLData(dataType)),
+    [executeOperation]
+  );
+
+  // Status and stats operations
+  const getSyncStatus = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const result = await pipelineApi.getSyncStatus();
+      return result;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to get sync status';
+      setError(errorMessage);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const getExchangeStats = useCallback(async (): Promise<ExchangeStats | null> => {
+    try {
+      setLoading(true);
+      setError(null);
+      const result = await pipelineApi.getExchangeStats();
+      if (result.success && result.data) {
+        return result.data as ExchangeStats;
+      }
+      setError(result.error || 'Failed to get exchange stats');
+      return null;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to get exchange stats';
+      setError(errorMessage);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const getProviderMappingStats = useCallback(async (): Promise<ProviderMappingStats | null> => {
+    try {
+      setLoading(true);
+      setError(null);
+      const result = await pipelineApi.getProviderMappingStats();
+      if (result.success && result.data) {
+        return result.data as ProviderMappingStats;
+      }
+      setError(result.error || 'Failed to get provider mapping stats');
+      return null;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to get provider mapping stats';
+      setError(errorMessage);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return {
+    // State
+    loading,
+    error,
+    lastJobResult,
+
+    // Symbol operations
+    syncQMSymbols,
+    syncProviderSymbols,
+
+    // Exchange operations
+    syncQMExchanges,
+    syncAllExchanges,
+
+    // Provider mapping operations
+    syncQMProviderMappings,
+    syncIBExchanges,
+
+    // Maintenance operations
+    clearPostgreSQLData,
+
+    // Status and stats operations
+    getSyncStatus,
+    getExchangeStats,
+    getProviderMappingStats,
+  };
+}

apps/stock/web-app/src/features/pipeline/index.ts

@@ -0,0 +1,3 @@
+export { PipelinePage } from './PipelinePage';
+export * from './hooks/usePipeline';
+export * from './types';

apps/stock/web-app/src/features/pipeline/services/pipelineApi.ts

@@ -0,0 +1,82 @@
+import type {
+  DataClearType,
+  PipelineJobResult,
+  PipelineStatsResult,
+} from '../types';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:2003';
+
+class PipelineApiService {
+  private async request<T = any>(
+    endpoint: string,
+    options?: RequestInit
+  ): Promise<T> {
+    const url = `${API_BASE_URL}/pipeline${endpoint}`;
+
+    const response = await fetch(url, {
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+      ...options,
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error(data.error || `HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    return data;
+  }
+
+  // Symbol sync operations
+  async syncQMSymbols(): Promise<PipelineJobResult> {
+    return this.request<PipelineJobResult>('/symbols', { method: 'POST' });
+  }
+
+  async syncProviderSymbols(provider: string): Promise<PipelineJobResult> {
+    return this.request<PipelineJobResult>(`/symbols/${provider}`, { method: 'POST' });
+  }
+
+  // Exchange sync operations
+  async syncQMExchanges(): Promise<PipelineJobResult> {
+    return this.request<PipelineJobResult>('/exchanges', { method: 'POST' });
+  }
+
+  async syncAllExchanges(clearFirst: boolean = false): Promise<PipelineJobResult> {
+    const params = clearFirst ? '?clear=true' : '';
+    return this.request<PipelineJobResult>(`/exchanges/all${params}`, { method: 'POST' });
+  }
+
+  // Provider mapping sync operations
+  async syncQMProviderMappings(): Promise<PipelineJobResult> {
+    return this.request<PipelineJobResult>('/provider-mappings/qm', { method: 'POST' });
+  }
+
+  async syncIBExchanges(): Promise<PipelineJobResult> {
+    return this.request<PipelineJobResult>('/provider-mappings/ib', { method: 'POST' });
+  }
+
+  // Status and maintenance operations
+  async getSyncStatus(): Promise<PipelineJobResult> {
+    return this.request<PipelineJobResult>('/status');
+  }
+
+  async clearPostgreSQLData(dataType: DataClearType = 'all'): Promise<PipelineJobResult> {
+    const params = `?type=${dataType}`;
+    return this.request<PipelineJobResult>(`/clear/postgresql${params}`, { method: 'POST' });
+  }
+
+  // Statistics operations
+  async getExchangeStats(): Promise<PipelineStatsResult> {
+    return this.request<PipelineStatsResult>('/stats/exchanges');
+  }
+
+  async getProviderMappingStats(): Promise<PipelineStatsResult> {
+    return this.request<PipelineStatsResult>('/stats/provider-mappings');
+  }
+}
+
+// Export singleton instance
+export const pipelineApi = new PipelineApiService();

apps/stock/web-app/src/features/pipeline/types/index.ts

@@ -0,0 +1,58 @@
+// Pipeline API types
+
+export interface PipelineJobResult {
+  success: boolean;
+  jobId?: string;
+  message?: string;
+  error?: string;
+  data?: any;
+}
+
+export interface PipelineStatsResult {
+  success: boolean;
+  data?: any;
+  error?: string;
+}
+
+export interface ExchangeStats {
+  totalExchanges: number;
+  activeExchanges: number;
+  totalProviderMappings: number;
+  activeProviderMappings: number;
+  verifiedProviderMappings: number;
+  providers: string[];
+}
+
+export interface ProviderMappingStats {
+  totalMappings: number;
+  activeMappings: number;
+  verifiedMappings: number;
+  autoMappedCount: number;
+  mappingsByProvider: Record<string, number>;
+  coveragePercentage: number;
+}
+
+export interface SyncStatus {
+  lastSync?: {
+    symbols?: string;
+    exchanges?: string;
+    providerMappings?: string;
+  };
+  pendingJobs?: number;
+  activeJobs?: number;
+  completedJobs?: number;
+  failedJobs?: number;
+}
+
+export type DataClearType = 'exchanges' | 'provider_mappings' | 'all';
+
+export interface PipelineOperation {
+  id: string;
+  name: string;
+  description: string;
+  endpoint: string;
+  method: 'GET' | 'POST';
+  category: 'sync' | 'stats' | 'maintenance';
+  dangerous?: boolean;
+  params?: Record<string, any>;
+}

apps/stock/web-app/src/lib/constants.ts

@@ -5,13 +5,31 @@ import {
   DocumentTextIcon,
   HomeIcon,
   PresentationChartLineIcon,
+  ServerStackIcon,
+  CircleStackIcon,
+  ChartPieIcon,
 } from '@heroicons/react/24/outline';
 
-export const navigation = [
+export interface NavigationItem {
+  name: string;
+  href?: string;
+  icon: any;
+  children?: NavigationItem[];
+}
+
+export const navigation: NavigationItem[] = [
   { name: 'Dashboard', href: '/dashboard', icon: HomeIcon },
   { name: 'Exchanges', href: '/exchanges', icon: BuildingLibraryIcon },
   { name: 'Portfolio', href: '/portfolio', icon: ChartBarIcon },
   { name: 'Strategies', href: '/strategies', icon: DocumentTextIcon },
   { name: 'Analytics', href: '/analytics', icon: PresentationChartLineIcon },
+  { 
+    name: 'System', 
+    icon: ServerStackIcon,
+    children: [
+      { name: 'Monitoring', href: '/system/monitoring', icon: ChartPieIcon },
+      { name: 'Pipeline', href: '/system/pipeline', icon: CircleStackIcon },
+    ]
+  },
   { name: 'Settings', href: '/settings', icon: CogIcon },
 ];

apps/stock/web-app/src/lib/constants/navigation.ts

@@ -5,6 +5,7 @@ import {
   CurrencyDollarIcon,
   DocumentTextIcon,
   HomeIcon,
+  ServerIcon,
 } from '@heroicons/react/24/outline';
 
 export const navigation = [
@@ -38,6 +39,12 @@ export const navigation = [
     icon: DocumentTextIcon,
     current: false,
   },
+  {
+    name: 'System',
+    href: '/system/monitoring',
+    icon: ServerIcon,
+    current: false,
+  },
   {
     name: 'Settings',
     href: '/settings',

apps/stock/web-app/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,