reorganized web-app

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 { SystemHealthCard, CacheStatsCard, QueueStatsTable, DatabaseStatsGrid } from './components';
+import {
+  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);
-  const { data: cache, loading: cacheLoading, error: cacheError } = useCacheStats(refreshInterval);
-  const { data: queues, loading: queuesLoading, error: queuesError } = useQueueStats(refreshInterval);
-  const { data: databases, loading: dbLoading, error: dbError } = useDatabaseStats(refreshInterval);
+  // Individual API calls
+  const { data: health, loading: healthLoading, error: healthError } = useSystemHealth(useOverview ? 0 : refreshInterval);
+  const { data: cache, loading: cacheLoading, error: cacheError } = useCacheStats(useOverview ? 0 : 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>
-          <p className="mt-4 text-gray-600">Loading monitoring data...</p>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mx-auto"></div>
+          <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="mb-6">
-        <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-bold">System Monitoring</h1>
+    <div className="flex flex-col h-full space-y-4">
+      <div className="flex items-center justify-between flex-shrink-0">
+        <div>
+          <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 && (
-        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
-          <h3 className="font-semibold text-red-800 mb-2">Errors occurred while fetching data:</h3>
-          <ul className="list-disc list-inside text-sm text-red-700 space-y-1">
-            {healthError && <li>System Health: {healthError}</li>}
-            {cacheError && <li>Cache Stats: {cacheError}</li>}
-            {queuesError && <li>Queue Stats: {queuesError}</li>}
-            {dbError && <li>Database Stats: {dbError}</li>}
+      {errors.length > 0 && (
+        <div className="p-3 bg-danger/10 border border-danger rounded-lg flex-shrink-0">
+          <h3 className="font-semibold text-danger mb-2">Errors occurred while fetching data:</h3>
+          <ul className="list-disc list-inside text-sm text-danger space-y-1">
+            {errors.map((error, index) => (
+              <li key={index}>{error}</li>
+            ))}
           </ul>
         </div>
       )}
 
-      <div className="space-y-6">
-        {/* System Health */}
-        {health && (
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <div className="lg:col-span-1">
-              <SystemHealthCard health={health} />
+      {useOverview && overview && (
+        <div className="p-3 bg-primary-500/10 border border-primary-500 rounded-lg flex-shrink-0">
+          <h3 className="font-semibold text-primary-400 mb-2">System Environment</h3>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+            <div>
+              <span className="text-primary-400">Node:</span> <span className="text-text-primary">{overview.environment.nodeVersion}</span>
             </div>
-            <div className="lg:col-span-2">
-              {cache && <CacheStatsCard stats={cache} />}
+            <div>
+              <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>
-            <DatabaseStatsGrid databases={databases} />
+            <h2 className="text-lg font-semibold mb-3 text-text-primary">Database Connections</h2>
+            <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>
-            <QueueStatsTable queues={queues} />
+            <h2 className="text-lg font-semibold mb-3 text-text-primary">Queue Status</h2>
+            <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)
-    : '0';
+    ? (stats.stats.hits / (stats.stats.hits + stats.stats.misses) * 100)
+    : 0;
 
   return (
-    <Card className="p-6">
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-semibold">Cache (Dragonfly)</h3>
-        <span className={`px-2 py-1 rounded text-xs font-medium ${
-          stats.connected ? 'text-green-600 bg-green-100' : 'text-red-600 bg-red-100'
-        }`}>
-          {stats.connected ? 'Connected' : 'Disconnected'}
-        </span>
-      </div>
-
-      {stats.connected ? (
-        <div className="space-y-4">
-          {stats.memoryUsage && (
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <div className="text-sm text-gray-600">Memory Used</div>
-                <div className="text-xl font-semibold">{formatBytes(stats.memoryUsage.used)}</div>
-              </div>
-              <div>
-                <div className="text-sm text-gray-600">Peak Memory</div>
-                <div className="text-xl font-semibold">{formatBytes(stats.memoryUsage.peak)}</div>
-              </div>
-            </div>
-          )}
-
-          {stats.stats && (
-            <>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <div className="text-sm text-gray-600">Hit Rate</div>
-                  <div className="text-xl font-semibold">{hitRate}%</div>
-                </div>
-                <div>
-                  <div className="text-sm text-gray-600">Total Keys</div>
-                  <div className="text-xl font-semibold">{stats.stats.keys.toLocaleString()}</div>
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4 text-sm">
-                <div>
-                  <span className="text-gray-600">Hits:</span> {stats.stats.hits.toLocaleString()}
-                </div>
-                <div>
-                  <span className="text-gray-600">Misses:</span> {stats.stats.misses.toLocaleString()}
-                </div>
-                {stats.stats.evictedKeys !== undefined && (
-                  <div>
-                    <span className="text-gray-600">Evicted:</span> {stats.stats.evictedKeys.toLocaleString()}
-                  </div>
-                )}
-                {stats.stats.expiredKeys !== undefined && (
-                  <div>
-                    <span className="text-gray-600">Expired:</span> {stats.stats.expiredKeys.toLocaleString()}
-                  </div>
-                )}
-              </div>
-            </>
-          )}
-
-          {stats.uptime && (
-            <div className="text-sm text-gray-600">
-              Uptime: {Math.floor(stats.uptime / 3600)}h {Math.floor((stats.uptime % 3600) / 60)}m
-            </div>
-          )}
+    <Card className="p-4">
+      <CardHeader className="p-0 pb-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-base font-semibold text-text-primary">Cache (Dragonfly)</h3>
+          <ConnectionStatus connected={stats.connected} size="md" />
         </div>
-      ) : (
-        <div className="text-center py-8 text-gray-500">
-          Cache service is not available
-        </div>
-      )}
+      </CardHeader>
+
+      <CardContent className="p-0">
+        {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">
-          <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>
+        <DatabaseCard key={db.type} database={db} />
       ))}
     </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">
-      <h3 className="text-lg font-semibold mb-4">Queue Statistics</h3>
+    <Card className="p-4">
+      <CardHeader className="p-0 pb-3">
+        <h3 className="text-base font-semibold text-text-primary">Queue Statistics</h3>
+      </CardHeader>
       
-      {queues.length > 0 ? (
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b">
-                <th className="text-left py-2 px-3">Queue</th>
-                <th className="text-center py-2 px-3">Status</th>
-                <th className="text-right py-2 px-3">Waiting</th>
-                <th className="text-right py-2 px-3">Active</th>
-                <th className="text-right py-2 px-3">Completed</th>
-                <th className="text-right py-2 px-3">Failed</th>
-                <th className="text-right py-2 px-3">Delayed</th>
-                <th className="text-right py-2 px-3">Total</th>
-              </tr>
-            </thead>
-            <tbody>
-              {queues.map((queue) => (
-                <tr key={queue.name} className="border-b hover:bg-gray-50">
-                  <td className="py-2 px-3 font-medium">{queue.name}</td>
-                  <td className="py-2 px-3 text-center">
-                    <span className={`inline-block w-2 h-2 rounded-full ${
-                      queue.connected ? 'bg-green-500' : 'bg-red-500'
-                    }`} />
-                  </td>
-                  <td className="py-2 px-3 text-right">{queue.jobs.waiting.toLocaleString()}</td>
-                  <td className="py-2 px-3 text-right">
-                    {queue.jobs.active > 0 ? (
-                      <span className="text-blue-600 font-medium">{queue.jobs.active}</span>
-                    ) : (
-                      queue.jobs.active
-                    )}
-                  </td>
-                  <td className="py-2 px-3 text-right">{queue.jobs.completed.toLocaleString()}</td>
-                  <td className="py-2 px-3 text-right">
-                    {queue.jobs.failed > 0 ? (
-                      <span className="text-red-600 font-medium">{queue.jobs.failed}</span>
-                    ) : (
-                      queue.jobs.failed
-                    )}
-                  </td>
-                  <td className="py-2 px-3 text-right">{queue.jobs.delayed.toLocaleString()}</td>
-                  <td className="py-2 px-3 text-right font-medium">{totalJobs(queue).toLocaleString()}</td>
+      <CardContent className="p-0">
+        {queues.length > 0 ? (
+          <div className="overflow-x-auto">
+            <table className="w-full text-xs">
+              <thead>
+                <tr className="border-b border-border">
+                  <th className="text-left py-2 px-3 text-text-secondary font-medium">Queue</th>
+                  <th className="text-center py-2 px-3 text-text-secondary font-medium">Status</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Waiting</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Active</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Completed</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Failed</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Delayed</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Prioritized</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Children</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Workers</th>
+                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Total</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      ) : (
-        <div className="text-center py-8 text-gray-500">
-          No queue data available
-        </div>
-      )}
+              </thead>
+              <tbody>
+                {queues.map((queue) => (
+                  <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>
+                    <td className="py-2 px-3 text-center">
+                      <span className={cn(
+                        '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 = {
-    healthy: 'text-green-600 bg-green-100',
-    degraded: 'text-yellow-600 bg-yellow-100',
-    unhealthy: 'text-red-600 bg-red-100',
+  const statusVariant = {
+    healthy: 'success' as const,
+    degraded: 'warning' as const,
+    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">
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-semibold">System Health</h3>
-        <span className={`px-3 py-1 rounded-full text-sm font-medium ${statusColor}`}>
-          {health.status.toUpperCase()}
-        </span>
-      </div>
+    <Card className="p-4">
+      <CardHeader className="p-0 pb-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-base font-semibold text-text-primary">System Health</h3>
+          <StatusBadge variant={statusVariant} size="md">
+            {health.status.toUpperCase()}
+          </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-2xl font-semibold">{formatUptime(health.uptime)}</div>
+          <div className="text-sm text-text-secondary">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"
-                style={{ width: `${health.memory.percentage}%` }}
+                className="bg-primary-500 h-2 rounded-full transition-all"
+                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

@@ -5,4 +5,10 @@
 export { SystemHealthCard } from './SystemHealthCard';
 export { CacheStatsCard } from './CacheStatsCard';
 export { QueueStatsTable } from './QueueStatsTable';
-export { DatabaseStatsGrid } from './DatabaseStatsGrid';
+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);
@@ -119,5 +127,92 @@ export function useDatabaseStats(refreshInterval: number = 5000) {
     }
   }, [fetchData, refreshInterval]);
 
+  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;
@@ -77,4 +85,36 @@ export interface SystemHealth {
     databases: DatabaseStats[];
   };
   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="mb-8">
-        <h1 className="text-2xl font-bold text-text-primary mb-2">Data Pipeline Management</h1>
-        <p className="text-text-secondary">
+    <div className="flex flex-col h-full space-y-4">
+      <div className="flex-shrink-0">
+        <h1 className="text-lg font-bold text-text-primary mb-2">Data Pipeline Management</h1>
+        <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">
-              <h3 className="text-lg font-semibold text-text-primary mb-3">Exchange Statistics</h3>
-              <div className="space-y-2 text-sm">
+            <div className="bg-surface-secondary p-3 rounded-lg border border-border">
+              <h3 className="text-base font-semibold text-text-primary mb-2">Exchange Statistics</h3>
+              <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">
-              <h3 className="text-lg font-semibold text-text-primary mb-3">Provider Mapping Statistics</h3>
-              <div className="space-y-2 text-sm">
+            <div className="bg-surface-secondary p-3 rounded-lg border border-border">
+              <h3 className="text-base font-semibold text-text-primary mb-2">Provider Mapping Statistics</h3>
+              <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" />
-            <span className="text-danger">{error}</span>
+            <ExclamationTriangleIcon className="h-4 w-4 text-danger" />
+            <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">
-            <CloudArrowDownIcon className="h-5 w-5 text-primary-400" />
+          <h2 className="text-base font-semibold text-text-primary mb-3 flex items-center gap-2">
+            <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">
-                    <label className="flex items-center gap-2 text-sm">
+                  <div className="mb-2">
+                    <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">
-            <ExclamationTriangleIcon className="h-5 w-5 text-warning" />
+          <h2 className="text-base font-semibold text-text-primary mb-3 flex items-center gap-2">
+            <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