Worker: live CI step list + progress bar on loading page

pirate · pirate · commit 468b4c4323e4 · 2026-05-12T23:12:15.000-07:00
- New /api/status endpoint: queries the latest workflow_dispatch run +
  its job's step list, returns step statuses (queued/in_progress/
  completed/failed) for the loading page to render.

- Loading page redesign: real-time step list (rendered as a checklist
  with spinners on the current step), progress bar based on
  done + 0.5*running / total, elapsed-time counter, deep-link to the
  GH Actions run, and a clearer 'mining already running' state when
  dedup returns 202.
diff --git a/cloudflare/worker/index.ts b/cloudflare/worker/index.ts
@@ -24,6 +24,9 @@ export default {
     if (url.pathname === "/api/refresh") {
       return handleRefresh(req, env, url);
     }
+    if (url.pathname === "/api/status") {
+      return handleStatus(req, env, url);
+    }
 
     // -- Static assets ----------------------------------------------------
     const assetResp = await env.ASSETS.fetch(req);
@@ -132,10 +135,73 @@ function json(obj: unknown, status = 200): Response {
 }
 
 
+async function handleStatus(
+  req: Request,
+  env: Env,
+  url: URL,
+): Promise<Response> {
+  const user = url.searchParams.get("user")?.trim();
+  if (!user || !VALID_LOGIN.test(user)) {
+    return json({ error: "invalid user" }, 400);
+  }
+  const repo = env.GH_REPO ?? "ArchiveBox/githubusers";
+  // Fetch the most recent workflow_dispatch run. Since concurrency.group
+  // serializes mines, the latest in_progress (or most recent overall)
+  // is most likely the one for this user.
+  const r = await fetch(
+    `https://api.github.com/repos/${repo}/actions/runs?per_page=5&event=workflow_dispatch`,
+    {
+      headers: {
+        Authorization: `Bearer ${env.GH_DISPATCH_TOKEN}`,
+        "User-Agent": "githubusers-archivebox-io",
+        Accept: "application/vnd.github+json",
+      },
+    },
+  );
+  if (!r.ok) {
+    return json({ error: "gh api failed", status: r.status }, 502);
+  }
+  const data = await r.json() as any;
+  const run = (data.workflow_runs ?? [])[0];
+  if (!run) {
+    return json({ ok: false, status: "no_runs" });
+  }
+  // Get job steps for the run.
+  const jr = await fetch(
+    `https://api.github.com/repos/${repo}/actions/runs/${run.id}/jobs`,
+    {
+      headers: {
+        Authorization: `Bearer ${env.GH_DISPATCH_TOKEN}`,
+        "User-Agent": "githubusers-archivebox-io",
+        Accept: "application/vnd.github+json",
+      },
+    },
+  );
+  const jdata = await jr.json() as any;
+  const job = (jdata.jobs ?? [])[0];
+  const steps = (job?.steps ?? []).map((s: any) => ({
+    name: s.name,
+    status: s.status,
+    conclusion: s.conclusion,
+  }));
+  return json({
+    ok: true,
+    run_id: run.id,
+    run_status: run.status,            // queued | in_progress | completed
+    run_conclusion: run.conclusion,    // success | failure | cancelled | null
+    run_started_at: run.run_started_at,
+    run_url: run.html_url,
+    job_status: job?.status,
+    current_step: steps.find((s: any) => s.status === "in_progress")?.name
+                  ?? steps.at(-1)?.name ?? null,
+    steps,
+  });
+}
+
+
 function loadingPage(user: string): string {
-  // Inline HTML for the "mining…" view. Polls /<user> every 4 seconds and
-  // reloads once we get a real (non-fallback) response. Also kicks off
-  // /api/refresh on load so users don't need a config change.
+  // Inline HTML for the "mining…" view. Polls /api/status for the GH
+  // workflow run's step list + /<user>.html for the first partial deploy.
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -146,61 +212,129 @@ function loadingPage(user: string): string {
   html, body {
     background: #0d1117; color: #e6edf3;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-    margin: 0; padding: 0; min-height: 100%;
+    margin: 0; padding: 0; min-height: 100vh;
     display: flex; align-items: center; justify-content: center;
   }
   .card {
-    max-width: 540px; padding: 40px 36px; text-align: center;
+    max-width: 620px; width: calc(100% - 32px);
+    padding: 32px 36px;
     border: 1px solid #30363d; border-radius: 12px; background: #161b22;
   }
-  h1 { font-size: 18px; margin: 0 0 6px; font-weight: 500; }
-  h2 { font-size: 26px; margin: 0 0 18px; font-weight: 600;
+  h1 { font-size: 16px; margin: 0; font-weight: 500; color: #8b949e; }
+  h2 { font-size: 28px; margin: 4px 0 16px; font-weight: 600;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-  p { color: #8b949e; line-height: 1.5; margin: 12px 0; font-size: 13px; }
+  p { color: #8b949e; line-height: 1.5; margin: 10px 0; font-size: 13px; }
+  .row { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
   .spinner {
-    width: 36px; height: 36px; margin: 24px auto;
-    border: 3px solid #30363d; border-top-color: #58a6ff;
-    border-radius: 50%; animation: spin 0.9s linear infinite;
+    width: 22px; height: 22px;
+    border: 2px solid #30363d; border-top-color: #58a6ff;
+    border-radius: 50%; animation: spin 0.9s linear infinite; flex: 0 0 auto;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
-  .status {
+  .summary { font-size: 13px; }
+  .summary .now { color: #e6edf3; font-weight: 500; }
+  .summary .elapsed { color: #8b949e; font-variant-numeric: tabular-nums; }
+  .progress-track {
+    height: 6px; background: #21262d; border-radius: 3px;
+    overflow: hidden; margin: 8px 0 20px;
+  }
+  .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #58a6ff, #3fb950);
+    width: 0%; transition: width 0.4s;
+  }
+  ol.steps {
+    list-style: none; padding: 0; margin: 0;
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    font-size: 12px; color: #8b949e; margin-top: 16px;
-    padding: 8px 12px; background: #0d1117; border-radius: 6px;
-    border: 1px solid #21262d;
+    font-size: 12px;
+  }
+  ol.steps li {
+    padding: 7px 12px; border-radius: 4px; margin-bottom: 3px;
+    display: flex; align-items: center; gap: 10px;
+    background: #0d1117; border: 1px solid transparent;
+  }
+  ol.steps li.done { color: #3fb950; }
+  ol.steps li.done::before { content: "✓"; flex: 0 0 14px; }
+  ol.steps li.running {
+    color: #58a6ff; border-color: #1f4d7a; background: #0e2640;
+  }
+  ol.steps li.running::before {
+    content: ""; flex: 0 0 14px; width: 12px; height: 12px;
+    border: 2px solid #30363d; border-top-color: #58a6ff;
+    border-radius: 50%; animation: spin 0.9s linear infinite;
+  }
+  ol.steps li.pending { color: #6e7681; }
+  ol.steps li.pending::before { content: "◌"; flex: 0 0 14px; }
+  ol.steps li.failed { color: #f85149; border-color: #6e2120; background: #2a0e10; }
+  ol.steps li.failed::before { content: "✗"; flex: 0 0 14px; }
+  .err {
+    color: #f85149; padding: 10px 14px; background: #2a0e10;
+    border: 1px solid #6e2120; border-radius: 6px; font-size: 13px;
+    margin: 10px 0;
   }
-  .status.ok { color: #3fb950; border-color: #1f6028; }
-  .status.err { color: #f85149; border-color: #6e2120; }
   a { color: #58a6ff; }
-  code { background: #21262d; padding: 2px 6px; border-radius: 4px; font-size: 90%; }
+  code { background: #21262d; padding: 1px 5px; border-radius: 3px;
+         font-size: 90%; font-family: inherit; }
+  .footer-row {
+    margin-top: 22px; padding-top: 18px; border-top: 1px solid #21262d;
+    font-size: 11px; color: #6e7681;
+    display: flex; justify-content: space-between; align-items: center;
+  }
 </style>
 </head>
 <body>
   <div class="card">
     <h1>Mining contribution stats for</h1>
-    <h2>@${user}</h2>
-    <div class="spinner"></div>
-    <p>
-      This takes <strong>~3–8 minutes</strong> the first time
-      (gathering commits, PRs, issues, stars, and merged-PR diff stats
-      from the GitHub API).
-      The page will reload automatically when ready.
-    </p>
-    <div id="status" class="status">Triggering mining job…</div>
-    <p style="margin-top:24px;font-size:11px;">
-      Tip: bookmark <code>githubusers.archivebox.io/${user}</code>.
-      Subsequent visits load instantly from cache.
-    </p>
+    <h2 id="hdr">@${user}</h2>
+
+    <div class="row">
+      <div class="spinner" id="hdr-spinner"></div>
+      <div class="summary" style="flex:1">
+        <div class="now" id="now-line">Triggering mining job…</div>
+        <div class="elapsed" id="elapsed-line">elapsed 00:00</div>
+      </div>
+    </div>
+
+    <div class="progress-track"><div class="progress-fill" id="progress"></div></div>
+
+    <ol class="steps" id="steps"></ol>
+
+    <div id="error" class="err" style="display:none"></div>
+
+    <div class="footer-row">
+      <div>
+        Bookmark <code>/${user}</code> · subsequent visits load instantly
+      </div>
+      <a id="run-link" href="#" target="_blank" rel="noreferrer" style="display:none">view CI run →</a>
+    </div>
   </div>
 
 <script>
 "use strict";
 const USER = ${JSON.stringify(user)};
-const statusEl = document.getElementById("status");
 
-function setStatus(msg, cls = "") {
-  statusEl.textContent = msg;
-  statusEl.className = "status" + (cls ? " " + cls : "");
+const $now = document.getElementById("now-line");
+const $elapsed = document.getElementById("elapsed-line");
+const $progress = document.getElementById("progress");
+const $steps = document.getElementById("steps");
+const $err = document.getElementById("error");
+const $runLink = document.getElementById("run-link");
+const $spinner = document.getElementById("hdr-spinner");
+
+const startedAt = Date.now();
+function fmtElapsed(sec) {
+  const m = Math.floor(sec / 60), s = sec % 60;
+  return String(m).padStart(2, "0") + ":" + String(s).padStart(2, "0");
+}
+setInterval(() => {
+  $elapsed.textContent = "elapsed " + fmtElapsed(
+    Math.floor((Date.now() - startedAt) / 1000),
+  );
+}, 1000);
+
+function showError(msg) {
+  $err.style.display = "block";
+  $err.textContent = msg;
 }
 
 async function dispatch() {
@@ -209,50 +343,106 @@ async function dispatch() {
       method: "POST",
     });
     const data = await r.json().catch(() => ({}));
-    if (r.status === 202) {
-      setStatus("Mining job dispatched. Polling for completion…");
-    } else if (r.status === 404) {
-      setStatus("GitHub user @" + USER + " does not exist.", "err");
+    if (r.status === 404) {
+      showError("GitHub user @" + USER + " does not exist.");
+      $spinner.style.display = "none";
+      return false;
+    }
+    if (!r.ok) {
+      showError("Dispatch failed (HTTP " + r.status + "): " + (data.error || "unknown"));
       return false;
-    } else {
-      setStatus("Dispatch failed (HTTP " + r.status + "): " + (data.error || "unknown"), "err");
     }
+    $now.textContent = data.status === "already_running"
+      ? "Mining already running — joining in progress…"
+      : "Mining job dispatched.";
   } catch (e) {
-    setStatus("Dispatch network error: " + e.message, "err");
+    showError("Dispatch network error: " + e.message);
+    return false;
   }
   return true;
 }
 
-async function poll() {
+async function fetchStatus() {
+  try {
+    const r = await fetch("/api/status?user=" + encodeURIComponent(USER),
+      { cache: "no-store" });
+    if (!r.ok) return null;
+    return await r.json();
+  } catch (e) { return null; }
+}
+
+async function checkDeployed() {
   try {
     const r = await fetch("/" + USER, {
       cache: "no-store",
       headers: { "X-Stats-Poll": "1" },
     });
     if (!r.ok) return false;
     const txt = await r.text();
-    // If the page is our own loading shell, keep waiting.
-    if (txt.includes("Mining contribution stats for")) return false;
-    // Otherwise the real dashboard has landed — reload to display it.
-    return true;
+    // If the response is our loading shell, the asset isn't there yet.
+    return !txt.includes('id="hdr">@' + USER);
   } catch (e) {
     return false;
   }
 }
 
+function renderSteps(status) {
+  if (!status || !status.steps) return;
+  if (status.run_url) {
+    $runLink.href = status.run_url;
+    $runLink.style.display = "inline";
+  }
+  // Filter to the steps that matter for the user.
+  const meaningful = status.steps.filter(s =>
+    !["Set up job", "Complete job"].includes(s.name) &&
+    !s.name.startsWith("Post ")
+  );
+  const total = meaningful.length || 1;
+  let done = 0, running = 0;
+  $steps.innerHTML = meaningful.map(s => {
+    let cls = "pending";
+    if (s.status === "completed") {
+      if (s.conclusion === "success") { cls = "done"; done++; }
+      else if (s.conclusion === "skipped") { cls = "done"; done++; }
+      else { cls = "failed"; }
+    } else if (s.status === "in_progress") {
+      cls = "running"; running++;
+    } else if (s.status === "queued") {
+      cls = "pending";
+    }
+    return '<li class="' + cls + '">' + s.name + '</li>';
+  }).join("");
+  // Progress = (done + 0.5 * running) / total
+  const pct = Math.min(100, ((done + 0.5 * running) / total) * 100);
+  $progress.style.width = pct + "%";
+  // Header status line
+  const runStep = meaningful.find(s => s.status === "in_progress");
+  if (status.run_status === "completed") {
+    if (status.run_conclusion === "success") {
+      $now.textContent = "Run completed · loading dashboard…";
+    } else {
+      $now.textContent = "Run " + status.run_conclusion + " — see CI link";
+    }
+  } else if (runStep) {
+    $now.textContent = "Running: " + runStep.name;
+  } else if (status.run_status === "queued") {
+    $now.textContent = "Queued in GitHub Actions…";
+  }
+}
+
 (async () => {
   const ok = await dispatch();
   if (!ok) return;
-  const started = Date.now();
   const interval = setInterval(async () => {
-    const ready = await poll();
-    const elapsed = Math.floor((Date.now() - started) / 1000);
-    if (ready) {
+    const [status, deployed] = await Promise.all([
+      fetchStatus(),
+      checkDeployed(),
+    ]);
+    renderSteps(status);
+    if (deployed) {
       clearInterval(interval);
-      setStatus("Dashboard ready — reloading…", "ok");
+      $now.textContent = "Dashboard ready — reloading…";
       setTimeout(() => location.reload(), 500);
-    } else {
-      setStatus("Mining in progress · " + elapsed + "s elapsed · still polling…");
     }
   }, 4000);
 })();
