reorganized web-app

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

@@ -179,5 +179,82 @@ export function createMonitoringRoutes(container: IServiceContainer) {
     });
   });
 
+  /**
+   * Get service status for all microservices
+   */
+  monitoring.get('/services', async (c) => {
+    try {
+      const services = await monitoringService.getServiceStatus();
+      return c.json({ services });
+    } catch (error) {
+      return c.json({
+        error: 'Failed to retrieve service status',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }, 500);
+    }
+  });
+
+  /**
+   * Get proxy statistics
+   */
+  monitoring.get('/proxies', async (c) => {
+    try {
+      const stats = await monitoringService.getProxyStats();
+      return c.json(stats || { enabled: false });
+    } catch (error) {
+      return c.json({
+        error: 'Failed to retrieve proxy statistics',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }, 500);
+    }
+  });
+
+  /**
+   * Get comprehensive system overview
+   */
+  monitoring.get('/overview', async (c) => {
+    try {
+      const overview = await monitoringService.getSystemOverview();
+      return c.json(overview);
+    } catch (error) {
+      return c.json({
+        error: 'Failed to retrieve system overview',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }, 500);
+    }
+  });
+
+  /**
+   * Test direct BullMQ queue access
+   */
+  monitoring.get('/test/queue/:name', async (c) => {
+    const queueName = c.req.param('name');
+    const { Queue } = await import('bullmq');
+    
+    const connection = {
+      host: 'localhost',
+      port: 6379,
+      db: 1,
+    };
+    
+    const queue = new Queue(`{${queueName}}`, { connection });
+    
+    try {
+      const counts = await queue.getJobCounts();
+      await queue.close();
+      return c.json({ 
+        queueName,
+        bullmqName: `{${queueName}}`,
+        counts 
+      });
+    } catch (error: any) {
+      await queue.close();
+      return c.json({ 
+        queueName,
+        error: error.message 
+      }, 500);
+    }
+  });
+
   return monitoring;
 }

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

@@ -11,8 +11,12 @@ import type {
   DatabaseStats, 
   SystemHealth,
   ServiceMetrics,
-  MetricSnapshot
+  MetricSnapshot,
+  ServiceStatus,
+  ProxyStats,
+  SystemOverview
 } from '../types/monitoring.types';
+import * as os from 'os';
 
 export class MonitoringService {
   private readonly logger = getLogger('monitoring-service');
@@ -32,36 +36,30 @@ export class MonitoringService {
         };
       }
 
-      // Get Redis/Dragonfly info
+      // Check if cache is connected using the isReady method
-      const info = await this.container.cache.info();
+      const isConnected = this.container.cache.isReady();
-      const dbSize = await this.container.cache.dbsize();
+      if (!isConnected) {
+        return {
+          provider: 'dragonfly',
+          connected: false,
+        };
+      }
 
-      // Parse memory stats from info
+      // Get cache stats from the provider
-      const memoryUsed = this.parseInfoValue(info, 'used_memory');
+      const cacheStats = this.container.cache.getStats();
-      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');
       
