lepus 0.2.2 → 0.3.0

data/web/assets/css/styles.css

@@ -1,635 +0,0 @@
-:root {
-  --bg: #0f1419;
-  --panel: #1c2432;
-  --text: #e8ecf1;
-  --muted: #9aa8b4;
-  --primary: #6ea8fe;
-  --accent: #7ee787;
-  --danger: #ff6b6b;
-  --warning: #f7c948;
-  --border: #4b5563;
-  --shadow: rgba(0, 0, 0, 0.25);
-}
-
-[data-theme="light"] {
-  --bg: #f7f9fb;
-  --panel: #ffffff;
-  --text: #0a0f14;
-  --muted: #445668;
-  --primary: #0d6efd;
-  --accent: #198754;
-  --danger: #dc3545;
-  --warning: #c98a00;
-  --border: #e6eaef;
-  --shadow: rgba(0, 0, 0, 0.08);
-}
-
-* { box-sizing: border-box; }
-html, body { height: 100%; }
-body {
-  margin: 0;
-  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
-  color: var(--text);
-  background: var(--bg);
-}
-
-/* Offline banner styles */
-.offline-banner {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  background: linear-gradient(135deg, var(--warning), #e6a700);
-  color: #000;
-  padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: slideDown 0.3s ease-out;
-}
-
-.offline-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  position: relative;
-  width: 100%;
-}
-
-/* On large screens, make dismiss button and icon full width positioned */
-@media (min-width: 768px) {
-  .offline-content {
-    justify-content: space-between;
-    padding: 0 20px;
-  }
-
-  .offline-icon {
-    position: absolute;
-    left: 20px;
-  }
-
-  .offline-dismiss {
-    position: absolute;
-    right: 20px;
-  }
-}
-
-.offline-icon {
-  font-size: 16px;
-  flex-shrink: 0;
-}
-
-.offline-message {
-  flex: 1;
-  text-align: center;
-}
-
-.offline-dismiss {
-  background: none;
-  border: none;
-  font-size: 18px;
-  font-weight: bold;
-  color: #000;
-  cursor: pointer;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: background-color 0.2s ease;
-  flex-shrink: 0;
-}
-
-.offline-dismiss:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-@keyframes slideDown {
-  from {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* Adjust navbar when offline banner is visible */
-body:has(.offline-banner[style*="block"]) .navbar {
-  top: 40px; /* Height of offline banner */
-}
-
-/* Offline content placeholder */
-.offline-content-placeholder {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 60vh;
-  padding: 2rem;
-}
-
-.offline-card {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 2rem;
-  text-align: center;
-  max-width: 500px;
-  box-shadow: 0 4px 12px var(--shadow);
-}
-
-.offline-icon-large {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-  opacity: 0.7;
-}
-
-.offline-card h2 {
-  margin: 0 0 1rem 0;
-  color: var(--text);
-  font-size: 1.5rem;
-}
-
-.offline-card p {
-  margin: 0 0 1rem 0;
-  color: var(--muted);
-  line-height: 1.5;
-}
-
-.offline-limitations {
-  text-align: left;
-  margin: 1rem 0;
-  padding-left: 1.5rem;
-  color: var(--muted);
-}
-
-.offline-limitations li {
-  margin: 0.5rem 0;
-}
-
-.offline-actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-  margin-top: 2rem;
-}
-
-.offline-actions .btn {
-  padding: 0.75rem 1.5rem;
-  border: none;
-  border-radius: 6px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.offline-actions .btn-primary {
-  background: var(--primary);
-  color: white;
-}
-
-.offline-actions .btn-primary:hover {
-  background: var(--primary);
-  opacity: 0.9;
-}
-
-.offline-actions .btn-secondary {
-  background: transparent;
-  color: var(--text);
-  border: 1px solid var(--border);
-}
-
-.offline-actions .btn-secondary:hover {
-  background: var(--panel);
-  border-color: var(--primary);
-}
-
-.navbar {
-  position: sticky; top: 0; z-index: 10;
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 12px 16px; border-bottom: 1px solid var(--border);
-  background: rgba(28, 36, 50, 0.85);
-  backdrop-filter: blur(8px);
-  gap: 16px;
-}
-[data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.85); }
-.brand { display: flex; gap: 10px; align-items: center; font-weight: 600; }
-.logo-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: var(--primary);
-  color: white;
-  border-radius: 6px;
-  font-size: 16px;
-  font-weight: 700;
-  box-shadow: 0 2px 6px var(--shadow);
-}
-.title {
-  letter-spacing: 0.3px;
-  font-size: 18px;
-}
-.nav-controls { display: flex; align-items: center; }
-.refresh-control {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 8px;
-  background: rgba(255,255,255,0.05);
-  border-radius: 6px;
-  border: 1px solid rgba(255,255,255,0.1);
-}
-.refresh-control label {
-  font-size: 12px;
-  color: var(--muted);
-  white-space: nowrap;
-}
-.refresh-control input[type="range"] {
-  width: 60px;
-  height: 4px;
-  background: var(--border);
-  border-radius: 2px;
-  outline: none;
-}
-.refresh-control input[type="range"]::-webkit-slider-thumb {
-  appearance: none;
-  width: 12px;
-  height: 12px;
-  background: var(--primary);
-  border-radius: 50%;
-  cursor: pointer;
-}
-.refresh-control input[type="range"]::-moz-range-thumb {
-  width: 12px;
-  height: 12px;
-  background: var(--primary);
-  border-radius: 50%;
-  border: none;
-  cursor: pointer;
-}
-.refresh-value {
-  font-size: 11px;
-  color: var(--muted);
-  min-width: 20px;
-  text-align: center;
-}
-.nav-actions { display: flex; gap: 8px; align-items: center; }
-.connection-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  border-radius: 12px;
-  background: rgba(25,135,84,0.12);
-  border: 1px solid rgba(25,135,84,0.3);
-  color: var(--accent);
-  font-size: 11px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-}
-.connection-status.disconnected {
-  background: rgba(220,53,69,0.12);
-  border: 1px solid rgba(220,53,69,0.3);
-  color: var(--danger);
-}
-.status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--accent);
-  transition: background-color 0.2s ease;
-}
-.connection-status.disconnected .status-dot {
-  background: var(--danger);
-}
-.status-text {
-  white-space: nowrap;
-}
-.btn { border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: 120ms ease; }
-.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px var(--shadow); }
-
-.container { width: 100%; max-width: none; margin: 16px 0; padding: 0 12px 20px 12px; }
-.panel, .card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px var(--shadow); overflow: hidden; }
-.panel-header, .card-header { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
-.panel-body, .card-body { padding: 12px 14px; }
-
-.grid { display: grid; gap: 12px; margin-top: 12px; }
-.stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
-.chart-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
-.queues-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
-.processes-grid { grid-template-columns: 1fr; }
-
-.stat-card { padding: 12px 14px; }
-.stat-label { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
-.stat-value { font-size: 24px; font-weight: 600; letter-spacing: 0.3px; margin-bottom: 4px; }
-.stat-detail { color: var(--muted); font-size: 13px; opacity: 0.8; }
-
-.control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
-.control label { display: block; margin-bottom: 6px; color: var(--muted); }
-
-.metric {
-  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
-  border: 1px dashed var(--border);
-  border-radius: 8px;
-  padding: 12px;
-  margin-bottom: 8px;
-  transition: all 0.2s ease;
-}
-.metric:hover {
-  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.04));
-  border-color: var(--primary);
-}
-.metric-label {
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 8px;
-  display: block;
-}
-.metric-value { font-size: 18px; font-weight: 600; }
-
-.table-responsive { width: 100%; overflow-x: auto; }
-.table { width: 100%; border-collapse: collapse; }
-.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
-.table tbody tr:hover { background: rgba(255,255,255,0.02); }
-
-.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); }
-.badge.ok { background: rgba(25,135,84,0.12); color: var(--accent); border-color: rgba(25,135,84,0.3); }
-.badge.warn { background: rgba(247,201,72,0.12); color: var(--warning); border-color: rgba(247,201,72,0.3); }
-.badge.err { background: rgba(220,53,69,0.12); color: var(--danger); border-color: rgba(220,53,69,0.3); }
-
-.queue-row { cursor: pointer; }
-.sub-row { background: rgba(255,255,255,0.03); }
-
-.health { border-radius: 10px; border: 1px solid var(--border); padding: 10px; }
-.health.ok { box-shadow: 0 0 0 2px rgba(25,135,84,0.15) inset; }
-.health.bad { box-shadow: 0 0 0 2px rgba(220,53,69,0.15) inset; }
-
-/* Process Hierarchy Styles */
-.application-card {
-  border-radius: 12px;
-}
-.application-card .card-header h2 { margin: 0; font-size: 18px; }
-.level-label {
-  display: inline-block;
-  padding: 2px 6px;
-  background: rgba(255,255,255,0.1);
-  color: var(--muted);
-  font-size: 10px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  border-radius: 3px;
-  margin-right: 8px;
-}
-
-.supervisor-card {
-  margin: 12px 0;
-  border-left: 3px solid var(--primary);
-  background: rgba(110,168,254,0.05);
-  border-radius: 8px;
-}
-.supervisor-card .card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 14px;
-}
-.supervisor-info h3 { margin: 0; font-size: 16px; }
-.supervisor-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--muted);
-  font-size: 12px;
-  text-align: right;
-}
-.supervisor-meta .meta-text {
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.worker-card {
-  margin: 8px 0;
-  border-left: 3px solid var(--accent);
-  background: rgba(126,231,135,0.05);
-  border-radius: 8px;
-}
-.worker-card .card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px;
-}
-.worker-info h4 { margin: 0; font-size: 14px; }
-.worker-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--muted);
-  font-size: 11px;
-  text-align: right;
-}
-.worker-meta .meta-text {
-  color: var(--muted);
-  font-size: 11px;
-}
-
-.consumers-container {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: 1fr;
-}
-
-.consumer-card {
-  margin: 0;
-  border: 1px solid rgba(110,168,254,0.3);
-  background: rgba(110,168,254,0.05);
-  transition: all 0.2s ease;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  border-radius: 8px;
-}
-.consumer-card.expanded {
-  background: rgba(110,168,254,0.08);
-}
-.consumer-card .card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6px 10px;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-.consumer-card .card-header:hover {
-  background: rgba(110,168,254,0.1);
-}
-.consumer-info h5 { margin: 0; font-size: 13px; }
-.consumer-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--muted);
-  font-size: 10px;
-}
-.consumer-stats-preview {
-  display: flex;
-  gap: 4px;
-}
-.expand-icon {
-  font-size: 10px;
-  transition: transform 0.2s ease;
-  color: var(--muted);
-}
-.consumer-card.expanded .expand-icon {
-  transform: rotate(180deg);
-}
-
-.badge.concurrent {
-  background: rgba(139,92,246,0.12);
-  color: #8b5cf6;
-  border-color: rgba(139,92,246,0.3);
-  font-size: 10px;
-}
-
-.consumer-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 11px;
-}
-.consumer-table td {
-  padding: 2px 4px;
-  border: none;
-}
-.consumer-table .label {
-  color: var(--muted);
-  font-weight: 500;
-  width: 80px;
-}
-
-.stat {
-  display: inline-block;
-  margin-right: 8px;
-  padding: 1px 4px;
-  border-radius: 3px;
-  font-size: 10px;
-}
-.stat.processed { background: rgba(25,135,84,0.12); color: var(--accent); }
-.stat.rejected { background: rgba(247,201,72,0.12); color: var(--warning); }
-.stat.errored { background: rgba(220,53,69,0.12); color: var(--danger); }
-
-.stat-mini {
-  display: inline-block;
-  padding: 1px 3px;
-  border-radius: 6px;
-  font-size: 9px;
-  font-weight: 500;
-  min-width: 30px;
-  text-align: center;
-}
-.stat-mini.processed { background: rgba(25,135,84,0.15); color: var(--accent); }
-.stat-mini.rejected { background: rgba(247,201,72,0.15); color: var(--warning); }
-.stat-mini.errored { background: rgba(220,53,69,0.15); color: var(--danger); }
-
-/* Queue Detail Styles */
-.queue-detail-content {
-  padding: 8px 0;
-}
-
-.queue-name {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--primary);
-  margin-bottom: 8px;
-  padding: 4px 0;
-  border-bottom: 1px solid rgba(110,168,254,0.2);
-}
-
-.queue-stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 6px 4px;
-  background: rgba(255,255,255,0.02);
-  border-radius: 6px;
-  border: 1px solid rgba(255,255,255,0.05);
-}
-
-.stat-item .stat-label {
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 500;
-  margin-bottom: 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-}
-
-.stat-item .stat-value {
-  color: var(--text);
-  font-size: 14px;
-  font-weight: 600;
-  text-align: center;
-}
-
-
-@media (max-width: 720px) {
-  .navbar {
-    padding: 10px 12px;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-  .nav-controls {
-    order: 3;
-    width: 100%;
-    justify-content: center;
-  }
-  .refresh-control {
-    padding: 3px 6px;
-    gap: 6px;
-  }
-  .refresh-control input[type="range"] {
-    width: 50px;
-  }
-  .container { margin: 12px auto; }
-}
-
-@media (min-width: 768px) {
-  .consumers-container {
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 20px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .grid { gap: 24px; margin-top: 24px; }
-  .control-grid { gap: 24px; }
-  .container { margin: 24px auto; }
-  .consumers-container {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 24px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .consumers-container {
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 24px;
-  }
-}
-

data/web/assets/js/app.js

@@ -1,6 +0,0 @@
-(function() {
-  const application = Stimulus.Application.start();
-  window.StimulusApp = application;
-})();
-
-

data/web/assets/js/bootstrap.js

@@ -1,20 +0,0 @@
-// Bootstrap the Lepus dashboard. Kept in a separate file (rather than an
-// inline <script>) so it runs under a strict Content Security Policy that
-// forbids `unsafe-inline`, which is the default for many Rails apps.
-(async function () {
-  const offlineManager = new OfflineManager();
-  const serviceWorkerManager = new ServiceWorkerManager();
-
-  document.querySelectorAll("[data-offline-action='reload']").forEach((el) => {
-    el.addEventListener("click", () => window.location.reload());
-  });
-  document.querySelectorAll("[data-offline-action='dismiss']").forEach((el) => {
-    el.addEventListener("click", () => {
-      const c = document.getElementById("offline-content");
-      if (c) c.style.display = "none";
-    });
-  });
-
-  await serviceWorkerManager.register();
-  await offlineManager.initialize();
-})();

data/web/assets/js/controllers/connection_controller.js

@@ -1,44 +0,0 @@
-(function() {
-  StimulusApp.register("connection", class extends Stimulus.Controller {
-    static targets = ["indicator", "text"]
-
-    connect() {
-      this.check();
-      this.timer = setInterval(() => this.check(), 10000);
-    }
-
-    disconnect() {
-      if (this.timer) clearInterval(this.timer);
-    }
-
-    async check() {
-      // Check if we're offline first
-      if (!navigator.onLine) {
-        this.indicatorTarget.classList.add('disconnected');
-        this.textTarget.textContent = 'Offline';
-        return;
-      }
-
-      try {
-        const res = await fetch('api/health');
-        if (res.ok) {
-          this.indicatorTarget.classList.remove('disconnected');
-          this.textTarget.textContent = 'Connected';
-        } else {
-          this.indicatorTarget.classList.add('disconnected');
-          this.textTarget.textContent = 'Disconnected';
-        }
-      } catch (error) {
-        this.indicatorTarget.classList.add('disconnected');
-        // More specific error handling
-        if (error.name === 'TypeError' && error.message.includes('fetch')) {
-          this.textTarget.textContent = 'Offline';
-        } else {
-          this.textTarget.textContent = 'Disconnected';
-        }
-      }
-    }
-  });
-})();
-
-