lepus 0.0.1.beta2 → 0.1.0

data/web/assets/js/offline-manager.js

@@ -0,0 +1,233 @@
+// Offline Manager - Handles offline detection and external dependency loading
+class OfflineManager {
+  constructor() {
+    this.isOnline = navigator.onLine;
+    this.stimulusLoaded = false;
+    this.chartLoaded = false;
+    this.initialized = false;
+
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    // Set up online/offline event listeners
+    window.addEventListener('online', () => {
+      this.isOnline = true;
+      this.hideOfflineBanner();
+      this.hideOfflineContent();
+    });
+
+    window.addEventListener('offline', () => {
+      this.isOnline = false;
+      this.showOfflineBanner();
+      this.showOfflineContent();
+    });
+  }
+
+  // Function to show offline banner
+  showOfflineBanner() {
+    const banner = document.getElementById('offline-banner');
+    if (banner) {
+      banner.style.display = 'block';
+    }
+  }
+
+  // Function to hide offline banner
+  hideOfflineBanner() {
+    const banner = document.getElementById('offline-banner');
+    if (banner) {
+      banner.style.display = 'none';
+    }
+  }
+
+  // Function to show offline content
+  showOfflineContent() {
+    const content = document.getElementById('offline-content');
+    const mainContent = document.querySelector('.stats-grid');
+    if (content && mainContent) {
+      content.style.display = 'flex';
+      mainContent.style.display = 'none';
+      // Hide other main sections
+      document.querySelectorAll('.chart-grid, .processes-grid, .queues-grid').forEach(section => {
+        section.style.display = 'none';
+      });
+    }
+  }
+
+  // Function to hide offline content
+  hideOfflineContent() {
+    const content = document.getElementById('offline-content');
+    const mainContent = document.querySelector('.stats-grid');
+    if (content && mainContent) {
+      content.style.display = 'none';
+      mainContent.style.display = 'grid';
+      // Show other main sections
+      document.querySelectorAll('.chart-grid, .processes-grid, .queues-grid').forEach(section => {
+        section.style.display = 'grid';
+      });
+    }
+  }
+
+  // Function to load external scripts with fallback
+  loadExternalScript(src, fallbackCode, onLoad) {
+    const script = document.createElement('script');
+    script.src = src;
+    script.onload = function() {
+      onLoad(true);
+    };
+    script.onerror = function() {
+      console.warn('Failed to load external script:', src);
+      if (fallbackCode) {
+        // Execute fallback code
+        eval(fallbackCode);
+        onLoad(false);
+      } else {
+        onLoad(false);
+      }
+    };
+    document.head.appendChild(script);
+  }
+
+  // Load Stimulus with fallback
+  loadStimulus() {
+    return new Promise((resolve) => {
+      this.loadExternalScript(
+        'https://unpkg.com/@hotwired/stimulus@3.2.2/dist/stimulus.umd.js',
+        `
+          // Minimal Stimulus fallback
+          window.Stimulus = {
+            Application: class {
+              constructor() { this.controllers = new Map(); }
+              register(name, controller) { this.controllers.set(name, controller); }
+              start() {
+                console.warn('Using offline Stimulus fallback');
+                // Basic controller initialization
+                document.querySelectorAll('[data-controller]').forEach(element => {
+                  const controllers = element.dataset.controller.split(' ');
+                  controllers.forEach(controllerName => {
+                    const ControllerClass = this.controllers.get(controllerName);
+                    if (ControllerClass) {
+                      new ControllerClass(element);
+                    }
+                  });
+                });
+              }
+            },
+            Controller: class {
+              constructor(element) { this.element = element; }
+              get targets() {
+                return {
+                  find: (name) => this.element.querySelector('[data-' + this.constructor.name.toLowerCase().replace('controller', '') + '-target="' + name + '"]'),
+                  findAll: (name) => this.element.querySelectorAll('[data-' + this.constructor.name.toLowerCase().replace('controller', '') + '-target="' + name + '"]')
+                };
+              }
+            }
+          };
+        `,
+        (loaded) => {
+          this.stimulusLoaded = loaded;
+          if (!loaded) this.showOfflineBanner();
+          resolve(loaded);
+        }
+      );
+    });
+  }
+
+  // Load Chart.js with fallback
+  loadChartJs() {
+    return new Promise((resolve) => {
+      this.loadExternalScript(
+        'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js',
+        `
+          // Chart.js fallback - simple canvas drawing
+          window.Chart = class {
+            constructor(ctx, config) {
+              this.ctx = ctx;
+              this.config = config;
+              this.drawFallbackChart();
+            }
+
+            drawFallbackChart() {
+              const canvas = this.ctx.canvas;
+              const width = canvas.width;
+              const height = canvas.height;
+
+              // Clear canvas
+              this.ctx.clearRect(0, 0, width, height);
+
+              // Draw fallback message
+              this.ctx.fillStyle = '#666';
+              this.ctx.font = '14px system-ui';
+              this.ctx.textAlign = 'center';
+              this.ctx.fillText('Charts unavailable offline', width/2, height/2);
+            }
+
+            update() { this.drawFallbackChart(); }
+            destroy() {}
+          };
+        `,
+        (loaded) => {
+          this.chartLoaded = loaded;
+          if (!loaded) this.showOfflineBanner();
+          resolve(loaded);
+        }
+      );
+    });
+  }
+
+  // Load local scripts serially. Controllers reference `StimulusApp`
+  // defined by app.js, so they must not execute before app.js.
+  loadLocalScripts() {
+    const scripts = [
+      'assets/js/app.js',
+      'assets/js/controllers/theme_controller.js',
+      'assets/js/controllers/connection_controller.js',
+      'assets/js/controllers/dashboard_controller.js',
+      'assets/js/controllers/queue_controller.js'
+    ];
+
+    const loadOne = (src) => new Promise((resolve) => {
+      const script = document.createElement('script');
+      script.src = src;
+      script.onload = () => resolve();
+      script.onerror = () => {
+        console.warn('Failed to load local script:', src);
+        resolve();
+      };
+      document.head.appendChild(script);
+    });
+
+    return scripts.reduce((chain, src) => chain.then(() => loadOne(src)), Promise.resolve());
+  }
+
+  // Initialize the application
+  async initialize() {
+    if (this.initialized) return;
+    this.initialized = true;
+
+    // Set up dismiss button
+    const dismissBtn = document.getElementById('dismiss-offline');
+    if (dismissBtn) {
+      dismissBtn.addEventListener('click', () => this.hideOfflineBanner());
+    }
+
+    // Check initial online status
+    if (!this.isOnline) {
+      this.showOfflineBanner();
+      // Show offline content if we're offline and external dependencies failed to load
+      setTimeout(() => {
+        if (!this.stimulusLoaded || !this.chartLoaded) {
+          this.showOfflineContent();
+        }
+      }, 2000); // Wait 2 seconds to see if dependencies load
+    }
+
+    // Load dependencies in sequence
+    await this.loadStimulus();
+    await this.loadChartJs();
+    await this.loadLocalScripts();
+  }
+}
+
+// Export for use in other modules
+window.OfflineManager = OfflineManager;

