status

/**
 * QuikRun · status run
 * ---------------------
 * Deployed as snippet slug `status` → live at https://quik.run/r/status
 * (turned the old 404 into a real health page).
 *
 * Dogfood: a QuikRun run whose job is to report whether QuikRun is up.
 *   - Browser (text/html)                  → a branded status board, auto-refreshes.
 *   - Monitor (?format=json / Accept json) → machine-readable JSON.
 *   - HTTP 503 only when EVERYTHING is down, so uptime checks can alert; 200 otherwise.
 *
 * Zero dependencies. Returns a real `Response` so we control status + content-type
 * (a returned plain object is JSON-serialized as the body, not an HTTP envelope).
 */
 
type Target = { name: string; url: string; note: string };
 
// Independently-fetchable public surfaces. The run edge itself is proven healthy
// by the mere fact this code is executing, so it's derived below rather than
// fetched (and /r/__health is shadowed by the /r/:slug matcher in prod anyway).
const TARGETS: Target[] = [
  { name: "Web app", url: "https://quik.run/", note: "quik.run" },
  { name: "API", url: "https://api.quik.run/", note: "api.quik.run" },
];
 
const TIMEOUT_MS = 5000;
 
type Check = {
  name: string;
  note: string;
  url: string | null;
  up: boolean;
  status: number | null;
  ms: number;
  error?: string;
};
 
/** AbortSignal.timeout if the sandbox has it; otherwise no signal (fetch still runs). */
function timeoutSignal(ms: number): AbortSignal | undefined {
  try {
    const s = (AbortSignal as any)?.timeout;
    return typeof s === "function" ? s.call(AbortSignal, ms) : undefined;
  } catch {
    return undefined;
  }
}
 
async function ping(t: Target): Promise<Check> {
  const started = Date.now();
  try {
    const res = await fetch(t.url, { method: "GET", signal: timeoutSignal(TIMEOUT_MS) as any });
    return { name: t.name, note: t.note, url: t.url, up: res.status < 400, status: res.status, ms: Date.now() - started };
  } catch (err) {
    const message = (err as { message?: string })?.message ?? "unreachable";
    return { name: t.name, note: t.note, url: t.url, up: false, status: null, ms: Date.now() - started, error: message };
  }
}
 
type Overall = "operational" | "degraded" | "down";
 
function overallOf(checks: Check[]): Overall {
  const up = checks.filter((c) => c.up).length;
  if (up === checks.length) return "operational";
  if (up === 0) return "down";
  return "degraded";
}
 
const HEADLINE: Record<Overall, string> = {
  operational: "All systems operational",
  degraded: "Partial outage",
  down: "Major outage",
};
 
// ---- request accessors (tolerate Request-like OR plain {headers,query} shapes) ----
 
function header(req: any, name: string): string {
  const h = req?.headers;
  if (!h) return "";
  if (typeof h.get === "function") return h.get(name) ?? "";
  return h[name] ?? h[name.toLowerCase()] ?? "";
}
 
function query(req: any, key: string): string {
  const q = req?.query;
  if (q) {
    if (typeof q.get === "function") return q.get(key) ?? "";
    if (typeof q[key] === "string") return q[key];
  }
  try {
    return new URL(req.url).searchParams.get(key) ?? "";
  } catch {
    return "";
  }
}
 
function wantsJson(req: any): boolean {
  return query(req, "format").toLowerCase() === "json" || header(req, "accept").includes("application/json");
}
 
// ---- rendering ----
 