+      // Since we can't access Redis info directly, we'll use what's available
       return {
         provider: 'dragonfly',
         connected: true,
-        uptime: this.parseInfoValue(info, 'uptime_in_seconds'),
+        uptime: cacheStats.uptime,
-        memoryUsage: {
-          used: memoryUsed,
-          peak: memoryPeak,
-        },
         stats: {
-          hits,
+          hits: cacheStats.hits,
-          misses,
+          misses: cacheStats.misses,
-          keys: dbSize,
+          keys: 0, // We can't get total keys without direct Redis access
-          evictedKeys,
+          evictedKeys: 0,
-          expiredKeys,
+          expiredKeys: 0,
         },
-        info: this.parseRedisInfo(info),
       };
     } catch (error) {
       this.logger.error('Failed to get cache stats', { error });
@@ -80,47 +78,52 @@ export class MonitoringService {
     
     try {
       if (!this.container.queue) {
+        this.logger.warn('No queue manager available');
         return stats;
       }
 
-      // Get all queue names from the queue manager
+      // Get all queue names from the SmartQueueManager
-      const queueManager = this.container.queue;
+      const queueManager = this.container.queue as any;
-      const queueNames = ['default', 'proxy', 'qm', 'ib', 'ceo', 'webshare']; // Add your queue names
+      this.logger.debug('Queue manager type:', { 
+        type: queueManager.constructor.name,
+        hasGetAllQueues: typeof queueManager.getAllQueues === 'function',
+        hasQueues: !!queueManager.queues,
+        hasGetQueue: typeof queueManager.getQueue === 'function'
+      });
       
+      // Always use the known queue names since web-api doesn't create worker queues
+      const queueNames = ['proxy', 'qm', 'ib', 'ceo', 'webshare', 'exchanges', 'symbols'];
+      this.logger.debug('Using known queue names', { count: queueNames.length, names: queueNames });
+      
+      // Create BullMQ queues directly with the correct format
       for (const queueName of queueNames) {
         try {
-          const queue = queueManager.getQueue(queueName);
+          // Import BullMQ directly to create queue instances
-          if (!queue) continue;
+          const { Queue: BullMQQueue } = await import('bullmq');
+          const connection = {
+            host: 'localhost',
+            port: 6379,
+            db: 1, // Queue DB
+          };
           
-          const [waiting, active, completed, failed, delayed, paused] = await Promise.all([
+          // Create BullMQ queue with the correct format
-            queue.getWaitingCount(),
+          const bullQueue = new BullMQQueue(`{${queueName}}`, { connection });
-            queue.getActiveCount(),
-            queue.getCompletedCount(),
-            queue.getFailedCount(),
-            queue.getDelayedCount(),
-            queue.getPausedCount(),
-          ]);
           
-          // Get worker info if available
+          // Get stats directly from BullMQ
-          const workers = queueManager.getWorker(queueName);
+          const queueStats = await this.getQueueStatsForBullQueue(bullQueue, queueName);
-          const workerInfo = workers ? {
-            count: 1, // Assuming single worker per queue
-            concurrency: workers.concurrency || 1,
-          } : undefined;
           
           stats.push({
             name: queueName,
             connected: true,
-            jobs: {
+            jobs: queueStats,
-              waiting,
+            workers: {
-              active,
+              count: 0,
-              completed,
+              concurrency: 1,
-              failed,
-              delayed,
-              paused,
             },
-            workers: workerInfo,
           });
+          
+          // Close the queue connection after getting stats
+          await bullQueue.close();
         } catch (error) {
           this.logger.warn(`Failed to get stats for queue ${queueName}`, { error });
           stats.push({
@@ -144,6 +147,162 @@ export class MonitoringService {
     return stats;
   }
 
+  /**
+   * Get stats for a BullMQ queue directly
+   */
+  private async getQueueStatsForBullQueue(bullQueue: any, queueName: string) {
+    try {
+      // BullMQ provides getJobCounts which returns all counts at once
+      const counts = await bullQueue.getJobCounts();
+      
+      return {
+        waiting: counts.waiting || 0,
+        active: counts.active || 0,
+        completed: counts.completed || 0,
+        failed: counts.failed || 0,
+        delayed: counts.delayed || 0,
+        paused: counts.paused || 0,
+        prioritized: counts.prioritized || 0,
+        'waiting-children': counts['waiting-children'] || 0,
+      };
+    } catch (error) {
+      this.logger.error(`Failed to get stats for BullMQ queue ${queueName}`, { error });
+      // Fallback to individual methods
+      try {
+        const [waiting, active, completed, failed, delayed, paused] = await Promise.all([
+          bullQueue.getWaitingCount(),
+          bullQueue.getActiveCount(), 
+          bullQueue.getCompletedCount(),
+          bullQueue.getFailedCount(),
+          bullQueue.getDelayedCount(),
+          bullQueue.getPausedCount ? bullQueue.getPausedCount() : 0
+        ]);
+
+        return {
+          waiting,
+          active,
+          completed,
+          failed,
+          delayed,
+          paused,
+        };
+      } catch (fallbackError) {
+        this.logger.error(`Fallback also failed for queue ${queueName}`, { fallbackError });
+        return this.getQueueStatsForQueue(bullQueue, queueName);
+      }
+    }
+  }
+
+  /**
+   * Get stats for a specific queue
+   */
+  private async getQueueStatsForQueue(queue: any, queueName: string) {
+    // Check if it has the getStats method
+    if (queue.getStats && typeof queue.getStats === 'function') {
+      const stats = await queue.getStats();
+      return {
+        waiting: stats.waiting || 0,
+        active: stats.active || 0,
+        completed: stats.completed || 0,
+        failed: stats.failed || 0,
+        delayed: stats.delayed || 0,
+        paused: stats.paused || 0,
+      };
+    }
+    
+    // Try individual count methods
+    const [waiting, active, completed, failed, delayed] = await Promise.all([
+      this.safeGetCount(queue, 'getWaitingCount', 'getWaiting'),
+      this.safeGetCount(queue, 'getActiveCount', 'getActive'),
+      this.safeGetCount(queue, 'getCompletedCount', 'getCompleted'),
+      this.safeGetCount(queue, 'getFailedCount', 'getFailed'),
+      this.safeGetCount(queue, 'getDelayedCount', 'getDelayed'),
+    ]);
+
+    const paused = await this.safeGetPausedStatus(queue);
+
+    return {
+      waiting,
+      active,
+      completed,
+      failed,
+      delayed,
+      paused,
+    };
+  }
+
+  /**
+   * Safely get count from queue
+   */
+  private async safeGetCount(queue: any, ...methodNames: string[]): Promise<number> {
+    for (const methodName of methodNames) {
+      if (queue[methodName] && typeof queue[methodName] === 'function') {
+        try {
+          const result = await queue[methodName]();
+          return Array.isArray(result) ? result.length : (result || 0);
+        } catch (e) {
+          // Continue to next method
+        }
+      }
+    }
+    return 0;
+  }
+
+  /**
+   * Get paused status
+   */
+  private async safeGetPausedStatus(queue: any): Promise<number> {
+    try {
+      if (queue.isPaused && typeof queue.isPaused === 'function') {
+        const isPaused = await queue.isPaused();
+        return isPaused ? 1 : 0;
+      }
+      if (queue.getPausedCount && typeof queue.getPausedCount === 'function') {
+        return await queue.getPausedCount();
+      }
+    } catch (e) {
+      // Ignore
+    }
+    return 0;
+  }
+
+  /**
+   * Get worker info for a queue
+   */
+  private getWorkerInfo(queue: any, queueManager: any, queueName: string) {
+    try {
+      // Check queue itself for worker info
+      if (queue.workers && Array.isArray(queue.workers)) {
+        return {
+          count: queue.workers.length,
+          concurrency: queue.workers[0]?.concurrency || 1,
+        };
+      }
+      
+      // Check queue manager for worker config
+      if (queueManager.config?.defaultQueueOptions) {
+        const options = queueManager.config.defaultQueueOptions;
+        return {
+          count: options.workers || 1,
+          concurrency: options.concurrency || 1,
+        };
+      }
+      
+      // Check for getWorkerCount method
+      if (queue.getWorkerCount && typeof queue.getWorkerCount === 'function') {
+        const count = queue.getWorkerCount();
+        return {
+          count,
+          concurrency: 1,
+        };
+      }
+    } catch (e) {
+      // Ignore
+    }
+    
+    return undefined;
+  }
+
   /**
    * Get database statistics
    */
@@ -187,7 +346,8 @@ export class MonitoringService {
     if (this.container.mongodb) {
       try {
         const startTime = Date.now();
-        const db = this.container.mongodb.db();
+        const mongoClient = this.container.mongodb as any; // This is MongoDBClient
+        const db = mongoClient.getDatabase();
         await db.admin().ping();
         const latency = Date.now() - startTime;
 
@@ -252,8 +412,10 @@ export class MonitoringService {
       this.getDatabaseStats(),
     ]);
 
-    const memory = process.memoryUsage();
+    const processMemory = process.memoryUsage();
+    const systemMemory = this.getSystemMemory();
     const uptime = Date.now() - this.startTime;
+    const cpuInfo = this.getCpuUsage();
 
     // Determine overall health status
     const errors: string[] = [];
@@ -280,10 +442,15 @@ export class MonitoringService {
       timestamp: new Date().toISOString(),
       uptime,
       memory: {
-        used: memory.heapUsed,
+        used: systemMemory.used,
-        total: memory.heapTotal,
+        total: systemMemory.total,
-        percentage: (memory.heapUsed / memory.heapTotal) * 100,
+        percentage: systemMemory.percentage,
+        heap: {
+          used: processMemory.heapUsed,
+          total: processMemory.heapTotal,
+        },
       },
+      cpu: cpuInfo,
       services: {
         cache: cacheStats,
         queues: queueStats,
@@ -353,4 +520,217 @@ export class MonitoringService {
     
     return result;
   }
+
+  /**
+   * Get service status for all microservices
+   */
+  async getServiceStatus(): Promise<ServiceStatus[]> {
+    const services: ServiceStatus[] = [];
+    
+    // Define service endpoints
+    const serviceEndpoints = [
+      { name: 'data-ingestion', port: 2001, path: '/health' },
+      { name: 'data-pipeline', port: 2002, path: '/health' },
+      { name: 'web-api', port: 2003, path: '/health' },
+    ];
+
+    for (const service of serviceEndpoints) {
+      try {
+        const startTime = Date.now();
+        const response = await fetch(`http://localhost:${service.port}${service.path}`, {
+          signal: AbortSignal.timeout(5000), // 5 second timeout
+        });
+        const latency = Date.now() - startTime;
+        
+        if (response.ok) {
+          const data = await response.json();
+          services.push({
+            name: service.name,
+            version: data.version || '1.0.0',
+            status: 'running',
+            port: service.port,
+            uptime: data.uptime || 0,
+            lastCheck: new Date().toISOString(),
+            healthy: true,
+          });
+        } else {
+          services.push({
+            name: service.name,
+            version: 'unknown',
+            status: 'error',
+            port: service.port,
+            uptime: 0,
+            lastCheck: new Date().toISOString(),
+            healthy: false,
+            error: `HTTP ${response.status}`,
+          });
+        }
+      } catch (error) {
+        services.push({
+          name: service.name,
+          version: 'unknown',
+          status: 'stopped',
+          port: service.port,
+          uptime: 0,
+          lastCheck: new Date().toISOString(),
+          healthy: false,
+          error: error instanceof Error ? error.message : 'Connection failed',
+        });
+      }
+    }
+
+    // Add current service (web-api)
+    services.push({
+      name: 'web-api',
+      version: '1.0.0',
+      status: 'running',
+      port: process.env.PORT ? parseInt(process.env.PORT) : 2003,
+      uptime: Date.now() - this.startTime,
+      lastCheck: new Date().toISOString(),
+      healthy: true,
+    });
+
+    return services;
+  }
+
+  /**
+   * Get proxy statistics
+   */
+  async getProxyStats(): Promise<ProxyStats | null> {
+    try {
+      if (!this.container.proxy) {
+        return {
+          enabled: false,
+          totalProxies: 0,
+          workingProxies: 0,
+          failedProxies: 0,
+        };
+      }
+
+      const proxyManager = this.container.proxy as any;
+      
+      // Check if proxy manager is ready
+      if (!proxyManager.isReady || !proxyManager.isReady()) {
+        return {
+          enabled: true,
+          totalProxies: 0,
+          workingProxies: 0,
+          failedProxies: 0,
+        };
+      }
+
+      const stats = proxyManager.getStats ? proxyManager.getStats() : null;
+      const lastFetchTime = proxyManager.getLastFetchTime ? proxyManager.getLastFetchTime() : null;
+
+      return {
+        enabled: true,
+        totalProxies: stats?.total || 0,
+        workingProxies: stats?.working || 0,
+        failedProxies: stats?.failed || 0,
+        lastUpdate: stats?.lastUpdate ? new Date(stats.lastUpdate).toISOString() : undefined,
+        lastFetchTime: lastFetchTime ? new Date(lastFetchTime).toISOString() : undefined,
+      };
+    } catch (error) {
+      this.logger.error('Failed to get proxy stats', { error });
+      return null;
+    }
+  }
+
+  /**
+   * Get comprehensive system overview
+   */
+  async getSystemOverview(): Promise<SystemOverview> {
+    const [services, health, proxies] = await Promise.all([
+      this.getServiceStatus(),
+      this.getSystemHealth(),
+      this.getProxyStats(),
+    ]);
+
+    return {
+      services,
+      health,
+      proxies: proxies || undefined,
+      environment: {
+        nodeVersion: process.version,
+        platform: os.platform(),
+        architecture: os.arch(),
+        hostname: os.hostname(),
+      },
+    };
+  }
+
+  /**
+   * Get detailed CPU usage
+   */
+  private getCpuUsage() {
+    const cpus = os.cpus();
+    let totalIdle = 0;
+    let totalTick = 0;
+
+    cpus.forEach(cpu => {
+      for (const type in cpu.times) {
+        totalTick += cpu.times[type as keyof typeof cpu.times];
+      }
+      totalIdle += cpu.times.idle;
+    });
+
+    const idle = totalIdle / cpus.length;
+    const total = totalTick / cpus.length;
+    const usage = 100 - ~~(100 * idle / total);
+
+    return {
+      usage,
+      loadAverage: os.loadavg(),
+      cores: cpus.length,
+    };
+  }
+
+  /**
+   * Get system memory info
+   */
+  private getSystemMemory() {
+    const totalMem = os.totalmem();
+    const freeMem = os.freemem();
+    
+    // On Linux, freeMem includes buffers/cache, but we want "available" memory
+    // which better represents memory that can be used by applications
+    let availableMem = freeMem;
+    
+    // Try to read from /proc/meminfo for more accurate memory stats on Linux
+    if (os.platform() === 'linux') {
+      try {
+        const fs = require('fs');
+        const meminfo = fs.readFileSync('/proc/meminfo', 'utf8');
+        const lines = meminfo.split('\n');
+        
+        let memAvailable = 0;
+        let memTotal = 0;
+        
+        for (const line of lines) {
+          if (line.startsWith('MemAvailable:')) {
+            memAvailable = parseInt(line.split(/\s+/)[1], 10) * 1024; // Convert from KB to bytes
+          } else if (line.startsWith('MemTotal:')) {
+            memTotal = parseInt(line.split(/\s+/)[1], 10) * 1024;
+          }
+        }
+        
+        if (memAvailable > 0) {
+          availableMem = memAvailable;
+        }
+      } catch (error) {
+        // Fallback to os.freemem() if we can't read /proc/meminfo
+        this.logger.debug('Could not read /proc/meminfo', { error });
+      }
+    }
+    
+    const usedMem = totalMem - availableMem;
+
+    return {
+      total: totalMem,
+      used: usedMem,
+      free: freeMem,
+      available: availableMem,
+      percentage: (usedMem / totalMem) * 100,
+    };
+  }
 }

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

@@ -31,6 +31,8 @@ export interface QueueStats {
     failed: number;
     delayed: number;
     paused: number;
+    prioritized?: number;
+    'waiting-children'?: number;
   };
   workers?: {
     count: number;
@@ -91,3 +93,35 @@ export interface ServiceMetrics {
   errorRate: MetricSnapshot;
   activeConnections: MetricSnapshot;
 }
+
+export interface ServiceStatus {
+  name: string;
+  version: string;
+  status: 'running' | 'stopped' | 'error';
+  port?: number;
+  uptime: number;
+  lastCheck: string;
+  healthy: boolean;
+  error?: string;
+}
+
+export interface ProxyStats {
+  enabled: boolean;
+  totalProxies: number;
+  workingProxies: number;
+  failedProxies: number;
+  lastUpdate?: string;
+  lastFetchTime?: string;
+}
+
+export interface SystemOverview {
+  services: ServiceStatus[];
+  health: SystemHealth;
+  proxies?: ProxyStats;
+  environment: {
+    nodeVersion: string;
+    platform: string;
+    architecture: string;
+    hostname: string;
+  };
+}

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

@@ -29,8 +29,8 @@ export function Layout() {
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
       <Header setSidebarOpen={setSidebarOpen} title={getTitle()} />
 
-      <main className="py-4 lg:pl-60 w-full h-full overflow-y-auto">
+      <main className="py-8 lg:pl-60 w-full h-full overflow-y-auto">
-        <div className="px-4 flex-col h-full">
+        <div className="px-8 flex-col h-full">
           <Outlet />
         </div>
       </main>

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { cn } from '@/lib/utils';
 
 interface CardProps {
@@ -11,7 +11,7 @@ export function Card({ children, className, hover = false }: CardProps) {
   return (
     <div
       className={cn(
-        'bg-surface-secondary rounded-lg border border-border p-4',
+        'bg-surface-secondary rounded-lg border border-border',
         hover && 'hover:border-primary-500/50 transition-colors',
         className
       )}

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Card } from './Card';
 
 interface StatCardProps {
@@ -21,7 +21,7 @@ export function StatCard({
   borderColor,
 }: StatCardProps) {
   return (
-    <Card hover className={`hover:${borderColor}`}>
+    <Card hover className={`p-4 hover:${borderColor}`}>
       <div className="flex items-center">
         <div className={`p-1.5 ${iconBgColor} rounded`}>{icon}</div>
         <div className="ml-3">

apps/stock/web-app/src/components/ui/index.ts

@@ -1,5 +1,6 @@
-export { Card, CardHeader, CardContent } from './Card';
+export { Button } from './Button';
-export { StatCard } from './StatCard';
+export { Card, CardContent, CardHeader } from './Card';
 export { DataTable } from './DataTable';
-export { Dialog, DialogContent, DialogHeader, DialogTitle } from './dialog';
+export { Dialog, DialogContent, DialogHeader, DialogTitle } from './Dialog';
-export { Button } from './button';
+export { StatCard } from './StatCard';
+

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

@@ -3,49 +3,105 @@
  */
 
 import React, { useState } from 'react';
-import { useSystemHealth, useCacheStats, useQueueStats, useDatabaseStats } from './hooks';
+import {
-import { SystemHealthCard, CacheStatsCard, QueueStatsTable, DatabaseStatsGrid } from './components';
+  CacheStatsCard,
+  DatabaseStatsGrid,
+  ProxyStatsCard,
+  QueueStatsTable,
+  ServiceStatusGrid,
+  SystemHealthCard
+} from './components';
+import {
+  useCacheStats,
+  useDatabaseStats,
+  useProxyStats,
+  useQueueStats,
+  useServiceStatus,
+  useSystemHealth,
+  useSystemOverview
+} from './hooks';
 
 export function MonitoringPage() {
   const [refreshInterval, setRefreshInterval] = useState(5000); // 5 seconds default
+  const [useOverview, setUseOverview] = useState(false); // Toggle between individual calls and overview
   
-  const { data: health, loading: healthLoading, error: healthError } = useSystemHealth(refreshInterval);
+  // Individual API calls
-  const { data: cache, loading: cacheLoading, error: cacheError } = useCacheStats(refreshInterval);
+  const { data: health, loading: healthLoading, error: healthError } = useSystemHealth(useOverview ? 0 : refreshInterval);
-  const { data: queues, loading: queuesLoading, error: queuesError } = useQueueStats(refreshInterval);
+  const { data: cache, loading: cacheLoading, error: cacheError } = useCacheStats(useOverview ? 0 : refreshInterval);
-  const { data: databases, loading: dbLoading, error: dbError } = useDatabaseStats(refreshInterval);
+  const { data: queues, loading: queuesLoading, error: queuesError } = useQueueStats(useOverview ? 0 : refreshInterval);
+  const { data: databases, loading: dbLoading, error: dbError } = useDatabaseStats(useOverview ? 0 : refreshInterval);
+  const { data: services, loading: servicesLoading, error: servicesError } = useServiceStatus(useOverview ? 0 : refreshInterval);
+  const { data: proxies, loading: proxiesLoading, error: proxiesError } = useProxyStats(useOverview ? 0 : refreshInterval);
+  
+  // Combined overview call
+  const { data: overview, loading: overviewLoading, error: overviewError } = useSystemOverview(useOverview ? refreshInterval : 0);
 
   const handleRefreshIntervalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setRefreshInterval(Number(e.target.value));
   };
 
-  if (healthLoading || cacheLoading || queuesLoading || dbLoading) {
+  const handleDataSourceToggle = () => {
+    setUseOverview(!useOverview);
+  };
+
+  // Use overview data if enabled
+  const displayHealth = useOverview && overview ? overview.health : health;
+  const displayServices = useOverview && overview ? overview.services : services;
+  const displayProxies = useOverview && overview ? overview.proxies : proxies;
+  const displayCache = useOverview && overview ? overview.health.services.cache : cache;
+  const displayQueues = useOverview && overview ? overview.health.services.queues : queues;
+  const displayDatabases = useOverview && overview ? overview.health.services.databases : databases;
+
+  const isLoading = useOverview 
+    ? overviewLoading 
+    : (healthLoading || cacheLoading || queuesLoading || dbLoading || servicesLoading || proxiesLoading);
+
+  const errors = useOverview 
+    ? (overviewError ? [overviewError] : [])
+    : [healthError, cacheError, queuesError, dbError, servicesError, proxiesError].filter(Boolean);
+
+  if (isLoading) {
     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>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mx-auto"></div>
-          <p className="mt-4 text-gray-600">Loading monitoring data...</p>
+          <p className="mt-4 text-text-secondary">Loading monitoring data...</p>
         </div>
       </div>
     );
   }
 
-  const hasErrors = healthError || cacheError || queuesError || dbError;
-
   return (
-    <div className="p-6">
+    <div className="flex flex-col h-full space-y-4">
-      <div className="mb-6">
+      <div className="flex items-center justify-between flex-shrink-0">
-        <div className="flex items-center justify-between">
+        <div>
-          <h1 className="text-2xl font-bold">System Monitoring</h1>
+          <h1 className="text-lg font-bold text-text-primary mb-2">System Monitoring</h1>
+        </div>
           <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">
+              <label className="text-sm text-text-secondary">
+                Data source:
+              </label>
+              <button
+                onClick={handleDataSourceToggle}
+                className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
+                  useOverview 
+                    ? 'bg-primary-600 text-white' 
+                    : 'bg-surface-tertiary text-text-primary'
+                }`}
+              >
+                {useOverview ? 'Overview API' : 'Individual APIs'}
+              </button>
+            </div>
+            <div className="flex items-center space-x-2">
+              <label htmlFor="refresh-interval" className="text-sm text-text-secondary">
                 Refresh interval:
               </label>
               <select
                 id="refresh-interval"
                 value={refreshInterval}
                 onChange={handleRefreshIntervalChange}
-                className="text-sm border rounded px-2 py-1"
+                className="text-sm bg-surface-secondary border border-border text-text-primary rounded px-2 py-1"
               >
                 <option value={0}>Manual</option>
                 <option value={5000}>5 seconds</option>
@@ -55,47 +111,76 @@ export function MonitoringPage() {
               </select>
             </div>
           </div>
-        </div>
       </div>
 
-      {hasErrors && (
+      {errors.length > 0 && (
-        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
+        <div className="p-3 bg-danger/10 border border-danger rounded-lg flex-shrink-0">
-          <h3 className="font-semibold text-red-800 mb-2">Errors occurred while fetching data:</h3>
+          <h3 className="font-semibold text-danger mb-2">Errors occurred while fetching data:</h3>
-          <ul className="list-disc list-inside text-sm text-red-700 space-y-1">
+          <ul className="list-disc list-inside text-sm text-danger space-y-1">
-            {healthError && <li>System Health: {healthError}</li>}
+            {errors.map((error, index) => (
-            {cacheError && <li>Cache Stats: {cacheError}</li>}
+              <li key={index}>{error}</li>
-            {queuesError && <li>Queue Stats: {queuesError}</li>}
+            ))}
-            {dbError && <li>Database Stats: {dbError}</li>}
           </ul>
         </div>
       )}
 
-      <div className="space-y-6">
+      {useOverview && overview && (
-        {/* System Health */}
+        <div className="p-3 bg-primary-500/10 border border-primary-500 rounded-lg flex-shrink-0">
-        {health && (
+          <h3 className="font-semibold text-primary-400 mb-2">System Environment</h3>
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
-            <div className="lg:col-span-1">
+            <div>
-              <SystemHealthCard health={health} />
+              <span className="text-primary-400">Node:</span> <span className="text-text-primary">{overview.environment.nodeVersion}</span>
             </div>
-            <div className="lg:col-span-2">
+            <div>
-              {cache && <CacheStatsCard stats={cache} />}
+              <span className="text-primary-400">Platform:</span> <span className="text-text-primary">{overview.environment.platform}</span>
+            </div>
+            <div>
+              <span className="text-primary-400">Architecture:</span> <span className="text-text-primary">{overview.environment.architecture}</span>
+            </div>
+            <div>
+              <span className="text-primary-400">Hostname:</span> <span className="text-text-primary">{overview.environment.hostname}</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="flex-1 min-h-0 space-y-4">
+        {/* Service Status */}
+        {displayServices && displayServices.length > 0 && (
+          <div>
+            <h2 className="text-lg font-semibold mb-3 text-text-primary">Microservices Status</h2>
+            <ServiceStatusGrid services={displayServices} />
+          </div>
+        )}
+
+        {/* System Health and Cache */}
+        {displayHealth && (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            <div className="lg:col-span-1">
+              <SystemHealthCard health={displayHealth} />
+            </div>
+            <div className="lg:col-span-1">
+              {displayCache && <CacheStatsCard stats={displayCache} />}
+            </div>
+            <div className="lg:col-span-1">
+              {displayProxies && <ProxyStatsCard stats={displayProxies} />}
             </div>
           </div>
         )}
 
         {/* Database Stats */}
-        {databases && databases.length > 0 && (
+        {displayDatabases && displayDatabases.length > 0 && (
           <div>
-            <h2 className="text-xl font-semibold mb-4">Database Connections</h2>
+            <h2 className="text-lg font-semibold mb-3 text-text-primary">Database Connections</h2>
-            <DatabaseStatsGrid databases={databases} />
+            <DatabaseStatsGrid databases={displayDatabases} />
           </div>
         )}
 
         {/* Queue Stats */}
-        {queues && queues.length > 0 && (
+        {displayQueues && displayQueues.length > 0 && (
           <div>
-            <h2 className="text-xl font-semibold mb-4">Queue Status</h2>
+            <h2 className="text-lg font-semibold mb-3 text-text-primary">Queue Status</h2>
-            <QueueStatsTable queues={queues} />
+            <QueueStatsTable queues={displayQueues} />
           </div>
         )}
       </div>

apps/stock/web-app/src/features/monitoring/README.md

@@ -0,0 +1,39 @@
+# Monitoring Components
+
+This directory contains monitoring components that have been refactored to use standardized UI components with a consistent dark theme.
+
+## Standardized Components
+
+### StatusBadge
+Used for displaying status indicators with consistent styling:
+- `ConnectionStatus` - Shows connected/disconnected state
+- `HealthStatus` - Shows healthy/unhealthy state  
+- `ServiceStatusIndicator` - Shows service status as a colored dot
+
+### MetricCard
+Displays metrics with optional progress bars in a consistent card layout.
+
+### Cards
+- `ServiceCard` - Displays individual service status
+- `DatabaseCard` - Displays database connection info
+- `SystemHealthCard` - Shows system health overview
+- `CacheStatsCard` - Shows cache statistics
+- `ProxyStatsCard` - Shows proxy status
+- `QueueStatsTable` - Displays queue statistics in a table
+
+## Theme Colors
+
+All components now use the standardized color palette from the Tailwind config:
+- Background: `bg-surface-secondary` (dark surfaces)
+- Borders: `border-border`
+- Text: `text-text-primary`, `text-text-secondary`, `text-text-muted`
+- Status colors: `text-success`, `text-danger`, `text-warning`
+- Primary accent: `text-primary-400`, `bg-primary-500/10`
+
+## Utilities
+
+Common formatting functions are available in `utils/formatters.ts`:
+- `formatUptime()` - Formats milliseconds to human-readable uptime
+- `formatBytes()` - Formats bytes to KB/MB/GB
+- `formatNumber()` - Adds thousand separators
+- `formatPercentage()` - Formats numbers as percentages

apps/stock/web-app/src/features/monitoring/SPACING.md

@@ -0,0 +1,44 @@
+# Monitoring Components - Spacing Guidelines
+
+This document outlines the standardized spacing used across monitoring components to maximize screen real estate.
+
+## Spacing Standards
+
+### Page Layout
+- Main container: `flex flex-col h-full space-y-4` (16px vertical gaps)
+- No outer padding - handled by parent layout
+- Section spacing: `space-y-4` between major sections
+
+### Cards
+- Card padding: `p-4` (16px) for main cards, `p-3` (12px) for compact cards
+- Card header: `pb-3` (12px bottom padding)
+- Card content spacing: `space-y-3` (12px gaps)
+- Grid gaps: `gap-3` (12px) or `gap-4` (16px)
+
+### Typography
+- Page title: `text-lg font-bold mb-2`
+- Section headings: `text-lg font-semibold mb-3`
+- Card titles: `text-base font-semibold`
+- Large values: `text-xl` or `text-lg`
+- Regular text: `text-sm`
+- Small text/labels: `text-xs`
+
+### Specific Components
+
+**ServiceCard**: `p-3` with `space-y-1.5` and `text-xs`
+**DatabaseCard**: `p-4` with `space-y-2`
+**SystemHealthCard**: `p-4` with `space-y-3`
+**CacheStatsCard**: `p-4` with `space-y-3`
+**ProxyStatsCard**: `p-4` with `space-y-3`
+**QueueStatsTable**: `p-4` with `text-xs` table
+
+### Grids
+- Service grid: `gap-3`
+- Database grid: `gap-3`
+- Main layout grid: `gap-4`
+
+## Benefits
+- Maximizes usable screen space
+- Consistent with dashboard/exchanges pages
+- More data visible without scrolling
+- Clean, compact appearance

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

@@ -2,95 +2,91 @@
  * Cache Statistics Card Component
  */
 
-import React from 'react';
-import { Card } from '../../../components/ui/Card';
 import type { CacheStats } from '../types';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { ConnectionStatus } from './StatusBadge';
+import { formatBytes, formatNumber, formatPercentage } from '../utils/formatters';
 
 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)
+    ? (stats.stats.hits / (stats.stats.hits + stats.stats.misses) * 100)
-    : '0';
+    : 0;
 
   return (
-    <Card className="p-6">
+    <Card className="p-4">
-      <div className="flex items-center justify-between mb-4">
+      <CardHeader className="p-0 pb-3">
-        <h3 className="text-lg font-semibold">Cache (Dragonfly)</h3>
+        <div className="flex items-center justify-between">
-        <span className={`px-2 py-1 rounded text-xs font-medium ${
+          <h3 className="text-base font-semibold text-text-primary">Cache (Dragonfly)</h3>
-          stats.connected ? 'text-green-600 bg-green-100' : 'text-red-600 bg-red-100'
+          <ConnectionStatus connected={stats.connected} size="md" />
-        }`}>
-          {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>
-      ) : (
+      </CardHeader>
-        <div className="text-center py-8 text-gray-500">
+
-          Cache service is not available
+      <CardContent className="p-0">
-        </div>
+        {stats.connected ? (
-      )}
+          <div className="space-y-3">
+            {stats.memoryUsage && (
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <div className="text-sm text-text-secondary">Memory Used</div>
+                  <div className="text-lg font-semibold text-text-primary">{formatBytes(stats.memoryUsage.used)}</div>
+                </div>
+                <div>
+                  <div className="text-sm text-text-secondary">Peak Memory</div>
+                  <div className="text-lg font-semibold text-text-primary">{formatBytes(stats.memoryUsage.peak)}</div>
+                </div>
+              </div>
+            )}
+
+            {stats.stats && (
+              <>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <div className="text-sm text-text-secondary">Hit Rate</div>
+                    <div className="text-lg font-semibold text-text-primary">{formatPercentage(hitRate)}</div>
+                  </div>
+                  <div>
+                    <div className="text-sm text-text-secondary">Total Keys</div>
+                    <div className="text-lg font-semibold text-text-primary">{formatNumber(stats.stats.keys)}</div>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-3 text-sm">
+                  <div>
+                    <span className="text-text-secondary">Hits:</span> <span className="text-text-primary">{formatNumber(stats.stats.hits)}</span>
+                  </div>
+                  <div>
+                    <span className="text-text-secondary">Misses:</span> <span className="text-text-primary">{formatNumber(stats.stats.misses)}</span>
+                  </div>
+                  {stats.stats.evictedKeys !== undefined && (
+                    <div>
+                      <span className="text-text-secondary">Evicted:</span> <span className="text-text-primary">{formatNumber(stats.stats.evictedKeys)}</span>
+                    </div>
+                  )}
+                  {stats.stats.expiredKeys !== undefined && (
+                    <div>
+                      <span className="text-text-secondary">Expired:</span> <span className="text-text-primary">{formatNumber(stats.stats.expiredKeys)}</span>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+
+            {stats.uptime && (
+              <div className="text-sm text-text-secondary">
+                Uptime: {Math.floor(stats.uptime / 3600)}h {Math.floor((stats.uptime % 3600) / 60)}m
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="text-center py-8 text-text-secondary">
+            Cache service is not available
+          </div>
+        )}
+      </CardContent>
     </Card>
   );
 }

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

@@ -0,0 +1,106 @@
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { ConnectionStatus } from './StatusBadge';
+import { formatPercentage } from '../utils/formatters';
+import type { DatabaseStats } from '../types';
+
+interface DatabaseCardProps {
+  database: DatabaseStats;
+}
+
+export function DatabaseCard({ database }: DatabaseCardProps) {
+  const getDbIcon = (type: string) => {
+    switch (type) {
+      case 'postgres':
+        return '🐘';
+      case 'mongodb':
+        return '🍃';
+      case 'questdb':
+        return '⚡';
+      default:
+        return '💾';
+    }
+  };
+
+  return (
+    <Card className="p-4">
+      <CardHeader className="p-0 pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <span className="text-2xl">{getDbIcon(database.type)}</span>
+            <h4 className="font-semibold text-text-primary">{database.name}</h4>
+          </div>
+          <ConnectionStatus connected={database.connected} />
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-0">
+        {database.connected ? (
+          <div className="space-y-2">
+            {database.latency !== undefined && (
+              <div>
+                <div className="text-sm text-text-secondary">Latency</div>
+                <div className="text-base font-semibold text-text-primary">{database.latency}ms</div>
+              </div>
+            )}
+
+            {database.pool && (
+              <div>
+                <div className="text-sm text-text-secondary mb-1">Connection Pool</div>
+                <div className="grid grid-cols-2 gap-2 text-xs">
+                  <div>
+                    <span className="text-text-secondary">Active:</span>{' '}
+                    <span className="text-text-primary">{database.pool.active}</span>
+                  </div>
+                  <div>
+                    <span className="text-text-secondary">Idle:</span>{' '}
+                    <span className="text-text-primary">{database.pool.idle}</span>
+                  </div>
+                  <div>
+                    <span className="text-text-secondary">Size:</span>{' '}
+                    <span className="text-text-primary">{database.pool.size}</span>
+                  </div>
+                  <div>
+                    <span className="text-text-secondary">Max:</span>{' '}
+                    <span className="text-text-primary">{database.pool.max}</span>
+                  </div>
+                </div>
+                
+                {database.pool.max > 0 && (
+                  <div className="mt-2">
+                    <div className="w-full bg-surface-tertiary rounded-full h-2">
+                      <div
+                        className="bg-primary-500 h-2 rounded-full transition-all"
+                        style={{ width: `${(database.pool.size / database.pool.max) * 100}%` }}
+                      />
+                    </div>
+                    <div className="text-xs text-text-muted mt-1">
+                      {formatPercentage((database.pool.size / database.pool.max) * 100, 0)} utilized
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {database.type === 'mongodb' && database.stats && (
+              <div className="text-xs text-text-secondary">
+                <div>Version: <span className="text-text-primary">{database.stats.version}</span></div>
+                {database.stats.connections && (
+                  <div>
+                    Connections:{' '}
+                    <span className="text-text-primary">
+                      {database.stats.connections.current}/{database.stats.connections.available}
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="text-center py-4 text-text-secondary">
+            Database is not available
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -2,102 +2,18 @@
  * Database Statistics Grid Component
  */
 
-import React from 'react';
-import { Card } from '../../../components/ui/Card';
 import type { DatabaseStats } from '../types';
+import { DatabaseCard } from './DatabaseCard';
 
 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">
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
       {databases.map((db) => (
-        <Card key={db.type} className="p-6">
+        <DatabaseCard key={db.type} database={db} />
-          <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/MetricCard.tsx

@@ -0,0 +1,57 @@
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { cn } from '@/lib/utils';
+
+interface MetricCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  valueClassName?: string;
+  progress?: {
+    value: number;
+    max: number;
+    label?: string;
+  };
+}
+
+export function MetricCard({ 
+  title, 
+  value, 
+  subtitle, 
+  icon,
+  valueClassName,
+  progress 
+}: MetricCardProps) {
+  return (
+    <Card className="p-3">
+      <CardHeader className="p-0 pb-2">
+        <div className="flex items-center justify-between">
+          <h4 className="text-sm font-medium text-text-secondary">{title}</h4>
+          {icon && <div className="text-text-muted">{icon}</div>}
+        </div>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className={cn('text-xl font-semibold text-text-primary', valueClassName)}>
+          {value}
+        </div>
+        {subtitle && (
+          <p className="text-xs text-text-muted mt-1">{subtitle}</p>
+        )}
+        {progress && (
+          <div className="mt-3">
+            <div className="flex justify-between text-xs text-text-secondary mb-1">
+              <span>{progress.label || 'Usage'}</span>
+              <span>{((progress.value / progress.max) * 100).toFixed(0)}%</span>
+            </div>
+            <div className="w-full bg-surface-tertiary rounded-full h-2">
+              <div
+                className="bg-primary-500 h-2 rounded-full transition-all"
+                style={{ width: `${Math.min((progress.value / progress.max) * 100, 100)}%` }}
+              />
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,90 @@
+/**
+ * Proxy Stats Card Component
+ */
+
+import type { ProxyStats } from '../types';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { StatusBadge } from './StatusBadge';
+import { formatPercentage } from '../utils/formatters';
+
+interface ProxyStatsCardProps {
+  stats: ProxyStats;
+}
+
+export function ProxyStatsCard({ stats }: ProxyStatsCardProps) {
+  const successRate = stats.totalProxies > 0 
+    ? (stats.workingProxies / stats.totalProxies) * 100
+    : 0;
+
+  const formatDate = (dateString?: string) => {
+    if (!dateString) return 'Never';
+    const date = new Date(dateString);
+    return date.toLocaleString();
+  };
+
+  return (
+    <Card className="p-4">
+      <CardHeader className="p-0 pb-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-base font-semibold text-text-primary">Proxy Status</h2>
+          <StatusBadge 
+            variant={stats.enabled ? 'success' : 'default'} 
+            size="md"
+          >
+            {stats.enabled ? 'Enabled' : 'Disabled'}
+          </StatusBadge>
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-0">
+        {stats.enabled ? (
+          <div className="space-y-3">
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <p className="text-sm text-text-secondary">Total Proxies</p>
+                <p className="text-xl font-bold text-text-primary">{stats.totalProxies}</p>
+              </div>
+              <div>
+                <p className="text-sm text-text-secondary">Success Rate</p>
+                <p className="text-xl font-bold text-text-primary">{formatPercentage(successRate)}</p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <p className="text-sm text-text-secondary">Working</p>
+                <p className="text-base font-semibold text-success">{stats.workingProxies}</p>
+              </div>
+              <div>
+                <p className="text-sm text-text-secondary">Failed</p>
+                <p className="text-base font-semibold text-danger">{stats.failedProxies}</p>
+              </div>
+            </div>
+
+            <div className="border-t border-border pt-3 space-y-2">
+              <div className="flex justify-between text-sm">
+                <span className="text-text-secondary">Last Update:</span>
+                <span className="font-medium text-text-primary">{formatDate(stats.lastUpdate)}</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-text-secondary">Last Fetch:</span>
+                <span className="font-medium text-text-primary">{formatDate(stats.lastFetchTime)}</span>
+              </div>
+            </div>
+
+            {stats.totalProxies === 0 && (
+              <div className="bg-warning/10 border border-warning rounded p-3 text-sm text-warning">
+                No proxies available. Check WebShare API configuration.
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="text-center py-8 text-text-secondary">
+            <p>Proxy service is disabled</p>
+            <p className="text-sm mt-2">Enable it in the configuration to use proxies</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -2,9 +2,10 @@
  * Queue Statistics Table Component
  */
 
-import React from 'react';
-import { Card } from '../../../components/ui/Card';
 import type { QueueStats } from '../types';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { formatNumber } from '../utils/formatters';
+import { cn } from '@/lib/utils';
 
 interface QueueStatsTableProps {
   queues: QueueStats[];
@@ -13,65 +14,91 @@ interface QueueStatsTableProps {
 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 jobs.waiting + jobs.active + jobs.completed + jobs.failed + jobs.delayed + jobs.paused + 
+           (jobs.prioritized || 0) + (jobs['waiting-children'] || 0);
   };
 
   return (
-    <Card className="p-6">
+    <Card className="p-4">
-      <h3 className="text-lg font-semibold mb-4">Queue Statistics</h3>
+      <CardHeader className="p-0 pb-3">
+        <h3 className="text-base font-semibold text-text-primary">Queue Statistics</h3>
+      </CardHeader>
       
-      {queues.length > 0 ? (
+      <CardContent className="p-0">
-        <div className="overflow-x-auto">
+        {queues.length > 0 ? (
-          <table className="w-full text-sm">
+          <div className="overflow-x-auto">
-            <thead>
+            <table className="w-full text-xs">
-              <tr className="border-b">
+              <thead>
-                <th className="text-left py-2 px-3">Queue</th>
+                <tr className="border-b border-border">
-                <th className="text-center py-2 px-3">Status</th>
+                  <th className="text-left py-2 px-3 text-text-secondary font-medium">Queue</th>
-                <th className="text-right py-2 px-3">Waiting</th>
+                  <th className="text-center py-2 px-3 text-text-secondary font-medium">Status</th>
-                <th className="text-right py-2 px-3">Active</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Waiting</th>
-                <th className="text-right py-2 px-3">Completed</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Active</th>
-                <th className="text-right py-2 px-3">Failed</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Completed</th>
-                <th className="text-right py-2 px-3">Delayed</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Failed</th>
-                <th className="text-right py-2 px-3">Total</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Delayed</th>
-              </tr>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Prioritized</th>
-            </thead>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Children</th>
-            <tbody>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Workers</th>
-              {queues.map((queue) => (
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Total</th>
-                <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>
-              ))}
+              </thead>
-            </tbody>
+              <tbody>
-          </table>
+                {queues.map((queue) => (
-        </div>
+                  <tr key={queue.name} className="border-b border-border hover:bg-surface-tertiary/50 transition-colors">
-      ) : (
+                    <td className="py-2 px-3 font-medium text-text-primary">{queue.name}</td>
-        <div className="text-center py-8 text-gray-500">
+                    <td className="py-2 px-3 text-center">
-          No queue data available
+                      <span className={cn(
-        </div>
+                        'inline-block w-2 h-2 rounded-full',
-      )}
+                        queue.connected ? 'bg-success' : 'bg-danger'
+                      )} />
+                    </td>
+                    <td className="py-2 px-3 text-right text-text-primary">{formatNumber(queue.jobs.waiting)}</td>
+                    <td className="py-2 px-3 text-right">
+                      {queue.jobs.active > 0 ? (
+                        <span className="text-primary-400 font-medium">{formatNumber(queue.jobs.active)}</span>
+                      ) : (
+                        <span className="text-text-primary">{queue.jobs.active}</span>
+                      )}
+                    </td>
+                    <td className="py-2 px-3 text-right text-text-primary">{formatNumber(queue.jobs.completed)}</td>
+                    <td className="py-2 px-3 text-right">
+                      {queue.jobs.failed > 0 ? (
+                        <span className="text-danger font-medium">{formatNumber(queue.jobs.failed)}</span>
+                      ) : (
+                        <span className="text-text-primary">{queue.jobs.failed}</span>
+                      )}
+                    </td>
+                    <td className="py-2 px-3 text-right text-text-primary">{formatNumber(queue.jobs.delayed)}</td>
+                    <td className="py-2 px-3 text-right">
+                      {queue.jobs.prioritized && queue.jobs.prioritized > 0 ? (
+                        <span className="text-primary-300 font-medium">{formatNumber(queue.jobs.prioritized)}</span>
+                      ) : (
+                        <span className="text-text-primary">0</span>
+                      )}
+                    </td>
+                    <td className="py-2 px-3 text-right">
+                      {queue.jobs['waiting-children'] && queue.jobs['waiting-children'] > 0 ? (
+                        <span className="text-warning font-medium">{formatNumber(queue.jobs['waiting-children'])}</span>
+                      ) : (
+                        <span className="text-text-primary">0</span>
+                      )}
+                    </td>
+                    <td className="py-2 px-3 text-right text-text-primary">
+                      {queue.workers ? `${queue.workers.count}/${queue.workers.concurrency}` : '-'}
+                    </td>
+                    <td className="py-2 px-3 text-right font-medium text-text-primary">{formatNumber(totalJobs(queue))}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="text-center py-6 text-text-secondary text-sm">
+            No queue data available
+          </div>
+        )}
+      </CardContent>
     </Card>
   );
 }

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

@@ -0,0 +1,56 @@
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { ServiceStatusIndicator, HealthStatus } from './StatusBadge';
+import { formatUptime } from '../utils/formatters';
+import type { ServiceStatus } from '../types';
+
+interface ServiceCardProps {
+  service: ServiceStatus;
+}
+
+export function ServiceCard({ service }: ServiceCardProps) {
+  return (
+    <Card className="p-3">
+      <CardHeader className="p-0 pb-2">
+        <div className="flex items-center justify-between">
+          <h3 className="font-semibold text-sm capitalize text-text-primary">
+            {service.name.replace(/-/g, ' ')}
+          </h3>
+          <ServiceStatusIndicator status={service.status} />
+        </div>
+      </CardHeader>
+      
+      <CardContent className="p-0 space-y-1.5 text-xs">
+        <div className="flex justify-between">
+          <span className="text-text-secondary">Status:</span>
+          <span className="font-medium capitalize text-text-primary">{service.status}</span>
+        </div>
+        
+        <div className="flex justify-between">
+          <span className="text-text-secondary">Port:</span>
+          <span className="font-medium text-text-primary">{service.port || 'N/A'}</span>
+        </div>
+        
+        <div className="flex justify-between">
+          <span className="text-text-secondary">Version:</span>
+          <span className="font-medium text-text-primary">{service.version}</span>
+        </div>
+        
+        <div className="flex justify-between">
+          <span className="text-text-secondary">Uptime:</span>
+          <span className="font-medium text-text-primary">{formatUptime(service.uptime)}</span>
+        </div>
+        
+        <div className="flex justify-between items-center">
+          <span className="text-text-secondary">Health:</span>
+          <HealthStatus healthy={service.healthy} />
+        </div>
+        
+        {service.error && (
+          <div className="mt-2 text-xs text-danger bg-danger/10 p-2 rounded">
+            Error: {service.error}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,20 @@
+/**
+ * Service Status Grid Component
+ */
+
+import type { ServiceStatus } from '../types';
+import { ServiceCard } from './ServiceCard';
+
+interface ServiceStatusGridProps {
+  services: ServiceStatus[];
+}
+
+export function ServiceStatusGrid({ services }: ServiceStatusGridProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+      {services.map((service) => (
+        <ServiceCard key={service.name} service={service} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,80 @@
+import { cn } from '@/lib/utils';
+
+type BadgeVariant = 'success' | 'danger' | 'warning' | 'default';
+
+interface StatusBadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  className?: string;
+  size?: 'sm' | 'md';
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  success: 'text-success bg-success/10',
+  danger: 'text-danger bg-danger/10',
+  warning: 'text-warning bg-warning/10',
+  default: 'text-text-secondary bg-text-secondary/10',
+};
+
+const sizeStyles = {
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-3 py-1 text-sm',
+};
+
+export function StatusBadge({ 
+  children, 
+  variant = 'default', 
+  className,
+  size = 'sm' 
+}: StatusBadgeProps) {
+  return (
+    <span className={cn(
+      'rounded-full font-medium',
+      variantStyles[variant],
+      sizeStyles[size],
+      className
+    )}>
+      {children}
+    </span>
+  );
+}
+
+interface ConnectionStatusProps {
+  connected: boolean;
+  size?: 'sm' | 'md';
+}
+
+export function ConnectionStatus({ connected, size = 'sm' }: ConnectionStatusProps) {
+  return (
+    <StatusBadge variant={connected ? 'success' : 'danger'} size={size}>
+      {connected ? 'Connected' : 'Disconnected'}
+    </StatusBadge>
+  );
+}
+
+interface HealthStatusProps {
+  healthy: boolean;
+  size?: 'sm' | 'md';
+}
+
+export function HealthStatus({ healthy, size = 'sm' }: HealthStatusProps) {
+  return (
+    <StatusBadge variant={healthy ? 'success' : 'danger'} size={size}>
+      {healthy ? 'Healthy' : 'Unhealthy'}
+    </StatusBadge>
+  );
+}
+
+interface ServiceStatusIndicatorProps {
+  status: 'running' | 'stopped' | 'error';
+}
+
+export function ServiceStatusIndicator({ status }: ServiceStatusIndicatorProps) {
+  const statusColors = {
+    running: 'bg-success',
+    stopped: 'bg-text-muted',
+    error: 'bg-danger',
+  };
+
+  return <div className={cn('w-3 h-3 rounded-full', statusColors[status])} />;
+}

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

@@ -2,75 +2,88 @@
  * System Health Card Component
  */
 
-import React from 'react';
-import { Card } from '../../../components/ui/Card';
 import type { SystemHealth } from '../types';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { StatusBadge } from './StatusBadge';
+import { formatUptime, formatBytes, formatPercentage } from '../utils/formatters';
 
 interface SystemHealthCardProps {
   health: SystemHealth;
 }
 
 export function SystemHealthCard({ health }: SystemHealthCardProps) {
-  const statusColor = {
+  const statusVariant = {
-    healthy: 'text-green-600 bg-green-100',
+    healthy: 'success' as const,
-    degraded: 'text-yellow-600 bg-yellow-100',
+    degraded: 'warning' as const,
-    unhealthy: 'text-red-600 bg-red-100',
+    unhealthy: 'danger' as const,
   }[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">
+    <Card className="p-4">
-      <div className="flex items-center justify-between mb-4">
+      <CardHeader className="p-0 pb-3">
-        <h3 className="text-lg font-semibold">System Health</h3>
+        <div className="flex items-center justify-between">
-        <span className={`px-3 py-1 rounded-full text-sm font-medium ${statusColor}`}>
+          <h3 className="text-base font-semibold text-text-primary">System Health</h3>
-          {health.status.toUpperCase()}
+          <StatusBadge variant={statusVariant} size="md">
-        </span>
+            {health.status.toUpperCase()}
-      </div>
+          </StatusBadge>
+        </div>
+      </CardHeader>
 
-      <div className="space-y-4">
+      <CardContent className="p-0 space-y-3">
         <div>
-          <div className="text-sm text-gray-600">Uptime</div>
+          <div className="text-sm text-text-secondary">Uptime</div>
-          <div className="text-2xl font-semibold">{formatUptime(health.uptime)}</div>
+          <div className="text-xl font-semibold text-text-primary">{formatUptime(health.uptime)}</div>
         </div>
 
         <div>
-          <div className="text-sm text-gray-600">Memory Usage</div>
+          <div className="text-sm text-text-secondary">System Memory</div>
           <div className="mt-1">
-            <div className="flex justify-between text-sm">
+            <div className="flex justify-between text-sm text-text-primary">
               <span>{formatBytes(health.memory.used)} / {formatBytes(health.memory.total)}</span>
-              <span>{health.memory.percentage.toFixed(1)}%</span>
+              <span>{formatPercentage(health.memory.percentage)}</span>
             </div>
-            <div className="mt-1 w-full bg-gray-200 rounded-full h-2">
+            <div className="mt-1 w-full bg-surface-tertiary rounded-full h-2">
               <div
-                className="bg-blue-600 h-2 rounded-full"
+                className="bg-primary-500 h-2 rounded-full transition-all"
-                style={{ width: `${health.memory.percentage}%` }}
+                style={{ width: `${Math.min(health.memory.percentage, 100)}%` }}
               />
             </div>
           </div>
+          {health.memory.available !== undefined && (
+            <div className="mt-2 text-xs text-text-muted">
+              Available: {formatBytes(health.memory.available)} (excludes cache/buffers)
+            </div>
+          )}
+          {health.memory.heap && (
+            <div className="mt-1 text-xs text-text-muted">
+              Node.js Heap: {formatBytes(health.memory.heap.used)} / {formatBytes(health.memory.heap.total)}
+            </div>
+          )}
         </div>
 
+        {health.cpu && (
+          <div>
+            <div className="text-sm text-text-secondary">CPU Usage</div>
+            <div className="flex items-center justify-between">
+              <div className="text-lg font-semibold text-text-primary">{health.cpu.usage}%</div>
+              {health.cpu.cores && (
+                <span className="text-sm text-text-secondary">{health.cpu.cores} cores</span>
+              )}
+            </div>
+            {health.cpu.loadAverage && (
+              <div className="text-xs text-text-muted mt-1">
+                Load: {health.cpu.loadAverage.map(l => l.toFixed(2)).join(', ')}
+              </div>
+            )}
+          </div>
+        )}
+
         {health.errors && health.errors.length > 0 && (
           <div>
-            <div className="text-sm text-gray-600 mb-2">Issues</div>
+            <div className="text-sm text-text-secondary mb-2">Issues</div>
             <ul className="space-y-1">
               {health.errors.map((error, index) => (
-                <li key={index} className="text-sm text-red-600">
+                <li key={index} className="text-sm text-danger">
                   • {error}
                 </li>
               ))}
@@ -78,10 +91,10 @@ export function SystemHealthCard({ health }: SystemHealthCardProps) {
           </div>
         )}
 
-        <div className="text-xs text-gray-500">
+        <div className="text-xs text-text-muted">
           Last updated: {new Date(health.timestamp).toLocaleTimeString()}
         </div>
-      </div>
+      </CardContent>
     </Card>
   );
 }

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

@@ -6,3 +6,9 @@ export { SystemHealthCard } from './SystemHealthCard';
 export { CacheStatsCard } from './CacheStatsCard';
 export { QueueStatsTable } from './QueueStatsTable';
 export { DatabaseStatsGrid } from './DatabaseStatsGrid';
+export { ServiceStatusGrid } from './ServiceStatusGrid';
+export { ProxyStatsCard } from './ProxyStatsCard';
+export { StatusBadge, ConnectionStatus, HealthStatus, ServiceStatusIndicator } from './StatusBadge';
+export { MetricCard } from './MetricCard';
+export { ServiceCard } from './ServiceCard';
+export { DatabaseCard } from './DatabaseCard';

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

@@ -4,7 +4,15 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { monitoringApi } from '../services/monitoringApi';
-import type { SystemHealth, CacheStats, QueueStats, DatabaseStats } from '../types';
+import type { 
+  SystemHealth, 
+  CacheStats, 
+  QueueStats, 
+  DatabaseStats,
+  ServiceStatus,
+  ProxyStats,
+  SystemOverview 
+} from '../types';
 
 export function useSystemHealth(refreshInterval: number = 5000) {
   const [data, setData] = useState<SystemHealth | null>(null);
@@ -121,3 +129,90 @@ export function useDatabaseStats(refreshInterval: number = 5000) {
 
   return { data, loading, error, refetch: fetchData };
 }
+
+export function useServiceStatus(refreshInterval: number = 5000) {
+  const [data, setData] = useState<ServiceStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const result = await monitoringApi.getServiceStatus();
+      setData(result.services);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch service status');
+    } 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 useProxyStats(refreshInterval: number = 5000) {
+  const [data, setData] = useState<ProxyStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const stats = await monitoringApi.getProxyStats();
+      setData(stats);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch proxy 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 useSystemOverview(refreshInterval: number = 5000) {
+  const [data, setData] = useState<SystemOverview | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const overview = await monitoringApi.getSystemOverview();
+      setData(overview);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch system overview');
+    } 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/services/monitoringApi.ts

@@ -2,7 +2,15 @@
  * Monitoring API Service
  */
 
-import type { SystemHealth, CacheStats, QueueStats, DatabaseStats } from '../types';
+import type { 
+  SystemHealth, 
+  CacheStats, 
+  QueueStats, 
+  DatabaseStats,
+  ServiceStatus,
+  ProxyStats,
+  SystemOverview 
+} 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`;
@@ -84,4 +92,37 @@ export const monitoringApi = {
     }
     return response.json();
   },
+
+  /**
+   * Get service status
+   */
+  async getServiceStatus(): Promise<{ services: ServiceStatus[] }> {
+    const response = await fetch(`${MONITORING_BASE}/services`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch service status: ${response.statusText}`);
+    }
+    return response.json();
+  },
+
+  /**
+   * Get proxy statistics
+   */
+  async getProxyStats(): Promise<ProxyStats> {
+    const response = await fetch(`${MONITORING_BASE}/proxies`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch proxy stats: ${response.statusText}`);
+    }
+    return response.json();
+  },
+
+  /**
+   * Get system overview
+   */
+  async getSystemOverview(): Promise<SystemOverview> {
+    const response = await fetch(`${MONITORING_BASE}/overview`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch system overview: ${response.statusText}`);
+    }
+    return response.json();
+  },
 };

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

@@ -31,6 +31,8 @@ export interface QueueStats {
     failed: number;
     delayed: number;
     paused: number;
+    prioritized?: number;
+    'waiting-children'?: number;
   };
   workers?: {
     count: number;
@@ -66,10 +68,16 @@ export interface SystemHealth {
     used: number;
     total: number;
     percentage: number;
+    available?: number;
+    heap?: {
+      used: number;
+      total: number;
+    };
   };
   cpu?: {
     usage: number;
     loadAverage?: number[];
+    cores?: number;
   };
   services: {
     cache: CacheStats;
@@ -78,3 +86,35 @@ export interface SystemHealth {
   };
   errors?: string[];
 }
+
+export interface ServiceStatus {
+  name: string;
+  version: string;
+  status: 'running' | 'stopped' | 'error';
+  port?: number;
+  uptime: number;
+  lastCheck: string;
+  healthy: boolean;
+  error?: string;
+}
+
+export interface ProxyStats {
+  enabled: boolean;
+  totalProxies: number;
+  workingProxies: number;
+  failedProxies: number;
+  lastUpdate?: string;
+  lastFetchTime?: string;
+}
+
+export interface SystemOverview {
+  services: ServiceStatus[];
+  health: SystemHealth;
+  proxies?: ProxyStats;
+  environment: {
+    nodeVersion: string;
+    platform: string;
+    architecture: string;
+    hostname: string;
+  };
+}

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

@@ -0,0 +1,42 @@
+/**
+ * Common formatting utilities for monitoring components
+ */
+
+export function formatUptime(ms: number): string {
+  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`;
+}
+
+export function formatBytes(bytes: number): string {
+  const gb = bytes / 1024 / 1024 / 1024;
+  if (gb >= 1) {
+    return gb.toFixed(2) + ' GB';
+  }
+  
+  const mb = bytes / 1024 / 1024;
+  if (mb >= 1) {
+    return mb.toFixed(2) + ' MB';
+  }
+  
+  const kb = bytes / 1024;
+  if (kb >= 1) {
+    return kb.toFixed(2) + ' KB';
+  }
+  
+  return bytes + ' B';
+}
+
+export function formatNumber(num: number): string {
+  return num.toLocaleString();
+}
+
+export function formatPercentage(value: number, decimals: number = 1): string {
+  return `${value.toFixed(decimals)}%`;
+}

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

@@ -5,7 +5,6 @@ import {
   CloudArrowDownIcon,
   ExclamationTriangleIcon,
   CheckCircleIcon,
-  ClockIcon,
 } from '@heroicons/react/24/outline';
 import { usePipeline } from './hooks/usePipeline';
 import type { PipelineOperation } from './types';
@@ -145,11 +144,11 @@ export function PipelinePage() {
   const getCategoryIcon = (category: string) => {
     switch (category) {
       case 'sync':
-        return <CloudArrowDownIcon className="h-5 w-5" />;
+        return <CloudArrowDownIcon className="h-4 w-4" />;
       case 'maintenance':
-        return <ExclamationTriangleIcon className="h-5 w-5" />;
+        return <ExclamationTriangleIcon className="h-4 w-4" />;
       default:
-        return <CircleStackIcon className="h-5 w-5" />;
+        return <CircleStackIcon className="h-4 w-4" />;
     }
   };
 
@@ -165,21 +164,21 @@ export function PipelinePage() {
   };
 
   return (
-    <div className="p-6 max-w-7xl mx-auto">
+    <div className="flex flex-col h-full space-y-4">
-      <div className="mb-8">
+      <div className="flex-shrink-0">
-        <h1 className="text-2xl font-bold text-text-primary mb-2">Data Pipeline Management</h1>
+        <h1 className="text-lg font-bold text-text-primary mb-2">Data Pipeline Management</h1>
-        <p className="text-text-secondary">
+        <p className="text-text-secondary text-sm">
           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">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 flex-shrink-0">
           {stats.exchanges && (
-            <div className="bg-surface-secondary p-4 rounded-lg border border-border">
+            <div className="bg-surface-secondary p-3 rounded-lg border border-border">
-              <h3 className="text-lg font-semibold text-text-primary mb-3">Exchange Statistics</h3>
+              <h3 className="text-base font-semibold text-text-primary mb-2">Exchange Statistics</h3>
-              <div className="space-y-2 text-sm">
+              <div className="space-y-1.5 text-xs">
                 <div className="flex justify-between">
                   <span className="text-text-secondary">Total Exchanges:</span>
                   <span className="text-text-primary font-medium">{stats.exchanges.totalExchanges}</span>
@@ -201,9 +200,9 @@ export function PipelinePage() {
           )}
 
           {stats.providerMappings && (
-            <div className="bg-surface-secondary p-4 rounded-lg border border-border">
+            <div className="bg-surface-secondary p-3 rounded-lg border border-border">
-              <h3 className="text-lg font-semibold text-text-primary mb-3">Provider Mapping Statistics</h3>
+              <h3 className="text-base font-semibold text-text-primary mb-2">Provider Mapping Statistics</h3>
-              <div className="space-y-2 text-sm">
+              <div className="space-y-1.5 text-xs">
                 <div className="flex justify-between">
                   <span className="text-text-secondary">Coverage:</span>
                   <span className="text-primary-400 font-medium">
@@ -224,7 +223,7 @@ export function PipelinePage() {
                     <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}
+                          {provider}: {String(count)}
                         </span>
                       ))}
                     </div>
@@ -238,27 +237,27 @@ export function PipelinePage() {
 
       {/* Status Messages */}
       {error && (
-        <div className="mb-6 p-4 bg-danger/10 border border-danger/20 rounded-lg">
+        <div className="p-3 bg-danger/10 border border-danger/20 rounded-lg flex-shrink-0">
           <div className="flex items-center gap-2">
-            <ExclamationTriangleIcon className="h-5 w-5 text-danger" />
+            <ExclamationTriangleIcon className="h-4 w-4 text-danger" />
-            <span className="text-danger">{error}</span>
+            <span className="text-danger text-sm">{error}</span>
           </div>
         </div>
       )}
 
       {lastJobResult && (
-        <div className={`mb-6 p-4 rounded-lg border ${
+        <div className={`p-3 rounded-lg border flex-shrink-0 ${
           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" />
+              <CheckCircleIcon className="h-4 w-4 text-success" />
             ) : (
-              <ExclamationTriangleIcon className="h-5 w-5 text-danger" />
+              <ExclamationTriangleIcon className="h-4 w-4 text-danger" />
             )}
-            <span className={lastJobResult.success ? 'text-success' : 'text-danger'}>
+            <span className={`text-sm ${lastJobResult.success ? 'text-success' : 'text-danger'}`}>
               {lastJobResult.message || lastJobResult.error}
             </span>
             {lastJobResult.jobId && (
@@ -271,35 +270,35 @@ export function PipelinePage() {
       )}
 
       {/* Operations Grid */}
-      <div className="space-y-6">
+      <div className="flex-1 min-h-0 space-y-4 overflow-y-auto">
         {/* Sync Operations */}
         <div>
-          <h2 className="text-lg font-semibold text-text-primary mb-4 flex items-center gap-2">
+          <h2 className="text-base font-semibold text-text-primary mb-3 flex items-center gap-2">
-            <CloudArrowDownIcon className="h-5 w-5 text-primary-400" />
+            <CloudArrowDownIcon className="h-4 w-4 text-primary-400" />
             Sync Operations
           </h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
             {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"
+                className="bg-surface-secondary p-3 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>
+                  <h3 className="font-medium text-sm 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>
+                <p className="text-xs text-text-secondary mb-2">{op.description}</p>
                 
                 {/* Special inputs for specific operations */}
                 {op.id === 'sync-provider-symbols' && (
-                  <div className="mb-3">
+                  <div className="mb-2">
                     <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"
+                      className="w-full px-2 py-1 text-xs 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>
@@ -309,8 +308,8 @@ export function PipelinePage() {
                 )}
 
                 {op.id === 'sync-all-exchanges' && (
-                  <div className="mb-3">
+                  <div className="mb-2">
-                    <label className="flex items-center gap-2 text-sm">
+                    <label className="flex items-center gap-2 text-xs">
                       <input
                         type="checkbox"
                         checked={clearFirst}
@@ -325,16 +324,16 @@ export function PipelinePage() {
                 <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"
+                  className="w-full px-2.5 py-1.5 bg-primary-500/20 text-primary-400 rounded text-xs 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" />
+                      <ArrowPathIcon className="h-3 w-3 animate-spin" />
                       Processing...
                     </>
                   ) : (
                     <>
-                      <CloudArrowDownIcon className="h-4 w-4" />
+                      <CloudArrowDownIcon className="h-3 w-3" />
                       Execute
                     </>
                   )}
@@ -346,31 +345,31 @@ export function PipelinePage() {
 
         {/* Maintenance Operations */}
         <div>
-          <h2 className="text-lg font-semibold text-text-primary mb-4 flex items-center gap-2">
+          <h2 className="text-base font-semibold text-text-primary mb-3 flex items-center gap-2">
-            <ExclamationTriangleIcon className="h-5 w-5 text-warning" />
+            <ExclamationTriangleIcon className="h-4 w-4 text-warning" />
             Maintenance Operations
           </h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
             {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>
+                  <h3 className="font-medium text-sm 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>
+                <p className="text-xs text-text-secondary mb-2">{op.description}</p>
                 
                 {op.id === 'clear-postgresql' && (
-                  <div className="mb-3">
+                  <div className="mb-2">
                     <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"
+                      className="w-full px-2 py-1 text-xs 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>
@@ -382,16 +381,16 @@ export function PipelinePage() {
                 <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"
+                  className="w-full px-2.5 py-1.5 bg-warning/20 text-warning rounded text-xs 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" />
+                      <ArrowPathIcon className="h-3 w-3 animate-spin" />
                       Processing...
                     </>
                   ) : (
                     <>
-                      <ExclamationTriangleIcon className="h-4 w-4" />
+                      <ExclamationTriangleIcon className="h-3 w-3" />
                       Execute
                     </>
                   )}

apps/stock/web-app/src/features/pipeline/SPACING.md

@@ -0,0 +1,58 @@
+# Pipeline Page - Spacing Updates
+
+This document outlines the spacing standardization applied to the Pipeline page to match the monitoring and dashboard pages.
+
+## Changes Applied
+
+### Layout Structure
+- Main container: `flex flex-col h-full space-y-4`
+- No outer padding (handled by parent layout)
+- Flex-shrink-0 for fixed elements
+- Overflow-y-auto for scrollable content area
+
+### Typography
+- Page title: `text-lg` (from `text-2xl`)
+- Page description: `text-sm`
+- Section headings: `text-base` (from `text-lg`)
+- Card titles: `text-sm`
+- Card descriptions: `text-xs` (from `text-sm`)
+- All text in cards: `text-xs`
+
+### Spacing
+- Grid gaps: `gap-3` (from `gap-4`)
+- Card padding: `p-3` (from `p-4`)
+- Margins: `mb-2` or `mb-3` (from `mb-3` or `mb-4`)
+- Button padding: `px-2.5 py-1.5` (from `px-3 py-2`)
+
+### Icons
+- Section icons: `h-4 w-4` (from `h-5 w-5`)
+- Button icons: `h-3 w-3` (from `h-4 w-4`)
+
+### Specific Components
+
+**Stats Cards**:
+- Padding: `p-3`
+- Title: `text-base mb-2`
+- Content: `text-xs` with `space-y-1.5`
+
+**Operation Cards**:
+- Padding: `p-3`
+- Title: `text-sm`
+- Description: `text-xs mb-2`
+- Form elements: `text-xs` with `mb-2`
+
+**Buttons**:
+- Padding: `px-2.5 py-1.5`
+- Text: `text-xs`
+- Icons: `h-3 w-3`
+
+**Alert Messages**:
+- Padding: `p-3`
+- Text: `text-sm`
+- Icons: `h-4 w-4`
+
+## Benefits
+- Consistent with monitoring and dashboard pages
+- More operations visible without scrolling
+- Cleaner, more compact appearance
+- Better space utilization for data-heavy interface

libs/services/queue/src/queue.ts

@@ -83,6 +83,13 @@ export class Queue {
     return this.queueName;
   }
 
+  /**
+   * Get the underlying BullMQ queue instance (for monitoring/admin purposes)
+   */
+  getBullQueue(): BullQueue {
+    return this.bullQueue;
+  }
+
   /**
    * Add a single job to the queue
    */
@@ -384,11 +391,4 @@ export class Queue {
     return this.workers.length;
   }
 
-  /**
-   * Get the underlying BullMQ queue (for advanced operations)
-   * @deprecated Use direct methods instead
-   */
-  getBullQueue(): BullQueue {
-    return this.bullQueue;
-  }
 }

libs/services/queue/src/smart-queue-manager.ts

@@ -145,6 +145,7 @@ export class SmartQueueManager extends QueueManager {
     return super.getQueue(fullQueueName, options);
   }
 
+
   /**
    * Send a job to any queue (local or remote)
    * This is the main method for cross-service communication
@@ -263,6 +264,53 @@ export class SmartQueueManager extends QueueManager {
     return this.producerQueues.get(route.fullName)!;
   }
 
+  /**
+   * Get all queues (for monitoring purposes)
+   */
+  getAllQueues(): Record<string, BullQueue> {
+    const allQueues: Record<string, BullQueue> = {};
+    
+    // Get all worker queues using public API
+    const workerQueueNames = this.getQueueNames();
+    for (const name of workerQueueNames) {
+      const queue = this.getQueue(name);
+      if (queue && typeof queue.getBullQueue === 'function') {
+        // Extract the underlying BullMQ queue using the public getter
+        // Use the simple handler name without service prefix for display
+        const parts = name.split(':');
+        const simpleName = parts.length > 1 ? parts[1] : name;
+        if (simpleName) {
+          allQueues[simpleName] = queue.getBullQueue();
+        }
+      }
+    }
+    
+    // Add producer queues
+    for (const [name, queue] of this.producerQueues) {
+      // Use the simple handler name without service prefix for display
+      const parts = name.split(':');
+      const simpleName = parts.length > 1 ? parts[1] : name;
+      if (simpleName && !allQueues[simpleName]) {
+        allQueues[simpleName] = queue;
+      }
+    }
+    
+    // If no queues found, return all registered handlers as BullMQ queues
+    if (Object.keys(allQueues).length === 0) {
+      // Create BullMQ queue instances for known handlers
+      const handlers = ['proxy', 'qm', 'ib', 'ceo', 'webshare', 'exchanges', 'symbols'];
+      for (const handler of handlers) {
+        const connection = this.getConnection(1); // Use default DB
+        allQueues[handler] = new BullQueue(`{${handler}}`, {
+          connection,
+          defaultJobOptions: this.getConfig().defaultQueueOptions?.defaultJobOptions || {},
+        });
+      }
+    }
+    
+    return allQueues;
+  }
+
   /**
    * Get statistics for all queues across all services
    */