data/web/assets/js/service-worker-manager.js

@@ -0,0 +1,65 @@
+// Service Worker Manager - Handles service worker registration and updates
+class ServiceWorkerManager {
+  constructor() {
+    this.registration = null;
+  }
+
+  // Register service worker. The SW is purely an offline-cache enhancement,
+  // so we never await `.ready` — if the SW install fails (e.g. one cached
+  // asset 401s behind auth) we would otherwise hang the whole dashboard
+  // bootstrap waiting for a worker that will never activate.
+  async register() {
+    if (!('serviceWorker' in navigator)) {
+      console.warn('Service Worker not supported');
+      return false;
+    }
+
+    try {
+      this.registration = await navigator.serviceWorker.register('sw.js');
+      console.log('Service Worker registered:', this.registration.scope);
+
+      this.registration.addEventListener('updatefound', () => {
+        const newWorker = this.registration.installing;
+        newWorker.addEventListener('statechange', () => {
+          if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+            console.log('New service worker available. Reload to update.');
+            this.showUpdateNotification();
+          }
+        });
+      });
+
+      return true;
+    } catch (error) {
+      console.warn('Service Worker registration failed:', error);
+      return false;
+    }
+  }
+
+  // Show update notification (optional enhancement)
+  showUpdateNotification() {
+    // You could implement a notification here to prompt users to reload
+    // For now, we'll just log it
+    console.log('Update available - consider implementing user notification');
+  }
+
+  // Unregister service worker (for development/testing)
+  async unregister() {
+    if (this.registration) {
+      await this.registration.unregister();
+      console.log('Service Worker unregistered');
+    }
+  }
+
+  // Check if service worker is active
+  isActive() {
+    return navigator.serviceWorker.controller !== null;
+  }
+
+  // Get service worker registration
+  getRegistration() {
+    return this.registration;
+  }
+}
+
+// Export for use in other modules
+window.ServiceWorkerManager = ServiceWorkerManager;

