feat: initial runner dashboard

Node 20 / no-framework HTTP service. Routes: /healthz (no auth), /api/runners (proxy to GitHub), / (dashboard UI). Dark theme, Basic Auth, 15s poll, stale-data strip, token-missing empty state. Agent-Session: runner-dashboard-deploy-2026-06-19
2026-06-19 09:02:59 +00:00
commit 34858a3088
5 changed files with 615 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,4 @@
+.git
+*.md
+.env*
+node_modules
--- a/10
+++ b/10
@@ -0,0 +1,10 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY server.js .
+COPY index.html .
+
+EXPOSE 3000
+
+CMD ["node", "server.js"]
--- a/README.md
+++ b/README.md
@@ -0,0 +1,26 @@
+# runner-dashboard
+
+Self-hosted GitHub Actions runner status dashboard for the peptide-repo org.
+
+## Setup
+
+Set the following env vars (via Coolify or `.env` locally):
+
+| Var | Purpose |
+|-----|---------|
+| `GITHUB_RUNNERS_READ_TOKEN` | Fine-grained PAT: org `peptide-repo`, Self-hosted runners: Read-only |
+| `DASH_USER` | HTTP Basic Auth username |
+| `DASH_PASS` | HTTP Basic Auth password |
+| `PORT` | Port to listen on (default: 3000) |
+
+## Run locally
+
+```sh
+DASH_USER=admin DASH_PASS=secret GITHUB_RUNNERS_READ_TOKEN=ghp_... node server.js
+```
+
+Then open http://localhost:3000 (auth required).
+
+## Health check
+
+`GET /healthz` returns `200 ok` — no auth, no GitHub call. Used by Coolify.
--- a/index.html
+++ b/index.html
@@ -0,0 +1,392 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Peptide Repo / CI Runners</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --teal:       #1B8A92;
+    --teal-light: #22a8b2;
+    --teal-dim:   #0f5c62;
+    --bg:         #0d1117;
+    --surface:    #161b22;
+    --surface2:   #21262d;
+    --border:     #30363d;
+    --text:       #e6edf3;
+    --text-muted: #8b949e;
+    --green:      #3fb950;
+    --green-bg:   #0d2818;
+    --amber:      #d29922;
+    --amber-bg:   #2b1d00;
+    --red:        #f85149;
+    --red-bg:     #2d1114;
+    --gray:       #6e7681;
+    --gray-bg:    #21262d;
+    --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
+    --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-sans);
+    font-size: 14px;
+    line-height: 1.5;
+    min-height: 100vh;
+  }
+
+  /* ---- Header ---- */
+  header {
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    padding: 16px 24px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .header-brand {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text);
+    flex: 1;
+  }
+
+  .header-brand span {
+    color: var(--teal);
+  }
+
+  .live-indicator {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+
+  .live-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: var(--green);
+    animation: pulse 2s infinite;
+  }
+
+  @keyframes pulse {
+    0%,100% { opacity:1; transform:scale(1); }
+    50%      { opacity:.5; transform:scale(1.2); }
+  }
+
+  /* ---- Health banner ---- */
+  #health-banner {
+    margin: 16px 24px 0;
+    padding: 12px 16px;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 14px;
+    border: 1px solid transparent;
+    transition: background .3s, color .3s;
+  }
+
+  #health-banner.green  { background: var(--green-bg); color: var(--green); border-color: var(--green); }
+  #health-banner.amber  { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
+  #health-banner.red    { background: var(--red-bg);   color: var(--red);   border-color: var(--red);   }
+  #health-banner.gray   { background: var(--gray-bg);  color: var(--gray);  border-color: var(--border);}
+
+  /* ---- Stale data strip ---- */
+  #stale-strip {
+    display: none;
+    margin: 8px 24px 0;
+    padding: 8px 14px;
+    border-radius: 6px;
+    font-size: 12px;
+    border: 1px solid transparent;
+  }
+
+  #stale-strip.amber { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
+  #stale-strip.red   { background: var(--red-bg);   color: var(--red);   border-color: var(--red);   }
+
+  /* ---- Runner grid ---- */
+  main {
+    padding: 20px 24px;
+  }
+
+  #runner-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 16px;
+  }
+
+  /* ---- Runner card ---- */
+  .runner-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 18px;
+  }
+
+  .runner-name {
+    font-family: var(--font-mono);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text);
+    margin-bottom: 10px;
+    word-break: break-all;
+  }
+
+  .runner-status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+
+  .badge-green  { background: var(--green-bg); color: var(--green); }
+  .badge-amber  { background: var(--amber-bg); color: var(--amber); }
+  .badge-red    { background: var(--red-bg);   color: var(--red);   }
+  .badge-gray   { background: var(--gray-bg);  color: var(--gray);  }
+
+  .runner-meta {
+    font-size: 12px;
+    color: var(--text-muted);
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 10px;
+  }
+
+  .runner-meta span strong {
+    color: var(--text);
+  }
+
+  /* ---- Label chips ---- */
+  .label-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .chip {
+    font-size: 11px;
+    padding: 2px 7px;
+    border-radius: 4px;
+    font-family: var(--font-mono);
+  }
+
+  .chip-teal { background: rgba(27,138,146,.18); color: var(--teal-light); }
+  .chip-muted { background: var(--surface2); color: var(--text-muted); }
+
+  /* ---- Empty state ---- */
+  .empty-state {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 48px 24px;
+    color: var(--text-muted);
+  }
+
+  .empty-state .empty-icon { font-size: 36px; margin-bottom: 12px; }
+  .empty-state h3 { font-size: 16px; color: var(--text); margin-bottom: 6px; }
+  .empty-state code {
+    font-family: var(--font-mono);
+    background: var(--surface2);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+  }
+
+  @media (max-width: 600px) {
+    header { padding: 12px 16px; }
+    main   { padding: 14px 16px; }
+    #health-banner, #stale-strip { margin-left:16px; margin-right:16px; }
+    #runner-grid { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<header>
+  <div class="header-brand">
+    <span>Peptide Repo</span> / CI Runners
+  </div>
+  <div class="live-indicator">
+    <div class="live-dot"></div>
+    <span id="updated-at">Loading…</span>
+  </div>
+</header>
+
+<div id="health-banner" class="gray">Connecting…</div>
+<div id="stale-strip"></div>
+
+<main>
+  <div id="runner-grid"></div>
+</main>
+
+<script>
+(function () {
+  'use strict';
+
+  // ---- State ----
+  let lastSuccessTime = null; // ms timestamp of last good fetch
+  let staleTimer = null;
+
+  // ---- DOM refs ----
+  const banner  = document.getElementById('health-banner');
+  const strip   = document.getElementById('stale-strip');
+  const grid    = document.getElementById('runner-grid');
+  const updatedAt = document.getElementById('updated-at');
+
+  // ---- Helpers ----
+  function fmt(d) {
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  }
+
+  function sanitise(s) {
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  }
+
+  function setStale(ageMs) {
+    if (ageMs < 30000) { strip.style.display='none'; return; }
+    const secs = Math.round(ageMs / 1000);
+    strip.style.display = 'block';
+    strip.className = ageMs >= 60000 ? 'red' : 'amber';
+    strip.textContent = 'Last update ' + secs + 's ago — retrying…';
+  }
+
+  // ---- Stale monitor (runs every 5s) ----
+  function startStaleMonitor() {
+    if (staleTimer) clearInterval(staleTimer);
+    staleTimer = setInterval(() => {
+      if (lastSuccessTime === null) return;
+      setStale(Date.now() - lastSuccessTime);
+    }, 5000);
+  }
+
+  // ---- Badge for runner status ----
+  function badgeFor(runner) {
+    if (!runner || runner.status !== 'online') {
+      return '<span class="runner-status-badge badge-red">&#x2715; Offline</span>';
+    }
+    if (runner.busy) {
+      return '<span class="runner-status-badge badge-amber">&#9677; Online &mdash; Busy</span>';
+    }
+    return '<span class="runner-status-badge badge-green">&#x2713; Online &mdash; Idle</span>';
+  }
+
+  // ---- Label chips ----
+  const OMIT_LABELS = new Set(['x64', 'X64', 'x86_64']);
+  const TEAL_LABELS = new Set(['self-hosted', 'Linux', 'linux']);
+
+  function chipFor(name) {
+    if (OMIT_LABELS.has(name)) return '';
+    const cls = TEAL_LABELS.has(name) ? 'chip-teal' : 'chip-muted';
+    return '<span class="chip ' + cls + '">' + sanitise(name) + '</span>';
+  }
+
+  // ---- Render one card ----
+  function renderCard(runner) {
+    const labels = (runner.labels || []).map(l => chipFor(l.name || l)).filter(Boolean).join('');
+    const os = (runner.os || 'unknown').charAt(0).toUpperCase() + (runner.os || 'unknown').slice(1);
+
+    return '<div class="runner-card">' +
+      '<div class="runner-name">' + sanitise(runner.name || '—') + '</div>' +
+      badgeFor(runner) +
+      '<div class="runner-meta">' +
+        '<span><strong>OS:</strong> ' + sanitise(os) + '</span>' +
+        '<span><strong>Runner version:</strong> ' + sanitise(runner.runner_group_name || runner.version || '—') + '</span>' +
+      '</div>' +
+      (labels ? '<div class="label-chips">' + labels + '</div>' : '') +
+    '</div>';
+  }
+
+  // ---- Render runners array or error ----
+  function render(data) {
+    // data is either an array of runners or {error:...}
+    if (data && data.error === 'token_missing') {
+      banner.className = 'gray';
+      banner.textContent = 'Token Error — Check Coolify Config';
+      grid.innerHTML = '<div class="empty-state">' +
+        '<div class="empty-icon">&#128274;</div>' +
+        '<h3>No API token configured</h3>' +
+        '<p>Add <code>GITHUB_RUNNERS_READ_TOKEN</code> in Coolify env vars for this app.</p>' +
+      '</div>';
+      return;
+    }
+
+    if (data && data.error) {
+      banner.className = 'gray';
+      banner.textContent = 'Token Error — Check Coolify Config';
+      grid.innerHTML = '<div class="empty-state">' +
+        '<div class="empty-icon">&#9888;</div>' +
+        '<h3>API error (HTTP ' + (data.status || '?') + ')</h3>' +
+        '<p>Check that <code>GITHUB_RUNNERS_READ_TOKEN</code> is valid and has Self-hosted runners: Read permission.</p>' +
+      '</div>';
+      return;
+    }
+
+    const runners = Array.isArray(data) ? data : [];
+
+    if (runners.length === 0) {
+      banner.className = 'gray';
+      banner.textContent = 'Token Error — Check Coolify Config';
+      grid.innerHTML = '<div class="empty-state">' +
+        '<div class="empty-icon">&#128683;</div>' +
+        '<h3>No runners registered</h3>' +
+        '<p>No self-hosted runners found in the <code>peptide-repo</code> organisation.</p>' +
+      '</div>';
+      return;
+    }
+
+    // Compute aggregate health
+    const anyOffline = runners.some(r => r.status !== 'online');
+    const allBusy    = runners.every(r => r.busy);
+
+    if (anyOffline) {
+      banner.className = 'red';
+      banner.textContent = 'Runner Offline — Check VPS';
+    } else if (allBusy) {
+      banner.className = 'amber';
+      banner.textContent = 'Runner Busy — CI queue may wait';
+    } else {
+      banner.className = 'green';
+      banner.textContent = 'All Systems Ready';
+    }
+
+    grid.innerHTML = runners.map(renderCard).join('');
+  }
+
+  // ---- Fetch cycle ----
+  function fetchAndRender() {
+    fetch('/api/runners', { credentials: 'same-origin' })
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        lastSuccessTime = Date.now();
+        updatedAt.textContent = 'Updated ' + fmt(new Date());
+        strip.style.display = 'none';
+        render(data);
+      })
+      .catch(function () {
+        // Network failure — show stale indicator but don't clear existing cards
+        if (lastSuccessTime !== null) {
+          setStale(Date.now() - lastSuccessTime);
+        }
+      });
+  }
+
+  // ---- Init ----
+  startStaleMonitor();
+  fetchAndRender();
+  setInterval(fetchAndRender, 15000);
+})();
+</script>
+</body>
+</html>
--- a/server.js
+++ b/server.js
@@ -0,0 +1,183 @@
+/**
+ * Runner Dashboard — HTTP server
+ *
+ * What: Serves the CI runner status dashboard for peptide-repo org.
+ * Who triggers: Node process (started by Docker CMD or local `node server.js`).
+ * Deps: Node 20 built-ins only (http, https, crypto, fs, path).
+ *
+ * Routes:
+ *   GET /healthz       → 200 "ok" (no auth, no GitHub call — for Coolify health check)
+ *   GET /api/runners   → proxied GitHub runners JSON (auth required)
+ *   GET /              → dashboard HTML (auth required)
+ *
+ * Env:
+ *   PORT                       default 3000
+ *   DASH_USER / DASH_PASS       HTTP Basic Auth credentials
+ *   GITHUB_RUNNERS_READ_TOKEN   fine-grained PAT for org runners API
+ */
+
+'use strict';
+
+const http  = require('http');
+const https = require('https');
+const fs    = require('fs');
+const path  = require('path');
+
+const PORT      = parseInt(process.env.PORT || '3000', 10);
+const DASH_USER = process.env.DASH_USER || '';
+const DASH_PASS = process.env.DASH_PASS || '';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Parse and validate HTTP Basic Auth header.
+ * @param {http.IncomingMessage} req
+ * @returns {boolean}
+ */
+function isAuthorised(req) {
+  if (!DASH_USER || !DASH_PASS) return false;
+  const header = req.headers['authorization'] || '';
+  if (!header.startsWith('Basic ')) return false;
+  const [user, pass] = Buffer.from(header.slice(6), 'base64').toString().split(':');
+  return user === DASH_USER && pass === DASH_PASS;
+}
+
+/**
+ * Send a 401 Unauthorized response demanding Basic Auth.
+ * @param {http.ServerResponse} res
+ */
+function requireAuth(res) {
+  res.writeHead(401, {
+    'WWW-Authenticate': 'Basic realm="Runner Dashboard"',
+    'Content-Type': 'text/plain',
+  });
+  res.end('Unauthorized');
+}
+
+/**
+ * Fetch the GitHub org runners list server-side.
+ * Reads token from process.env at call time (never cached at module level).
+ * @returns {Promise<{status:number, body:string}>}
+ */
+function fetchRunners() {
+  return new Promise((resolve) => {
+    const token = process.env.GITHUB_RUNNERS_READ_TOKEN;
+    if (!token) {
+      resolve({ status: 200, body: JSON.stringify({ error: 'token_missing' }) });
+      return;
+    }
+
+    const options = {
+      hostname: 'api.github.com',
+      path: '/orgs/peptide-repo/actions/runners',
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Accept': 'application/vnd.github+json',
+        'User-Agent': 'runner-dashboard/1.0',
+        'X-GitHub-Api-Version': '2022-11-28',
+      },
+    };
+
+    const req = https.request(options, (ghRes) => {
+      let raw = '';
+      ghRes.on('data', (chunk) => { raw += chunk; });
+      ghRes.on('end', () => {
+        if (ghRes.statusCode !== 200) {
+          const body = JSON.stringify({ error: 'api_error', status: ghRes.statusCode });
+          resolve({ status: 200, body });
+          return;
+        }
+        try {
+          const parsed = JSON.parse(raw);
+          resolve({ status: 200, body: JSON.stringify(parsed.runners || parsed) });
+        } catch {
+          resolve({ status: 200, body: JSON.stringify({ error: 'api_error', status: ghRes.statusCode }) });
+        }
+      });
+    });
+
+    req.on('error', () => {
+      resolve({ status: 200, body: JSON.stringify({ error: 'api_error', status: 0 }) });
+    });
+
+    req.setTimeout(10000, () => {
+      req.destroy();
+      resolve({ status: 200, body: JSON.stringify({ error: 'api_error', status: 0 }) });
+    });
+
+    req.end();
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Request handler
+// ---------------------------------------------------------------------------
+
+/**
+ * Main HTTP request handler.
+ * @param {http.IncomingMessage} req
+ * @param {http.ServerResponse} res
+ */
+async function handler(req, res) {
+  const url = (req.url || '/').split('?')[0];
+
+  // Health check — no auth, no GitHub call
+  if (url === '/healthz') {
+    res.writeHead(200, { 'Content-Type': 'text/plain' });
+    res.end('ok');
+    return;
+  }
+
+  // All other routes require Basic Auth
+  if (!isAuthorised(req)) {
+    requireAuth(res);
+    return;
+  }
+
+  if (url === '/api/runners') {
+    const { status, body } = await fetchRunners();
+    res.writeHead(status, {
+      'Content-Type': 'application/json',
+      'Cache-Control': 'no-store',
+    });
+    res.end(body);
+    return;
+  }
+
+  if (url === '/') {
+    const htmlPath = path.join(__dirname, 'index.html');
+    try {
+      const html = fs.readFileSync(htmlPath, 'utf8');
+      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+      res.end(html);
+    } catch {
+      res.writeHead(500, { 'Content-Type': 'text/plain' });
+      res.end('index.html not found');
+    }
+    return;
+  }
+
+  res.writeHead(404, { 'Content-Type': 'text/plain' });
+  res.end('Not found');
+}
+
+// ---------------------------------------------------------------------------
+// Start server
+// ---------------------------------------------------------------------------
+
+const server = http.createServer((req, res) => {
+  handler(req, res).catch((err) => {
+    console.error('Unhandled error:', err);
+    if (!res.headersSent) {
+      res.writeHead(500, { 'Content-Type': 'text/plain' });
+      res.end('Internal server error');
+    }
+  });
+});
+
+server.listen(PORT, '0.0.0.0', () => {
+  console.log(`Runner dashboard listening on port ${PORT}`);
+});