From 4c601ed1424eafb2c10b104e9997256f1507021b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Virg=C3=ADlio=20Santos?= <virgiliosps@gmail.com>
Date: Sat, 14 Mar 2026 15:53:55 -0300
Subject: [PATCH] =?UTF-8?q?Added=20countdown=20timer=20to=20loading=20page?=
 =?UTF-8?q?=20=E2=80=94=20progress=20bar=20with=20sweep=20ETA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/public/loading.html | 67 ++++++++++++++++++++++++++++++-----
 scripts/clean.mjs             | 18 ++++++++++
 server.mjs                    |  5 ++-
 3 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 scripts/clean.mjs
diff --git a/dashboard/public/loading.html b/dashboard/public/loading.html
index ebb0084..196f6ab 100644
--- a/dashboard/public/loading.html
+++ b/dashboard/public/loading.html
@@ -22,15 +22,19 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--m
 @keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
 
 .logo-text{font-size:18px;font-weight:700;letter-spacing:0.2em;color:var(--accent)}
-
 .container{display:flex;flex-direction:column;align-items:center;gap:32px}
 
 #bootLines{font-size:12px;color:var(--dim);text-align:left;line-height:2;min-width:340px}
 #bootLines .line{opacity:0;animation:fadein 0.3s ease forwards}
 #bootLines .ok{color:var(--accent)}
 
-#status{font-size:12px;color:var(--accent);letter-spacing:0.15em;margin-top:4px;min-height:20px}
-#status .blink{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse-blink 1.5s ease-in-out infinite;vertical-align:middle;margin-right:8px}
+#status{font-size:12px;color:var(--accent);letter-spacing:0.15em;margin-top:4px;min-height:20px;display:flex;align-items:center;gap:8px}
+#status .blink{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse-blink 1.5s ease-in-out infinite;flex-shrink:0}
+
+#countdown{margin-top:8px;font-size:11px;color:var(--dim);letter-spacing:0.1em;text-align:center;min-height:16px}
+#countdown .eta{color:var(--text)}
+#countdown .bar-wrap{width:340px;height:2px;background:rgba(100,240,200,0.08);margin-top:8px;overflow:hidden}
+#countdown .bar-fill{height:100%;background:var(--accent);width:0%;transition:width 1s linear;box-shadow:0 0 6px var(--accent)}
 </style>
 </head>
 <body>
@@ -41,10 +45,20 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--m
 
   <div id="bootLines"></div>
 
-  <div id="status"><span class="blink"></span><span id="statusText">COLLECTING DATA...</span></div>
+  <div id="status">
+    <span class="blink"></span>
+    <span id="statusText">COLLECTING DATA...</span>
+  </div>
+
+  <div id="countdown">
+    <span id="etaText"></span>
+    <div class="bar-wrap"><div class="bar-fill" id="barFill"></div></div>
+  </div>
 </div>
 
 <script>
