nestjs-profiler 1.0.25 → 1.0.27

package/views/cron-jobs.html

@@ -0,0 +1,635 @@
+<script>const CRON_DATA = {{{ cronDataJson }}};</script>
+
+<style>
+  /* ── Animations ─────────────────────────────────────────────────────────── */
+  @keyframes pulse-green {
+    0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
+    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
+  }
+  @keyframes spin-ring {
+    to { stroke-dashoffset: 0; }
+  }
+  @keyframes fade-in {
+    from { opacity: 0; transform: translateY(4px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .pulse-green { animation: pulse-green 1.8s ease-in-out infinite; }
+  .fade-in     { animation: fade-in .25s ease; }
+
+  /* ── Tab bar ─────────────────────────────────────────────────────────────── */
+  .ctab {
+    border-bottom: 2px solid transparent;
+    color: #6b7280;
+    transition: color .15s, border-color .15s;
+  }
+  .ctab.active {
+    border-bottom-color: #4f46e5;
+    color: #4f46e5;
+    font-weight: 600;
+  }
+  .ctab:not(.active):hover { color: #374151; }
+
+  /* ── Cards ───────────────────────────────────────────────────────────────── */
+  .job-card {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    border-left: 4px solid #e5e7eb;
+    transition: box-shadow .15s, transform .15s;
+  }
+  .job-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-1px); }
+  .job-card.cron-running { border-left-color: #10b981; }
+  .job-card.cron-idle    { border-left-color: #6366f1; }
+  .job-card.interval-card { border-left-color: #8b5cf6; }
+  .job-card.timeout-pending { border-left-color: #f59e0b; }
+  .job-card.timeout-fired   { border-left-color: #d1d5db; }
+
+  /* ── Code / mono ─────────────────────────────────────────────────────────── */
+  .mono { font-family: 'Fira Code','Cascadia Code',ui-monospace,SFMono-Regular,monospace; }
+  .tabnum { font-variant-numeric: tabular-nums; }
+
+  /* ── Copy button ─────────────────────────────────────────────────────────── */
+  .cpw .cpb { opacity: 0; transition: opacity .12s; }
+  .cpw:hover .cpb { opacity: 1; }
+
+  /* ── SVG ring for intervals ───────────────────────────────────────────────  */
+  .ring-bg  { stroke: #ede9fe; }
+  .ring-fg  { stroke: #8b5cf6; stroke-linecap: round; }
+</style>
+
+<div id="cronRoot" class="space-y-5">
+
+  <!-- ── Page header ───────────────────────────────────────────────────────── -->
+  <div class="flex items-center justify-between">
+    <div class="flex items-center gap-3">
+      <div class="w-10 h-10 rounded-xl bg-indigo-100 flex items-center justify-center flex-shrink-0">
+        <svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="9"/><path stroke-linecap="round" d="M12 7v5l3 3"/>
+        </svg>
+      </div>
+      <div>
+        <h1 class="text-xl font-bold text-gray-900">Scheduled Jobs</h1>
+        <p id="subTitle" class="text-sm text-gray-500 mt-0.5">Loading…</p>
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <span id="lastRefreshed" class="text-xs text-gray-400"></span>
+      <button id="refreshBtn"
+        class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 shadow-sm transition-colors">
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+        </svg>
+        Refresh
+      </button>
+    </div>
+  </div>
+
+  <!-- ── Stat cards row ────────────────────────────────────────────────────── -->
+  <div id="statsRow" class="grid grid-cols-2 sm:grid-cols-4 gap-3"></div>
+
+  <!-- ── Timeline strip ────────────────────────────────────────────────────── -->
+  <div id="timelineSection" class="hidden bg-white rounded-xl border border-gray-200 shadow-sm p-4">
+    <div class="flex items-center gap-2 mb-4">
+      <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+      </svg>
+      <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Upcoming — next 3 hours</span>
+    </div>
+    <!-- Jobs list as timeline items -->
+    <div id="timelineList" class="space-y-2"></div>
+  </div>
+
+  <!-- ── Tab bar ────────────────────────────────────────────────────────────── -->
+  <div class="flex border-b border-gray-200 gap-0">
+    <button class="ctab active px-5 py-2.5 text-sm flex items-center gap-2" data-tab="cron">
+      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="9"/><path stroke-linecap="round" d="M12 7v5l3 3"/>
+      </svg>
+      Cron Jobs
+      <span id="tabCronCount" class="px-1.5 py-0.5 text-xs rounded-full bg-indigo-100 text-indigo-700 font-semibold"></span>
+    </button>
+    <button class="ctab px-5 py-2.5 text-sm flex items-center gap-2" data-tab="intervals">
+      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+      </svg>
+      Intervals
+      <span id="tabIntervalCount" class="px-1.5 py-0.5 text-xs rounded-full bg-violet-100 text-violet-700 font-semibold"></span>
+    </button>
+    <button class="ctab px-5 py-2.5 text-sm flex items-center gap-2" data-tab="timeouts">
+      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>
+      Timeouts
+      <span id="tabTimeoutCount" class="px-1.5 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 font-semibold"></span>
+    </button>
+  </div>
+
+  <!-- ── Panels ─────────────────────────────────────────────────────────────── -->
+  <div id="panelCron"></div>
+  <div id="panelIntervals" class="hidden"></div>
+  <div id="panelTimeouts"  class="hidden"></div>
+
+</div>
+
+<script>
+(function () {
+  'use strict';
+
+  var data = CRON_DATA;
+  var activeTab = 'cron';
+  var APP_START = Date.now();
+
+  // ── Utilities ───────────────────────────────────────────────────────────────
+
+  function esc(s) {
+    return String(s || '')
+      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+      .replace(/"/g,'&quot;');
+  }
+
+  function fmtMs(ms) {
+    if (!ms) return '—';
+    if (ms < 1000)  return ms + 'ms';
+    if (ms < 60000) {
+      var sv = ms / 1000;
+      return (sv === Math.floor(sv) ? sv : sv.toFixed(1)) + 's';
+    }
+    var m = Math.floor(ms / 60000), s = Math.round((ms % 60000) / 1000);
+    if (m < 60) return s > 0 ? m + 'm ' + s + 's' : m + 'm';
+    var h = Math.floor(m / 60), rm = m % 60;
+    return rm > 0 ? h + 'h ' + rm + 'm' : h + 'h';
+  }
+
+  function fmtCountdown(tsMs) {
+    if (!tsMs) return '—';
+    var diff = tsMs - Date.now();
+    if (diff <= 0) return 'due now';
+    var s = Math.floor(diff / 1000);
+    if (s < 60) return s + 's';
+    var m = Math.floor(s / 60), rs = s % 60;
+    if (m < 60) return m + 'm ' + (rs > 0 ? rs + 's' : '');
+    var h = Math.floor(m / 60), rm = m % 60;
+    return h + 'h ' + (rm > 0 ? rm + 'm' : '');
+  }
+
+  function fmtRelative(tsMs) {
+    if (!tsMs) return 'never';
+    var diff = Date.now() - tsMs;
+    if (diff < 10000) return 'just now';
+    var s = Math.floor(diff / 1000);
+    if (s < 60) return s + 's ago';
+    var m = Math.floor(s / 60);
+    if (m < 60) return m + 'm ago';
+    var h = Math.floor(m / 60);
+    if (h < 24) return h + 'h ago';
+    return Math.floor(h / 24) + 'd ago';
+  }
+
+  function shortenFile(f) {
+    if (!f) return '';
+    return f.replace(/^.*\/(src\/)/, 'src/');
+  }
+
+  // Cycle progress (0-1): how far through the current period until next run
+  function cycleFraction(nextRunMs, humanLabel) {
+    if (!nextRunMs) return null;
+    var periodMap = {
+      'Every minute': 60000, 'Every hour': 3600000,
+      'Daily': 86400000, 'Weekdays': 86400000,
+    };
+    var periodMs = 0;
+    for (var k in periodMap) {
+      if (humanLabel && humanLabel.indexOf(k) === 0) { periodMs = periodMap[k]; break; }
+    }
+    if (!periodMs) {
+      var mMin = humanLabel && humanLabel.match(/Every (\d+) min/);
+      if (mMin) periodMs = parseInt(mMin[1]) * 60000;
+      var mHr = humanLabel && humanLabel.match(/Every (\d+) hour/);
+      if (mHr) periodMs = parseInt(mHr[1]) * 3600000;
+    }
+    if (!periodMs) return null;
+    var timeUntil = nextRunMs - Date.now();
+    if (timeUntil < 0) return 1; // overdue = full
+    return Math.max(0, Math.min(1, 1 - timeUntil / periodMs));
+  }
+
+  // ── Shared components ───────────────────────────────────────────────────────
+
+  function methodBadge(className, methodName, handler) {
+    if (className && methodName) {
+      return '<span class="inline-flex items-baseline gap-0.5 px-2 py-0.5 rounded bg-gray-100 text-xs mono border border-gray-200">' +
+        '<span class="text-gray-500">' + esc(className) + '</span>' +
+        '<span class="text-gray-400">.</span>' +
+        '<span class="text-indigo-600 font-medium">' + esc(methodName) + '</span>' +
+        '</span>';
+    }
+    if (handler) return '<span class="px-2 py-0.5 rounded bg-gray-100 text-xs mono text-gray-600 border border-gray-200">' + esc(handler) + '</span>';
+    return '';
+  }
+
+  function fileChip(file) {
+    if (!file) return '';
+    var short = shortenFile(file);
+    return '<span class="cpw inline-flex items-center gap-1">' +
+      '<svg class="w-3 h-3 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>' +
+      '<span class="text-xs text-gray-400 mono">' + esc(short) + '</span>' +
+      '<button class="cpb w-4 h-4 text-gray-400 hover:text-gray-600 flex items-center justify-center" title="Copy" onclick="(function(e){e.stopPropagation();try{navigator.clipboard.writeText(\'' + file.replace(/\\/g,'\\\\').replace(/'/g,"\\'") + '\');}catch(x){};})(event)">' +
+      '<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>' +
+      '</button></span>';
+  }
+
+  // ── Cron panel ──────────────────────────────────────────────────────────────
+
+  function renderCronPanel(jobs) {
+    if (!data.hasScheduler) return noScheduler();
+    if (!jobs || !jobs.length) return emptyState('No cron jobs', 'Decorate a method with <code class="bg-gray-100 px-1 rounded text-indigo-600 mono text-xs">@Cron(expression, { name })</code>');
+    return jobs.map(function(job) {
+      var isRunning = !!job.running;
+      var frac = cycleFraction(job.nextRun, job.expressionHuman);
+      var pct  = frac !== null ? Math.round(frac * 100) : null;
+      var cardCls = 'job-card ' + (isRunning ? 'cron-running' : 'cron-idle');
+
+      return '<div class="' + cardCls + ' mb-3 fade-in">' +
+        '<div class="px-5 pt-4 pb-3">' +
+          '<div class="flex flex-col sm:flex-row sm:items-start gap-4">' +
+
+            // ── Left ──────────────────────────────────────────────────────
+            '<div class="flex items-start gap-3 flex-1 min-w-0">' +
+              // Status dot
+              '<div class="mt-1.5 flex-shrink-0">' +
+                (isRunning
+                  ? '<span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-500 pulse-green"></span>'
+                  : '<span class="inline-block w-2.5 h-2.5 rounded-full bg-indigo-400"></span>') +
+              '</div>' +
+
+              '<div class="min-w-0 flex-1">' +
+                // Name + badges
+                '<div class="flex flex-wrap items-center gap-2 mb-2">' +
+                  '<span class="font-semibold text-gray-900">' + esc(job.name) + '</span>' +
+                  (isRunning
+                    ? '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500 pulse-green inline-block"></span>Running</span>'
+                    : '<span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-indigo-100 text-indigo-700">Scheduled</span>') +
+                  methodBadge(job.className, job.methodName, job.handler) +
+                '</div>' +
+
+                // Cron expression + human label
+                '<div class="flex flex-wrap items-center gap-2 mb-2">' +
+                  '<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-gray-100 border border-gray-200 text-xs mono text-gray-700">' +
+                    '<svg class="w-3 h-3 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path stroke-linecap="round" d="M12 7v5l3 3"/></svg>' +
+                    esc(job.expression) +
+                  '</span>' +
+                  (job.expressionHuman && job.expressionHuman !== job.expression
+                    ? '<span class="px-2 py-1 rounded-lg bg-indigo-50 text-xs text-indigo-700 font-medium border border-indigo-100">' + esc(job.expressionHuman) + '</span>'
+                    : '') +
+                '</div>' +
+
+                fileChip(job.file) +
+              '</div>' +
+            '</div>' +
+
+            // ── Right: timing ─────────────────────────────────────────────
+            '<div class="flex-shrink-0 grid grid-cols-2 gap-x-6 text-right sm:text-right mt-1">' +
+              '<div>' +
+                '<div class="text-xs text-gray-400 mb-1">Next run</div>' +
+                (isRunning
+                  ? '<div class="text-sm font-semibold text-emerald-600">Running…</div>'
+                  : '<div class="text-xl font-bold text-gray-900 tabnum countdown" data-next="' + (job.nextRun || 0) + '">' + fmtCountdown(job.nextRun) + '</div>') +
+              '</div>' +
+              '<div>' +
+                '<div class="text-xs text-gray-400 mb-1">Last run</div>' +
+                '<div class="text-sm font-medium text-gray-600 tabnum reltime" data-ts="' + (job.lastRun || 0) + '">' + fmtRelative(job.lastRun) + '</div>' +
+              '</div>' +
+            '</div>' +
+
+          '</div>' +
+        '</div>' +
+
+        // ── Cycle progress bar ─────────────────────────────────────────────
+        (pct !== null
+          ? '<div class="px-5 pb-3">' +
+            '<div class="flex items-center gap-2">' +
+              '<div class="flex-1 bg-gray-100 rounded-full h-1.5 overflow-hidden">' +
+                '<div class="h-1.5 rounded-full bg-gradient-to-r from-indigo-400 to-indigo-600 transition-all duration-1000" style="width:' + pct + '%"></div>' +
+              '</div>' +
+              '<span class="text-xs text-gray-400 tabnum w-8 text-right">' + pct + '%</span>' +
+            '</div></div>'
+          : '') +
+
+      '</div>';
+    }).join('');
+  }
+
+  // ── Intervals panel ─────────────────────────────────────────────────────────
+
+  function intervalRing(ms) {
+    var circ = 125.7; // 2π×20
+    var dur  = Math.min(10, Math.max(0.5, ms / 1000)).toFixed(2) + 's';
+    return '<svg width="48" height="48" viewBox="0 0 48 48" class="flex-shrink-0">' +
+      '<circle class="ring-bg" cx="24" cy="24" r="20" fill="none" stroke-width="4"/>' +
+      '<circle class="ring-fg" cx="24" cy="24" r="20" fill="none" stroke-width="4"' +
+        ' stroke-dasharray="' + circ + '" stroke-dashoffset="' + circ + '"' +
+        ' transform="rotate(-90 24 24)">' +
+        '<animate attributeName="stroke-dashoffset" from="' + circ + '" to="0"' +
+          ' dur="' + dur + '" repeatCount="indefinite"/>' +
+      '</circle>' +
+      '<text x="24" y="28" text-anchor="middle" font-size="9" fill="#7c3aed" font-family="ui-monospace,monospace" font-weight="600">' +
+        (ms < 60000 ? (ms/1000).toFixed(0)+'s' : Math.floor(ms/60000)+'m') +
+      '</text>' +
+    '</svg>';
+  }
+
+  function renderIntervalsPanel(intervals) {
+    if (!data.hasScheduler) return noScheduler();
+    if (!intervals || !intervals.length) return emptyState('No intervals', 'Decorate a method with <code class="bg-gray-100 px-1 rounded text-indigo-600 mono text-xs">@Interval(\'name\', ms)</code>');
+    return intervals.map(function(iv) {
+      var freq = iv.ms > 0 ? fmtMs(iv.ms) : null;
+      var perMin = iv.ms > 0 ? +(60000 / iv.ms).toFixed(1) : null;
+
+      return '<div class="job-card interval-card mb-3 fade-in">' +
+        '<div class="px-5 py-4">' +
+          '<div class="flex items-center gap-4">' +
+
+            // Animated ring
+            (iv.ms > 0 ? intervalRing(iv.ms) : '<div class="w-12 h-12 rounded-full bg-violet-100 flex-shrink-0"></div>') +
+
+            // Info
+            '<div class="flex-1 min-w-0">' +
+              '<div class="flex flex-wrap items-center gap-2 mb-1.5">' +
+                '<span class="font-semibold text-gray-900">' + esc(iv.name) + '</span>' +
+                '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-violet-100 text-violet-700">' +
+                  '<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>' +
+                  'Interval' +
+                '</span>' +
+                methodBadge(iv.className, iv.methodName, iv.handler) +
+              '</div>' +
+
+              '<div class="flex flex-wrap items-center gap-2 mb-2">' +
+                (freq
+                  ? '<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg bg-violet-50 border border-violet-200 text-sm font-semibold text-violet-800">' +
+                    '<svg class="w-3.5 h-3.5 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>' +
+                    'Every ' + freq + '</span>'
+                  : '<span class="text-xs text-gray-400">interval not resolved</span>') +
+                (perMin && perMin > 0 && perMin < 1000
+                  ? '<span class="text-xs text-gray-400">' + perMin + '× / min</span>'
+                  : '') +
+              '</div>' +
+
+              fileChip(iv.file) +
+            '</div>' +
+
+            // Period display right side
+            (freq ? '<div class="hidden sm:block text-right flex-shrink-0">' +
+              '<div class="text-2xl font-bold text-violet-700 tabnum">' + freq + '</div>' +
+              '<div class="text-xs text-gray-400 mt-0.5">repeat period</div>' +
+            '</div>' : '') +
+
+          '</div>' +
+        '</div>' +
+      '</div>';
+    }).join('');
+  }
+
+  // ── Timeouts panel ──────────────────────────────────────────────────────────
+
+  function renderTimeoutsPanel(timeouts) {
+    if (!data.hasScheduler) return noScheduler();
+    if (!timeouts || !timeouts.length) return emptyState('No timeouts', 'Decorate a method with <code class="bg-gray-100 px-1 rounded text-indigo-600 mono text-xs">@Timeout(\'name\', ms)</code>');
+    return timeouts.map(function(to) {
+      var fireAt = APP_START + to.ms;
+      var fired  = to.ms > 0 && Date.now() > fireAt;
+      var remain = fired ? 0 : fireAt - Date.now();
+      var cls    = fired ? 'timeout-fired' : 'timeout-pending';
+
+      return '<div class="job-card ' + cls + ' mb-3 fade-in">' +
+        '<div class="px-5 py-4">' +
+          '<div class="flex items-center gap-4">' +
+
+            // Status icon box
+            '<div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ' +
+              (fired ? 'bg-gray-100 border border-gray-200' : 'bg-amber-50 border border-amber-200') + '">' +
+              (fired
+                ? '<svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M5 13l4 4L19 7"/></svg>'
+                : '<svg class="w-5 h-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>') +
+            '</div>' +
+
+            // Info
+            '<div class="flex-1 min-w-0">' +
+              '<div class="flex flex-wrap items-center gap-2 mb-1.5">' +
+                '<span class="font-semibold ' + (fired ? 'text-gray-500' : 'text-gray-900') + '">' + esc(to.name) + '</span>' +
+                (fired
+                  ? '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-100 text-gray-500 border border-gray-200"><svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M5 13l4 4L19 7"/></svg>Fired</span>'
+                  : '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-700"><span class="w-1.5 h-1.5 rounded-full bg-amber-500 pulse-green inline-block"></span>Pending</span>') +
+                methodBadge(to.className, to.methodName, to.handler) +
+              '</div>' +
+
+              '<div class="flex flex-wrap items-center gap-2 mb-2">' +
+                (to.ms > 0
+                  ? '<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-sm font-semibold border ' +
+                    (fired
+                      ? 'bg-gray-50 border-gray-200 text-gray-500'
+                      : 'bg-amber-50 border-amber-200 text-amber-800') + '">' +
+                    '<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>' +
+                    (fired ? 'Fired after ' : 'Fires in ') + fmtMs(to.ms) +
+                    '</span>'
+                  : '') +
+                (!fired && to.ms > 0
+                  ? '<span class="text-xs text-gray-500 tabnum timeout-cd" data-fire-at="' + fireAt + '">~' + fmtMs(remain) + ' remaining</span>'
+                  : (fired ? '<span class="text-xs text-gray-400">one-shot · removed from registry</span>' : '')) +
+              '</div>' +
+
+              fileChip(to.file) +
+            '</div>' +
+
+            // Right: delay
+            (to.ms > 0 ? '<div class="hidden sm:block text-right flex-shrink-0">' +
+              '<div class="text-2xl font-bold tabnum ' + (fired ? 'text-gray-400' : 'text-amber-600') + '">' + fmtMs(to.ms) + '</div>' +
+              '<div class="text-xs text-gray-400 mt-0.5">one-shot delay</div>' +
+            '</div>' : '') +
+
+          '</div>' +
+        '</div>' +
+      '</div>';
+    }).join('');
+  }
+
+  // ── Stat cards ──────────────────────────────────────────────────────────────
+
+  function renderStats(d) {
+    var running = (d.cronJobs||[]).filter(function(j){return j.running;}).length;
+    var cards = [
+      { v:(d.cronJobs||[]).length+(d.intervals||[]).length+(d.timeouts||[]).length,
+        label:'Total Jobs', bg:'bg-gray-50', border:'border-gray-200',
+        iconBg:'bg-gray-200', iconColor:'text-gray-600',
+        path:'<path stroke-linecap="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>' },
+      { v:(d.cronJobs||[]).length, label:'Cron Jobs',
+        bg:'bg-indigo-50', border:'border-indigo-200', iconBg:'bg-indigo-200', iconColor:'text-indigo-700',
+        path:'<circle cx="12" cy="12" r="9"/><path stroke-linecap="round" d="M12 7v5l3 3"/>' },
+      { v:(d.intervals||[]).length, label:'Intervals',
+        bg:'bg-violet-50', border:'border-violet-200', iconBg:'bg-violet-200', iconColor:'text-violet-700',
+        path:'<path stroke-linecap="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>' },
+      { v:(d.timeouts||[]).length, label:'Timeouts',
+        bg:'bg-amber-50', border:'border-amber-200', iconBg:'bg-amber-200', iconColor:'text-amber-700',
+        path:'<path stroke-linecap="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>' },
+    ];
+    if (running > 0) cards[0] = { v:running, label:'Running Now',
+      bg:'bg-emerald-50', border:'border-emerald-200', iconBg:'bg-emerald-200', iconColor:'text-emerald-700',
+      path:'<path stroke-linecap="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>' };
+
+    return cards.map(function(c) {
+      return '<div class="rounded-xl border ' + c.border + ' ' + c.bg + ' p-4 flex items-center gap-3">' +
+        '<div class="w-9 h-9 rounded-lg ' + c.iconBg + ' flex items-center justify-center flex-shrink-0">' +
+          '<svg class="w-4 h-4 ' + c.iconColor + '" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">' + c.path + '</svg>' +
+        '</div>' +
+        '<div><div class="text-2xl font-bold text-gray-900">' + c.v + '</div>' +
+        '<div class="text-xs text-gray-500">' + c.label + '</div></div>' +
+      '</div>';
+    }).join('');
+  }
+
+  // ── Timeline ────────────────────────────────────────────────────────────────
+
+  function renderTimeline(jobs) {
+    var section = document.getElementById('timelineSection');
+    var list    = document.getElementById('timelineList');
+    if (!jobs || !jobs.length) { section.classList.add('hidden'); return; }
+
+    // Sort by nextRun (including overdue which we show as "due now")
+    var sorted = jobs.slice().sort(function(a,b) {
+      return (a.nextRun || 0) - (b.nextRun || 0);
+    });
+
+    var horizon = Date.now() + 3 * 3600000;
+    var visible = sorted.filter(function(j) {
+      return j.nextRun && j.nextRun <= horizon;
+    });
+
+    if (!visible.length) { section.classList.add('hidden'); return; }
+    section.classList.remove('hidden');
+
+    var colors = [
+      { dot:'bg-indigo-500', text:'text-indigo-700', bg:'bg-indigo-50', border:'border-indigo-200' },
+      { dot:'bg-violet-500', text:'text-violet-700', bg:'bg-violet-50', border:'border-violet-200' },
+      { dot:'bg-emerald-500', text:'text-emerald-700', bg:'bg-emerald-50', border:'border-emerald-200' },
+      { dot:'bg-rose-500', text:'text-rose-700', bg:'bg-rose-50', border:'border-rose-200' },
+      { dot:'bg-amber-500', text:'text-amber-700', bg:'bg-amber-50', border:'border-amber-200' },
+      { dot:'bg-cyan-500', text:'text-cyan-700', bg:'bg-cyan-50', border:'border-cyan-200' },
+    ];
+
+    list.innerHTML = visible.map(function(job, i) {
+      var c = colors[i % colors.length];
+      var isOverdue = job.nextRun < Date.now();
+      var timeLabel = isOverdue ? 'due now' : 'in ' + fmtCountdown(job.nextRun);
+      return '<div class="flex items-center gap-3 p-2.5 rounded-lg border ' + c.border + ' ' + c.bg + '">' +
+        '<span class="w-2.5 h-2.5 rounded-full flex-shrink-0 ' + c.dot + (isOverdue ? ' pulse-green' : '') + '"></span>' +
+        '<span class="font-medium text-sm text-gray-800 flex-1">' + esc(job.name) + '</span>' +
+        '<span class="text-xs font-semibold ' + c.text + ' tabnum countdown-tl" data-next="' + (job.nextRun||0) + '">' + timeLabel + '</span>' +
+        '<span class="text-xs text-gray-400 mono">' + esc(job.expressionHuman || job.expression) + '</span>' +
+      '</div>';
+    }).join('');
+  }
+
+  // ── Empty / no scheduler ─────────────────────────────────────────────────────
+
+  function emptyState(title, sub) {
+    return '<div class="bg-white rounded-xl border border-gray-200 p-12 text-center">' +
+      '<div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4">' +
+        '<svg class="w-6 h-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path stroke-linecap="round" d="M12 7v5l3 3"/></svg>' +
+      '</div>' +
+      '<p class="font-semibold text-gray-700 mb-1">' + title + '</p>' +
+      '<p class="text-sm text-gray-400 max-w-xs mx-auto">' + sub + '</p>' +
+    '</div>';
+  }
+
+  function noScheduler() {
+    return '<div class="bg-white rounded-xl border border-dashed border-gray-300 p-12 text-center">' +
+      '<div class="w-14 h-14 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-5">' +
+        '<svg class="w-7 h-7 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path stroke-linecap="round" d="M12 7v5l3 3"/></svg>' +
+      '</div>' +
+      '<p class="font-semibold text-gray-800 text-lg mb-1">@nestjs/schedule not detected</p>' +
+      '<p class="text-sm text-gray-500 mb-6 max-w-sm mx-auto">Install the package and add <code class="bg-gray-100 px-1 rounded mono text-xs">ScheduleModule.forRoot()</code> to your AppModule.</p>' +
+      '<div class="inline-block text-left bg-gray-900 rounded-xl px-5 py-4">' +
+        '<code class="text-xs text-emerald-400 mono block mb-1">npm install @nestjs/schedule</code>' +
+        '<code class="text-xs text-gray-400 mono block">ScheduleModule.forRoot() // AppModule imports</code>' +
+      '</div>' +
+    '</div>';
+  }
+
+  // ── Main render ─────────────────────────────────────────────────────────────
+
+  function render(d) {
+    data = d;
+    var total   = (d.cronJobs||[]).length + (d.intervals||[]).length + (d.timeouts||[]).length;
+    var running = (d.cronJobs||[]).filter(function(j){return j.running;}).length;
+
+    document.getElementById('statsRow').innerHTML = renderStats(d);
+    document.getElementById('tabCronCount').textContent     = (d.cronJobs||[]).length;
+    document.getElementById('tabIntervalCount').textContent = (d.intervals||[]).length;
+    document.getElementById('tabTimeoutCount').textContent  = (d.timeouts||[]).length;
+    document.getElementById('subTitle').textContent = d.hasScheduler
+      ? total + ' job' + (total !== 1 ? 's' : '') + (running > 0 ? ' · ' + running + ' running now' : '')
+      : '@nestjs/schedule not detected';
+    document.getElementById('lastRefreshed').textContent = 'Updated ' + new Date(d.scannedAt).toLocaleTimeString();
+
+    document.getElementById('panelCron').innerHTML      = renderCronPanel(d.cronJobs);
+    document.getElementById('panelIntervals').innerHTML  = renderIntervalsPanel(d.intervals);
+    document.getElementById('panelTimeouts').innerHTML   = renderTimeoutsPanel(d.timeouts);
+
+    if (activeTab === 'cron') renderTimeline(d.cronJobs);
+  }
+
+  // ── Ticker ──────────────────────────────────────────────────────────────────
+
+  function tick() {
+    document.querySelectorAll('.countdown[data-next]').forEach(function(el) {
+      var ts = parseInt(el.getAttribute('data-next'));
+      if (ts) el.textContent = fmtCountdown(ts);
+    });
+    document.querySelectorAll('.countdown-tl[data-next]').forEach(function(el) {
+      var ts = parseInt(el.getAttribute('data-next'));
+      if (!ts) return;
+      el.textContent = ts < Date.now() ? 'due now' : 'in ' + fmtCountdown(ts);
+    });
+    document.querySelectorAll('.reltime[data-ts]').forEach(function(el) {
+      var ts = parseInt(el.getAttribute('data-ts'));
+      if (ts) el.textContent = fmtRelative(ts);
+    });
+    document.querySelectorAll('.timeout-cd[data-fire-at]').forEach(function(el) {
+      var at = parseInt(el.getAttribute('data-fire-at'));
+      var r  = at - Date.now();
+      el.textContent = r > 0 ? '~' + fmtMs(r) + ' remaining' : 'fired';
+    });
+  }
+
+  // ── Auto-refresh ────────────────────────────────────────────────────────────
+
+  function refresh() {
+    fetch('/__profiler/api/cron-jobs')
+      .then(function(r) { return r.json(); })
+      .then(function(d) { render(d); })
+      .catch(function() {});
+  }
+
+  // ── Tabs ────────────────────────────────────────────────────────────────────
+
+  document.querySelectorAll('.ctab').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      activeTab = btn.getAttribute('data-tab');
+      document.querySelectorAll('.ctab').forEach(function(b) { b.classList.remove('active'); });
+      btn.classList.add('active');
+      ['cron','intervals','timeouts'].forEach(function(t) {
+        document.getElementById('panel' + t.charAt(0).toUpperCase() + t.slice(1))
+          .classList.toggle('hidden', activeTab !== t);
+      });
+      document.getElementById('timelineSection').classList.toggle('hidden', activeTab !== 'cron');
+      if (activeTab === 'cron') renderTimeline(data.cronJobs);
+    });
+  });
+
+  document.getElementById('refreshBtn').addEventListener('click', refresh);
+
+  render(data);
+  setInterval(tick, 1000);
+  setInterval(refresh, 15000);
+
+})();
+</script>