Run receipt

// QuikRun · Run Receipt — the landing "RUN RECEIPT" card, rendered live by a snippet.
// React (preact) SSR + Tailwind (Play CDN) + a scannable QR, mirroring the dashboard's
// run-receipt.tsx (ReceiptShell, torn paper edge, line items, TOTAL, status, live URL).
//
// Query params customize the slip, e.g.
//   /r/receipt?snippet=world-cup&status=200%20OK&duration=48ms&region=iad1&runtime=node:20
import htm from "htm";
import { h } from "preact";
import { render } from "preact-render-to-string";
import QRCode from "qrcode";
 
const html = htm.bind(h);
const pad = (n) => String(n).padStart(2, "0");
const hash = (s) => { let x = 0; for (let i = 0; i < s.length; i++) { x = (x << 5) - x + s.charCodeAt(i); x |= 0; } return Math.abs(x); };
 
export default async function handler(req) {
  // The sandbox hands the snippet an already-parsed request: { method, path, query, headers, body }.
  const q = (req && req.query) || {};
  const now = new Date();
 
  const run = {
    snippet: q.snippet || "world-cup",
    trigger: (q.trigger || "HTTP").toUpperCase(),
    region: q.region || "iad1",
    runtime: q.runtime || "node:20",
    size: q.size || "1.2 KB",
    duration: q.duration || "48ms",
    status: q.status || "200 OK",
  };
  run.id = q.id || "R-" + hash((req && req.path ? req.path : "receipt") + run.snippet).toString(16).toUpperCase().slice(0, 6).padStart(6, "0");
  run.ok = /^2\d\d/.test(run.status);
 
  const date = `${pad(now.getUTCMonth() + 1)}.${pad(now.getUTCDate())}.${now.getUTCFullYear()}`;
  const time = `${pad(now.getUTCHours())}:${pad(now.getUTCMinutes())} UTC`;
  const liveUrl = `https://quik.run/r/${run.snippet}`;
  const ogImage = "https://api.quik.run/og/shot/run-receipt";
  const ogDesc = "A live run receipt with a scannable QR, rendered by a QuikRun snippet.";
 
  // QR points at the live snippet — phone cameras read it natively (same as the runs page).
  let qr = await QRCode.toString(liveUrl, {
    type: "svg",
    margin: 0,
    errorCorrectionLevel: "M",
    color: { dark: "#0B0B0C", light: "#ffffff" },
  });
  qr = qr.replace(/\swidth="[^"]*"/, ' width="100%"').replace(/\sheight="[^"]*"/, ' height="100%"');
 
  const lines = [
    ["SNIPPET", run.snippet],
    ["TRIGGER", run.trigger],
    ["REGION", run.region],
    ["RUNTIME", run.runtime],
    ["SIZE", run.size],
  ];
 
  const Rule = () => html`<div class="my-3 border-t border-dashed border-border"></div>`;
 
  const TornEdge = () => {
    const n = 16, w = 100 / n, base = 2.4;
    const tips = [9.6, 8.8, 10.2, 9.2, 9.8, 10.4, 8.9, 9.9, 9.3, 10.1, 9.6, 9, 10.3, 9.1, 9.7, 9.4];
    let teeth = "";
    for (let i = 0; i < n; i++) teeth += `L${(100 - (i + 0.5) * w).toFixed(2)} ${tips[i]} L${(100 - (i + 1) * w).toFixed(2)} ${base} `;
    return html`<svg class="-mt-px block w-full" viewBox="0 0 100 11" preserveAspectRatio="none" style="height:10px" aria-hidden="true">
      <path d=${`M0 0 H100 V${base} ${teeth}Z`} fill="#f6f6f3"></path>
      <path d=${`M100 0 L100 ${base} ${teeth}L0 0`} fill="none" stroke="#e8e8e2" stroke-width="1" stroke-linejoin="round" vector-effect="non-scaling-stroke"></path>
    </svg>`;
  };
 
  const Receipt = () => html`
    <div class="w-[320px] select-none [filter:drop-shadow(0_1px_2px_rgba(11,11,12,0.09))_drop-shadow(0_22px_45px_rgba(11,11,12,0.14))]">
      <div class="relative rounded-t-[10px] border-x border-t border-border px-5 pt-5 pb-3"
           style="background-image:linear-gradient(180deg,#fdfdfc 0%,#f6f6f3 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.7)">
        <div class="flex items-start justify-between gap-3">
          <div class="min-w-0">
            <div class="font-mono text-[12px] font-semibold tracking-[0.08em] text-foreground">QUIKRUN · RUN RECEIPT</div>
            <div class="mt-1 font-mono text-[10px] tracking-[0.02em] text-muted-foreground">RUN ${run.id} · ${date} · ${time}</div>
          </div>
          <div class="h-[54px] w-[54px] shrink-0 overflow-hidden rounded-[3px] bg-white" dangerouslySetInnerHTML=${{ __html: qr }}></div>
        </div>
 
        <${Rule} />
 
        <div class="flex flex-col gap-1.5">
          ${lines.map(([label, value]) => html`
            <div class="flex items-baseline justify-between font-mono text-[11px]">
              <span class="text-muted-foreground">${label}</span>
              <span class="max-w-[62%] truncate tabular-nums text-foreground">${value}</span>
            </div>`)}
        </div>
 
        <${Rule} />
 
        <div class="flex items-baseline justify-between font-mono text-[12px] font-semibold text-foreground">
          <span>TOTAL</span>
          <span class="tabular-nums">${run.duration}</span>
        </div>
 
        <div class="mt-4 flex items-center gap-2 font-mono text-[11px]">
          <span class=${`h-1.5 w-1.5 rounded-full ${run.ok ? "bg-brand" : "bg-destructive"}`}></span>
          <span class="text-muted-foreground">LIVE AT</span>
          <span class=${`ml-auto inline-flex items-center rounded-[5px] px-1.5 py-0.5 text-[10px] font-semibold ${run.ok ? "bg-pass/10 text-pass" : "bg-destructive/10 text-destructive"}`}>${run.status}</span>
        </div>
        <div class="mt-1 break-all font-mono text-[12px] text-foreground">quik.run/r/${run.snippet}</div>
      </div>
      <${TornEdge} />
    </div>`;
 
  const config = `tailwind.config={theme:{extend:{colors:{foreground:'#0B0B0C','muted-foreground':'#87867e',border:'#e8e8e2',brand:'#E6FF55',pass:'#4a9d52',destructive:'#d64b4b'},fontFamily:{mono:['ui-monospace','SFMono-Regular','Menlo','monospace']}}}}`;
 
  const page = html`
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>QuikRun · Run Receipt</title>
        <meta name="description" content=${ogDesc} />
        <meta property="og:type" content="website" />
        <meta property="og:site_name" content="QuikRun" />
        <meta property="og:title" content="QuikRun · Run Receipt" />
        <meta property="og:description" content=${ogDesc} />
        <meta property="og:url" content=${liveUrl} />
        <meta property="og:image" content=${ogImage} />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="QuikRun · Run Receipt" />
        <meta name="twitter:description" content=${ogDesc} />
        <meta name="twitter:image" content=${ogImage} />
        <script src="https://cdn.tailwindcss.com"></script>
        <script dangerouslySetInnerHTML=${{ __html: config }}></script>
      </head>
      <body class="flex min-h-screen items-center justify-center p-6"
            style="background-image:radial-gradient(60% 60% at 50% 28%, #17171a 0%, #0B0B0C 72%)">
        <${Receipt} />
      </body>
    </html>`;
 
  return new Response("<!doctype html>" + render(page), {
    status: 200,
    headers: { "content-type": "text/html; charset=utf-8" },
  });
}