data/web/index.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="__BASE_PATH__" />
+    <title>Lepus Dashboard</title>
+    <link rel="stylesheet" href="assets/css/styles.css" />
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%236ea8fe'/%3E%3Ctext x='16' y='22' font-family='system-ui, -apple-system, sans-serif' font-size='18' font-weight='700' text-anchor='middle' fill='white'%3EL%3C/text%3E%3C/svg%3E" />
+  </head>
+  <body data-controller="theme connection dashboard">
+    <!-- Offline notification banner -->
+    <div id="offline-banner" class="offline-banner" style="display: none;">
+      <div class="offline-content">
+        <span class="offline-icon">⚠️</span>
+        <span class="offline-message">You're offline. Some features may not work properly.</span>
+        <button id="dismiss-offline" class="offline-dismiss">×</button>
+      </div>
+    </div>
+
+    <header class="navbar">
+      <div class="brand">
+        <span class="logo-badge">L</span>
+        <span class="title">Lepus</span>
+      </div>
+      <div class="nav-controls">
+        <div class="refresh-control">
+          <label for="refreshRange">Refresh:</label>
+          <input id="refreshRange" type="range" min="5" max="60" step="5" value="15" data-dashboard-target="refreshRange" data-action="input->dashboard#updateRefresh" />
+          <span class="refresh-value"><span data-dashboard-target="refreshLabel">15</span>s</span>
+        </div>
+      </div>
+      <div class="nav-actions">
+        <div class="connection-status" data-connection-target="indicator" title="Connection status">
+          <span class="status-dot"></span>
+          <span class="status-text" data-connection-target="text">Connected</span>
+        </div>
+        <button class="btn" data-action="theme#toggle" aria-label="Toggle theme" title="Toggle theme">
+          <span data-theme-target="icon">🌙</span>
+        </button>
+      </div>
+    </header>
+
+    <main class="container">
+      <!-- Offline content placeholder -->
+      <div id="offline-content" class="offline-content-placeholder" style="display: none;">
+        <div class="offline-card">
+          <div class="offline-icon-large">📡</div>
+          <h2>You're Offline</h2>
+          <p>The Lepus dashboard requires an internet connection to function properly.</p>
+          <p>Some features may be limited while offline:</p>
+          <ul class="offline-limitations">
+            <li>Real-time data updates won't work</li>
+            <li>External dependencies may not load</li>
+            <li>Charts may show fallback content</li>
+          </ul>
+          <div class="offline-actions">
+            <button data-offline-action="reload" class="btn btn-primary">Retry Connection</button>
+            <button data-offline-action="dismiss" class="btn btn-secondary">Continue Offline</button>
+          </div>
+        </div>
+      </div>
+
+      <section class="grid stats-grid">
+        <div class="card stat-card">
+          <div class="stat-label">Processes</div>
+          <div class="stat-value" data-dashboard-target="processCount">0</div>
+          <div class="stat-detail" data-dashboard-target="processDetail">Supervisors 0, Workers 0</div>
+        </div>
+        <div class="card stat-card">
+          <div class="stat-label">Active queues</div>
+          <div class="stat-value" data-dashboard-target="queueCount">0</div>
+          <div class="stat-detail" data-dashboard-target="queueDetail">0 running, 0 paused</div>
+        </div>
+        <div class="card stat-card">
+          <div class="stat-label">Messages</div>
+          <div class="stat-value" data-dashboard-target="totalMessages">0</div>
+          <div class="stat-detail" data-dashboard-target="messageDetail">0 ready, 0 unacked</div>
+        </div>
+        <div class="card stat-card">
+          <div class="stat-label">Memory usage</div>
+          <div class="stat-value" data-dashboard-target="memoryUsage">0 MB</div>
+          <div class="stat-detail" data-dashboard-target="memoryDetail">RSS 0 MB, Heap 0 MB</div>
+        </div>
+        <div class="card stat-card">
+          <div class="stat-label">Connections</div>
+          <div class="stat-value" data-dashboard-target="connectionCount">0</div>
+          <div class="stat-detail" data-dashboard-target="connectionDetail">0 active, 0 idle</div>
+        </div>
+        <div class="card stat-card">
+          <div class="stat-label">Message rates</div>
+          <div class="stat-value"><span data-dashboard-target="publishRate">0</span>/<span data-dashboard-target="consumeRate">0</span> msg/s</div>
+          <div class="stat-detail" data-dashboard-target="rateDetail">Peak: 0/0 msg/s</div>
+        </div>
+      </section>
+
+      <section class="grid chart-grid">
+        <div class="card">
+          <div class="card-header">
+            <h3>Message Rates</h3>
+          </div>
+          <div class="card-body">
+            <canvas id="rateChart" height="240"></canvas>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h3>Queue Distribution</h3>
+          </div>
+          <div class="card-body">
+            <canvas id="queueChart" height="240"></canvas>
+          </div>
+        </div>
+      </section>
+
+      <section class="grid processes-grid" data-dashboard-target="processesRoot">
+        <!-- Process hierarchy cards rendered here -->
+      </section>
+
+      <section class="grid queues-grid">
+        <div class="card">
+          <div class="card-header">
+            <h3>Queues</h3>
+          </div>
+          <div class="card-body">
+            <div class="table-responsive">
+              <table class="table" data-controller="queue">
+                <thead>
+                  <tr>
+                    <th>Queue</th>
+                    <th>Type</th>
+                    <th>Ready</th>
+                    <th>Unacked</th>
+                    <th>Total</th>
+                    <th>Consumers</th>
+                    <th>Memory</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody data-dashboard-target="queuesRoot">
+                  <!-- Queue rows populated here -->
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </section>
+
+    </main>
+
+    <!-- Load offline support modules. Bootstrap is a separate file so it runs
+         under strict Content Security Policies that forbid inline scripts. -->
+    <script src="assets/js/offline-manager.js"></script>
+    <script src="assets/js/service-worker-manager.js"></script>
+    <script src="assets/js/bootstrap.js"></script>
+  </body>
+  </html>
+
+

