<div class="demo">
  <div class="tile">
    <div class="tile-head">
      <div class="job-name">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8"/></svg>
        <span>nightly-billing-sync</span>
      </div>
      <span class="badge ok">Healthy</span>
    </div>

    <div class="tile-stats">
      <div class="stat">
        <span class="stat-label">Success rate</span>
        <span class="stat-value">96.7%</span>
      </div>
      <div class="stat">
        <span class="stat-label">Avg duration</span>
        <span class="stat-value">42s</span>
      </div>
      <div class="stat">
        <span class="stat-label">Next run</span>
        <span class="stat-value countdown" id="countdown">--:--</span>
      </div>
    </div>

    <div class="history" id="history" role="img" aria-label="Last 30 runs, mostly successful with 2 failures">
      <!-- bars injected by JS -->
    </div>
    <div class="history-legend">
      <span>30 runs ago</span>
      <span>Latest</span>
    </div>

    <div class="tile-foot" id="tooltip">Hover a bar to see run details</div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.tile { width: 380px; max-width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }

.tile-head { display: flex; align-items: center; justify-content: space-between; }
.job-name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #111827; font-family: ui-monospace, 'SF Mono', monospace; }
.job-name svg { color: #6366f1; flex-shrink: 0; }
.badge { font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; padding: 4px 9px; border-radius: 999px; }
.badge.ok { background: #dcfce7; color: #15803d; }

.tile-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat-label { font-size: 10.5px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-value { font-size: 15px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.stat-value.countdown { color: #4f46e5; }

.history { display: flex; align-items: flex-end; gap: 3px; height: 52px; }
.bar { flex: 1; border-radius: 3px 3px 1px 1px; min-width: 4px; cursor: pointer; transition: opacity 0.12s; }
.bar:hover { opacity: 0.72; }
.bar.pass { background: #86efac; }
.bar.fail { background: #fca5a5; height: 16px !important; }

.history-legend { display: flex; justify-content: space-between; font-size: 10px; color: #cbd5e1; font-weight: 600; margin-top: -8px; }

.tile-foot { font-size: 11.5px; color: #64748b; text-align: center; padding-top: 4px; border-top: 1px solid #f1f5f9; min-height: 16px; }

const history = document.getElementById('history');
const tooltip = document.getElementById('tooltip');
const countdown = document.getElementById('countdown');

// Seeded pseudo-random run history: mostly pass, a couple of fails
const seed = [92,88,95,90,60,85,91,89,0,93,87,94,90,86,92,0,88,95,91,89,93,90,87,92,94,88,91,95,90,93];

seed.forEach((duration, i) => {
  const bar = document.createElement('div');
  const failed = duration === 0;
  bar.className = 'bar ' + (failed ? 'fail' : 'pass');
  if (!failed) bar.style.height = Math.max(18, (duration / 95) * 52) + 'px';
  bar.dataset.tip = failed
    ? `Run #${i + 1} — failed (timeout after 90s)`
    : `Run #${i + 1} — passed in ${duration}s`;
  bar.addEventListener('mouseenter', () => { tooltip.textContent = bar.dataset.tip; });
  bar.addEventListener('mouseleave', () => { tooltip.textContent = 'Hover a bar to see run details'; });
  history.appendChild(bar);
});

// Live countdown to next scheduled run
let secondsLeft = 3 * 60 + 47;
function tick() {
  const m = Math.floor(secondsLeft / 60);
  const s = secondsLeft % 60;
  countdown.textContent = `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  if (secondsLeft > 0) secondsLeft--;
}
tick();
setInterval(tick, 1000);