+const SWEEP_ESTIMATE_S = 50; // estimated sweep duration in seconds
+
 const lines = [
   'CRUCIX INTELLIGENCE ENGINE v2.0.0',
   'INITIATING FIRST SWEEP...',
@@ -56,13 +70,11 @@ const lines = [
 ];
 
 const container = document.getElementById('bootLines');
-
 lines.forEach((text, i) => {
   setTimeout(() => {
     const div = document.createElement('div');
     div.className = 'line';
     div.innerHTML = text;
-    div.style.animationDelay = '0ms';
     container.appendChild(div);
   }, i * 220);
 });
@@ -81,20 +93,59 @@ setInterval(() => {
   statusText.textContent = statusMessages[statusIdx];
 }, 4000);
 
-// SSE — wait for sweep to complete, then redirect
+// === Countdown ===
+const etaText = document.getElementById('etaText');
+const barFill = document.getElementById('barFill');
+let countdownInterval = null;
+
+function startCountdown(elapsedSeconds) {
+  let remaining = Math.max(0, SWEEP_ESTIMATE_S - elapsedSeconds);
+
+  function tick() {
+    if (remaining <= 0) {
+      etaText.textContent = 'FINALIZING...';
+      barFill.style.width = '99%';
+      return;
+    }
+    const pct = Math.min(99, ((SWEEP_ESTIMATE_S - remaining) / SWEEP_ESTIMATE_S) * 100);
+    barFill.style.width = pct + '%';
+    etaText.innerHTML = `EST. READY IN <span class="eta">~${remaining}s</span>`;
+    remaining--;
+  }
+
+  tick();
+  countdownInterval = setInterval(tick, 1000);
+}
+
+// Fetch health to get elapsed time since sweep started
+fetch('/api/health')
+  .then(r => r.json())
+  .then(h => {
+    let elapsed = 0;
+    if (h.sweepStartedAt) {
+      elapsed = Math.floor((Date.now() - new Date(h.sweepStartedAt).getTime()) / 1000);
+    }
+    startCountdown(elapsed);
+  })
+  .catch(() => startCountdown(0));
+
+// === SSE — wait for sweep to complete, then redirect ===
 const es = new EventSource('/events');
 es.onmessage = (e) => {
   try {
     const msg = JSON.parse(e.data);
     if (msg.type === 'update') {
       es.close();
+      clearInterval(countdownInterval);
+      barFill.style.transition = 'width 0.4s ease';
+      barFill.style.width = '100%';
+      etaText.textContent = '';
       statusText.textContent = 'TERMINAL READY — LOADING DASHBOARD';
       setTimeout(() => location.replace('/'), 800);
     }
   } catch {}
 };
 es.onerror = () => {
-  // Server went away — reload and retry
   es.close();
   setTimeout(() => location.reload(), 3000);
 };
diff --git a/scripts/clean.mjs b/scripts/clean.mjs
new file mode 100644
index 0000000..1d87f42
--- /dev/null
+++ b/scripts/clean.mjs
@@ -0,0 +1,18 @@
+import { rm, access } from 'fs/promises';
+import { join } from 'path';
+
+const targets = [
+  'runs/latest.json',
+  'runs/memory',
+];
+
+for (const target of targets) {
+  const full = join(process.cwd(), target);
+  try {
+    await access(full);
+    await rm(full, { recursive: true });
+    console.log(`removed: ${target}`);
+  } catch {
+    // not found — skip silently
+  }
+}
diff --git a/server.mjs b/server.mjs
index 96643da..86e26b5 100644
--- a/server.mjs
+++ b/server.mjs
@@ -29,6 +29,7 @@ for (const dir of [RUNS_DIR, MEMORY_DIR, join(MEMORY_DIR, 'cold')]) {
 // === State ===
 let currentData = null;    // Current synthesized dashboard data
 let lastSweepTime = null;  // Timestamp of last sweep
+let sweepStartedAt = null; // Timestamp when current/last sweep started
 let sweepInProgress = false;
 const startTime = Date.now();
 const sseClients = new Set();
@@ -255,6 +256,7 @@ app.get('/api/health', (req, res) => {
       ? new Date(new Date(lastSweepTime).getTime() + config.refreshIntervalMinutes * 60000).toISOString()
       : null,
     sweepInProgress,
+    sweepStartedAt,
     sourcesOk: currentData?.meta?.sourcesOk || 0,
     sourcesFailed: currentData?.meta?.sourcesFailed || 0,
     llmEnabled: !!config.llm.provider,
@@ -292,7 +294,8 @@ async function runSweepCycle() {
   }
 
   sweepInProgress = true;
-  broadcast({ type: 'sweep_start', timestamp: new Date().toISOString() });
+  sweepStartedAt = new Date().toISOString();
+  broadcast({ type: 'sweep_start', timestamp: sweepStartedAt });
   console.log(`\n${'='.repeat(60)}`);
   console.log(`[Crucix] Starting sweep at ${new Date().toLocaleTimeString()}`);
   console.log(`${'='.repeat(60)}`);