data/web/sw.js

@@ -0,0 +1,144 @@
+// Service Worker for Lepus Web Dashboard
+// Provides offline caching for static assets
+
+const CACHE_NAME = 'lepus-dashboard-v1';
+
+// Paths are relative to the service worker script URL, so they resolve
+// correctly whether the dashboard is mounted at `/` or a sub-path like `/lepus`.
+const STATIC_ASSETS = [
+  './',
+  'assets/css/styles.css',
+  'assets/js/app.js',
+  'assets/js/bootstrap.js',
+  'assets/js/offline-manager.js',
+  'assets/js/service-worker-manager.js',
+  'assets/js/controllers/theme_controller.js',
+  'assets/js/controllers/connection_controller.js',
+  'assets/js/controllers/dashboard_controller.js',
+  'assets/js/controllers/queue_controller.js'
+];
+
+// Install event - cache static assets
+self.addEventListener('install', (event) => {
+  console.log('Service Worker: Installing...');
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        console.log('Service Worker: Caching static assets');
+        return cache.addAll(STATIC_ASSETS);
+      })
+      .then(() => {
+        console.log('Service Worker: Installation complete');
+        return self.skipWaiting();
+      })
+      .catch((error) => {
+        console.error('Service Worker: Installation failed', error);
+      })
+  );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+  console.log('Service Worker: Activating...');
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== CACHE_NAME) {
+            console.log('Service Worker: Deleting old cache', cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    }).then(() => {
+      console.log('Service Worker: Activation complete');
+      return self.clients.claim();
+    })
+  );
+});
+
+// Fetch event - serve from cache when offline
+self.addEventListener('fetch', (event) => {
+  // Only handle GET requests
+  if (event.request.method !== 'GET') {
+    return;
+  }
+
+  // Skip cross-origin requests
+  if (!event.request.url.startsWith(self.location.origin)) {
+    return;
+  }
+
+  event.respondWith(
+    caches.match(event.request)
+      .then((cachedResponse) => {
+        // Return cached version if available
+        if (cachedResponse) {
+          console.log('Service Worker: Serving from cache', event.request.url);
+          return cachedResponse;
+        }
+
+        // Otherwise, fetch from network
+        console.log('Service Worker: Fetching from network', event.request.url);
+        return fetch(event.request)
+          .then((response) => {
+            // Don't cache non-successful responses
+            if (!response || response.status !== 200 || response.type !== 'basic') {
+              return response;
+            }
+
+            // Clone the response for caching
+            const responseToCache = response.clone();
+
+            caches.open(CACHE_NAME)
+              .then((cache) => {
+                // Only cache static assets under our scope, not API responses.
+                // `self.registration.scope` is the absolute URL the worker controls
+                // (e.g. "https://host/lepus/"), so it transparently covers any mount path.
+                const scope = new URL(self.registration.scope);
+                const url = new URL(event.request.url);
+                const scopePath = scope.pathname;
+                const path = url.pathname;
+                const isUnderScope = path.startsWith(scopePath);
+                const relative = isUnderScope ? path.slice(scopePath.length) : path;
+                if (isUnderScope && (relative === '' || relative === 'index.html' || relative.startsWith('assets/'))) {
+                  console.log('Service Worker: Caching response', event.request.url);
+                  cache.put(event.request, responseToCache);
+                }
+              });
+
+            return response;
+          })
+          .catch((error) => {
+            console.log('Service Worker: Network fetch failed', event.request.url, error);
+
+            // For navigation requests, return the cached index (scope root)
+            if (event.request.mode === 'navigate') {
+              return caches.match('./');
+            }
+
+            // For other requests, return a generic offline response
+            if (event.request.url.endsWith('.js') || event.request.url.endsWith('.css')) {
+              return new Response(
+                '/* Offline - Resource not available */',
+                {
+                  status: 200,
+                  headers: {
+                    'Content-Type': event.request.url.endsWith('.js') ? 'application/javascript' : 'text/css'
+                  }
+                }
+              );
+            }
+
+            throw error;
+          });
+      })
+  );
+});
+
+// Handle messages from the main thread
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});