const esc = (s: string): string =>
  s.replace(/[&<>"]/g, (c) => (c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : "&quot;"));
 
function renderHtml(overall: Overall, checks: Check[], checkedAt: string): string {
  const dot = (up: boolean) => (up ? "#16a34a" : "#ef4444");
  const rows = checks
    .map((c) => {
      const right = c.up
        ? `${c.status ?? "OK"}${c.ms ? ` · ${c.ms}ms` : ""}`
        : `DOWN${c.status ? ` · ${c.status}` : ""}${c.error ? ` · ${esc(c.error)}` : ""}`;
      return `
      <div class="row">
        <span class="dot" style="background:${dot(c.up)}"></span>
        <span class="svc">${esc(c.name)}</span>
        <span class="note">${esc(c.note)}</span>
        <span class="meta ${c.up ? "ok" : "bad"}">${right}</span>
      </div>`;
    })
    .join("");
 
  const accent = overall === "operational" ? "#16a34a" : overall === "degraded" ? "#f59e0b" : "#ef4444";
 
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="refresh" content="30" />
<title>QuikRun · Status — ${esc(HEADLINE[overall])}</title>
<style>
  :root { color-scheme: light; }
  * { box-sizing: border-box; }
  body {
    margin: 0; min-height: 100vh; background: #faf6f2; color: #0a0a0a;
    font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    display: flex; align-items: center; justify-content: center; padding: 32px;
  }
  .card { width: 100%; max-width: 640px; }
  .eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #ef4444; margin: 0 0 14px; }
  .eyebrow b { color: #0a0a0a; }
  h1 { font-size: 34px; line-height: 1.1; margin: 0 0 6px; letter-spacing: -0.01em;
       font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
  h1 mark { background: ${overall === "operational" ? "#d9f24f" : "transparent"}; color: inherit; padding: 0 4px; }
  .pill { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 26px;
          font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: ${accent}; }
  .pill .dot { width: 9px; height: 9px; border-radius: 999px; background: ${accent}; }
  .board { border: 1px solid #e7e0d8; border-radius: 12px; background: #fff; overflow: hidden; }
  .row { display: grid; grid-template-columns: 16px 1fr auto auto; align-items: center; gap: 12px;
         padding: 15px 18px; border-top: 1px solid #f0eae3; }
  .row:first-child { border-top: 0; }
  .dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
  .svc { font-weight: 600; }
  .note { color: #9a9188; font-size: 12px; }
  .meta { font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; }
  .meta.ok { color: #16a34a; }
  .meta.bad { color: #ef4444; }
  footer { margin-top: 18px; font-size: 12px; color: #9a9188; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  footer a { color: inherit; }
</style>
</head>
<body>
  <div class="card">
    <p class="eyebrow"><b>QuikRun</b> · System status</p>
    <h1>${overall === "operational" ? "All systems <mark>operational</mark>" : esc(HEADLINE[overall])}</h1>
    <div class="pill"><span class="dot"></span>${esc(overall)}</div>
    <div class="board">${rows}</div>
    <footer>
      <span>Checked ${esc(checkedAt)}</span>
      <span>Live run · <a href="/r/status">quik.run/r/status</a></span>
    </footer>
  </div>
</body>
</html>`;
}
 
export default async function handler(req: any) {
  const fetched = await Promise.all(TARGETS.map(ping));
  // The run edge is healthy by construction: if it weren't, this code wouldn't run.
  const edge: Check = { name: "Run edge", note: "serving this page", url: null, up: true, status: 200, ms: 0 };
  const checks: Check[] = [fetched[0]!, edge, fetched[1]!];
 
  const overall = overallOf(checks);
  const checkedAt = new Date().toISOString();
  const httpStatus = overall === "down" ? 503 : 200;
 
  const json = wantsJson(req);
  const body = json
    ? JSON.stringify(
        {
          status: overall,
          checkedAt,
          services: checks.map((c) => ({
            name: c.name,
            url: c.url,
            up: c.up,
            httpStatus: c.status,
            latencyMs: c.ms,
            ...(c.error ? { error: c.error } : {}),
          })),
        },
        null,
        2,
      )
    : renderHtml(overall, checks, checkedAt);
 
  const headers = {
    "content-type": json ? "application/json; charset=utf-8" : "text/html; charset=utf-8",
    "cache-control": "no-store",
  };
 
  // Return a real Response so status + content-type are honored. Fall back to a
  // plain envelope only if the sandbox lacks Response.
  if (typeof Response === "function") {
    return new Response(body, { status: httpStatus, headers });
  }
  return { status: httpStatus, headers, body };
}