@lchase/kiln 0.10.0 → 0.12.0

package/dist/serve-page.js

@@ -1,18 +1,9 @@
 import { readFileSync } from "node:fs";
-import { formatSpend } from "./rails.js";
 import { join } from "node:path";
-import { scheduledRetry } from "./attention.js";
-import { readBoardFiles, stageOf, stagesFor } from "./board.js";
-import { feedbackRoundLabel } from "./feedback.js";
-import { INVESTIGATION_WORKFLOW } from "./findings.js";
+import { buildBoard, } from "./board-view.js";
 import { packageRoot } from "./paths.js";
+import { formatSpend } from "./rails.js";
 import { listWorkflowNames } from "./workflow.js";
-const REVIEWERS = [
-    ["security", "sec"],
-    ["ux", "ux"],
-    ["ui", "ui"],
-    ["code", "code"],
-];
 const LIVE_SCRIPT = readFileSync(join(packageRoot(), "assets", "serve.js"), "utf8");
 function kilnVersion() {
     try {
@@ -25,62 +16,47 @@ function kilnVersion() {
 }
 const VERSION = kilnVersion();
 export function renderConsole(css, attention, page) {
-    const intake = page ?? { csrf: "", repos: [], workflows: listWorkflowNames() };
-    const items = [...attention.needsYou, ...attention.inFlight, ...attention.doneRecently];
-    const stages = stagesFor(items.map((item) => item.job));
-    const grouped = new Map();
-    for (const item of items) {
-        const stage = stageOf(item.job);
-        const list = grouped.get(stage) ?? [];
-        list.push(item);
-        grouped.set(stage, list);
-    }
-    const tracks = stages
-        .map((stage) => ((grouped.get(stage.id)?.length ?? 0) === 0 ? "40px" : "minmax(0, 1fr)"))
-        .join(" ");
-    const columns = stages.map((stage) => column(stage, grouped.get(stage.id) ?? [])).join("\n");
-    const repos = [...new Set(items.map((item) => item.job.repo).filter((repo) => repo.length > 0))].sort();
-    const chips = [
-        chip("", "all", items.length, true),
-        ...repos.map((repo) => chip(repo, repo, items.filter((item) => item.job.repo === repo).length, false)),
-    ].join("");
+    const jobs = [...attention.needsYou, ...attention.inFlight, ...attention.doneRecently].map((item) => item.job);
+    const board = buildBoard(jobs, []);
+    const section = page?.section ?? "inbox";
+    return renderApp({ css, section, board, attention, ...(page ? { page, ...(page.repo ? { repo: page.repo } : {}) } : {}) });
+}
+export function renderApp(model) {
+    const page = model.page ?? { csrf: "", repos: [], workflows: listWorkflowNames() };
+    const paused = page.paused === true;
     const version = VERSION ? `<span class="ver">v${escapeHtml(VERSION)}</span>` : "";
-    const paused = intake.paused === true;
-    const spend = intake.spend ? `<span class="spend" id="spend">${escapeHtml(formatSpend(intake.spend))}</span>` : "";
-    const body = `<header>
-<div class="brand"><span class="logo" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12V6l5-3 5 3v6l-5 3-5-3z"/><path d="M3 6l5 3 5-3M8 9v6"/></svg></span><h1>Kiln</h1>${version}</div>
-${spend}
-<form method="post" action="${paused ? "/api/resume" : "/api/pause"}" class="pause" id="pause-form"><input type="hidden" name="csrf" value="${escapeHtml(intake.csrf)}"><button type="submit" id="pause-toggle" aria-pressed="${paused ? "true" : "false"}">${paused ? "Resume" : "Pause"}</button></form>
-<div class="status" id="status">${items.length === 1 ? "1 job" : `${items.length} jobs`}</div>
-</header>
-<p class="meta config-error" id="config-error" role="status"${intake.configError ? "" : " hidden"}>${escapeHtml(intake.configError ?? "")}</p>
-<nav class="repos" aria-label="Filter by repo">${chips}</nav>
-<main class="board" id="board" style="--cols: ${tracks}">
-${columns}
-</main>
-<nav class="toolbar" aria-label="Kiln commands">
-<button class="tool" type="button" id="add-job" data-tip="Add job" aria-label="Add job"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
-<button class="tool" type="button" data-act="approve" data-tip="Approve" aria-label="Approve"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></button>
-<button class="tool" type="button" data-act="retry" data-tip="Retry" aria-label="Retry"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5"/></svg></button>
-<button class="tool" type="button" data-act="pr" data-tip="Open pull request" aria-label="Open pull request"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M6 8.5v7M18 15.5V10a3 3 0 0 0-3-3h-3"/></svg></button>
-<button class="tool" type="button" id="notify" data-tip="Notify me" aria-label="Notify me"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 7 3 7H3s3 0 3-7"/><path d="M10 19a2 2 0 0 0 4 0"/></svg></button>
-<span class="sep" aria-hidden="true"></span>
-<button class="tool" type="button" id="compact" aria-pressed="true" data-tip="expand empty columns" aria-label="expand empty columns"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12h7m0 0-3-3m3 3-3 3M21 12h-7m0 0 3-3m-3 3 3 3M12 4v16"/></svg></button>
-<span class="sep" aria-hidden="true"></span>
-<button class="tool" type="button" id="open-settings" data-tip="Settings" aria-label="Settings"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 3v2.2M12 18.8V21M3 12h2.2M18.8 12H21M5.6 5.6l1.6 1.6M16.8 16.8l1.6 1.6M18.4 5.6l-1.6 1.6M7.2 16.8l-1.6 1.6"/></svg></button>
-</nav>
+    const spend = page.spend ? `<span class="spend" id="spend">${escapeHtml(formatSpend(page.spend))}</span>` : `<span class="spend" id="spend"></span>`;
+    const capNote = page.spend?.blocked ? `<span class="cap" id="cap-note">cap hit</span>` : `<span class="cap" id="cap-note" hidden>cap hit</span>`;
+    const body = `<div class="shell">
+<aside class="nav" aria-label="Kiln">
+<div class="brand"><span class="logo" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12V6l5-3 5 3v6l-5 3-5-3z"/><path d="M3 6l5 3 5-3M8 9v6"/></svg></span><div><h1>Kiln</h1>${version}</div></div>
+<div class="runstate" id="runstate">
+<span class="live-dot${paused ? " paused" : ""}" id="run-dot" aria-hidden="true"></span>
+<span id="run-label">${paused ? "Paused" : "Running"}</span>
+<form method="post" action="${paused ? "/api/resume" : "/api/pause"}" class="pause" id="pause-form"><input type="hidden" name="csrf" value="${escapeHtml(page.csrf)}"><button type="submit" id="pause-toggle" aria-pressed="${paused ? "true" : "false"}">${paused ? "Resume" : "Pause"}</button></form>
+</div>
+${spend}${capNote}
+${navHtml(model)}
+<button class="add" type="button" id="add-job">Add job</button>
+<button class="tool-link" type="button" id="notify">Notify me</button>
+</aside>
+<div class="workspace${model.section === "job" ? " with-rail" : ""}">
+${mainHtml(model, page)}
+</div>
+</div>
 <div class="scrim" data-close></div>
-<aside class="drawer" id="drawer" role="dialog" aria-modal="true" aria-label="Job">
-${intakeSheet(intake, items)}
-${settingsSheet()}
-${items.map((item) => sheet(item, intake.csrf)).join("\n")}
+<aside class="drawer" id="drawer" role="dialog" aria-modal="true" aria-label="Add job">
+${intakeSheet(page, model.attention)}
 </aside>`;
+    const job = model.detail?.job;
     return document({
-        css,
-        title: `(${attention.needsYouCount}) Kiln`,
-        needsYou: attention.needsYouCount,
-        revision: attention.revision,
-        csrf: intake.csrf,
+        css: model.css,
+        title: `(${model.board.inboxCount}) Kiln`,
+        needsYou: model.attention.needsYouCount,
+        revision: model.attention.revision,
+        csrf: page.csrf,
+        section: model.section,
+        ...(job ? { jobId: job.jobId, latest: job.latestEventAt } : {}),
         live: true,
         body,
     });
@@ -91,8 +67,9 @@ export function renderTextPage(css, title, text) {
         title,
         needsYou: 0,
         revision: "",
+        section: "job",
         live: false,
-        body: `<a class="back" href="/">Console</a>
+        body: `<a class="back" href="/">Inbox</a>
 <div class="page"><h1>${escapeHtml(title)}</h1>
 <pre class="text">${escapeHtml(text)}</pre></div>`,
     });
@@ -103,53 +80,378 @@ export function renderMessagePage(css, title, message) {
         title,
         needsYou: 0,
         revision: "",
+        section: "job",
         live: false,
-        body: `<a class="back" href="/">Console</a>
+        body: `<a class="back" href="/">Inbox</a>
 <div class="page"><h1>${escapeHtml(title)}</h1>
 <p class="empty">${escapeHtml(message)}</p></div>`,
     });
 }
-function column(stage, items) {
-    const slim = items.length === 0;
-    const tone = stage.tone ? ` ${stage.tone}` : "";
-    const cards = items.map((item) => card(item, stage.id)).join("\n");
-    const count = items.length ? String(items.length) : "";
-    return `<section class="col${slim ? " slim" : ""}${tone}" id="col-${escapeHtml(stage.id)}" data-stage="${escapeHtml(stage.id)}" aria-label="${escapeHtml(stage.label)}, ${items.length}">
-<div class="slim-face"><span class="count">${items.length}</span><div class="v"><h2>${escapeHtml(stage.label)}</h2><span class="who">${escapeHtml(stage.who)}</span></div></div>
-<div class="full"><div class="col-head"><h2>${escapeHtml(stage.label)}</h2><span class="who">${escapeHtml(stage.who)}</span><span class="count">${escapeHtml(count)}</span></div>
-${cards || ""}<div class="empty"${items.length > 0 ? " hidden" : ""}>none</div></div>
-</section>`;
+function navHtml(model) {
+    const board = model.board;
+    const item = (href, id, label, section, badge) => {
+        const current = model.section === section ? ` aria-current="page"` : "";
+        const count = badge !== undefined && badge > 0 ? `<span class="badge">${badge}</span>` : "";
+        const extra = id === "open-settings" ? ` id="open-settings"` : "";
+        return `<a class="nav-link" href="${href}"${current}${extra}>${escapeHtml(label)}${count}</a>`;
+    };
+    const repos = board.repos
+        .map((group) => {
+        const current = model.section === "repos" && model.repo === group.repo ? ` aria-current="page"` : "";
+        return `<a class="nav-sub" href="/repos/${encodeURIComponent(group.repo)}"${current}>${escapeHtml(group.repo)}<span class="badge">${group.jobs.length}</span></a>`;
+    })
+        .join("");
+    return `<nav class="side" aria-label="Sections">
+${item("/inbox", "inbox", "Inbox", "inbox", board.inboxCount)}
+<p class="unseen" id="inbox-unseen" hidden></p>
+${item("/hand", "hand", "Needs a hand", "hand", board.handCount)}
+${item("/repos", "repos", "Repos", "repos")}
+${repos}
+${item("/history", "history", "History", "history", board.history.length)}
+${item("/stats", "stats", "Stats", "stats")}
+${item("/report", "report", "Today", "report")}
+${item("/triggers", "triggers", "Triggers", "triggers")}
+${item("/settings", "open-settings", "Settings", "settings")}
+</nav>`;
+}
+function mainHtml(model, page) {
+    const error = `<p class="meta config-error" id="config-error" role="status"${page.configError ? "" : " hidden"}>${escapeHtml(page.configError ?? "")}</p>`;
+    if (model.section === "settings") {
+        return `${error}<main class="main"><h2>Settings</h2><section id="settings" aria-label="Settings">${settingsForm()}</section></main>`;
+    }
+    if (model.section === "stats" && model.stats) {
+        return `${error}<main class="main">${statsHtml(model.stats)}</main>`;
+    }
+    if (model.section === "report" && model.report) {
+        return `${error}<main class="main">${reportHtml(model.report)}</main>`;
+    }
+    if (model.section === "job" && model.detail) {
+        return `${error}<main class="main detail">${detailHtml(model.detail, model.tab ?? "overview", page.csrf)}</main>`;
+    }
+    if (model.section === "triggers") {
+        return `${error}<main class="main">${triggersHtml(model.triggers ?? [])}</main>`;
+    }
+    return `${error}<main class="main">${listHtml(model, page.csrf)}</main>`;
+}
+function triggersHtml(rows) {
+    const body = rows.length === 0
+        ? `<p class="empty">No triggers.</p>`
+        : rows.map((row) => triggerCard(row)).join("\n");
+    return `<header class="list-head"><h2>Triggers</h2><p class="meta">The clock, Jira, and pull request activity can start work. Kiln does not post, approve, or merge.</p><p class="form-error" id="trigger-error" role="alert" hidden></p></header>${body}`;
+}
+function triggerCard(row) {
+    const on = row.enabled;
+    const bits = [row.kind, row.schedule, on ? "enabled" : "disabled"];
+    const next = row.nextFire ? `<p class="meta">next <time datetime="${escapeHtml(row.nextFire)}" data-time>${escapeHtml(row.nextFire)}</time></p>` : "";
+    const last = row.lastFire ? `<p class="meta">last fire <time datetime="${escapeHtml(row.lastFire)}" data-time>${escapeHtml(row.lastFire)}</time></p>` : `<p class="meta">last fire none</p>`;
+    const error = row.lastError
+        ? `<p class="err">last error${row.lastErrorAt ? ` <time datetime="${escapeHtml(row.lastErrorAt)}" data-time>${escapeHtml(row.lastErrorAt)}</time>` : ""}: ${escapeHtml(row.lastError)}</p>`
+        : "";
+    const recent = row.recent.length === 0
+        ? `<p class="empty">No routed events yet.</p>`
+        : `<ul class="recent">${row.recent
+            .map((item) => `<li><time datetime="${escapeHtml(item.ts)}" data-time>${escapeHtml(item.ts)}</time> <span class="ev">${escapeHtml(item.event)}</span> ${escapeHtml(item.summary)}</li>`)
+            .join("")}</ul>`;
+    return `<article class="trigger" id="trigger-${escapeHtml(row.id)}">
+<h3>${escapeHtml(row.id)}</h3>
+<p class="meta">${escapeHtml(bits.join(" · "))}</p>
+${next}${last}${error}
+<button type="button" data-trigger-toggle="${escapeHtml(row.id)}" data-enabled="${on ? "true" : "false"}">${on ? "Disable" : "Enable"}</button>
+${recent}
+</article>`;
+}
+function listHtml(model, csrf) {
+    const board = model.board;
+    if (model.section === "inbox") {
+        return `<header class="list-head"><h2>Inbox</h2><p class="meta">Approve, reject, or revise. Kiln does not do this on its own.</p></header>${jobList(board.inbox, "inbox", "Nothing is waiting on a gate.", csrf)}`;
+    }
+    if (model.section === "hand") {
+        return `<header class="list-head"><h2>Needs a hand</h2><p class="meta">A breaker tripped, a cap was hit, or a run failed with no retry left.</p></header>${jobList(board.hand, "hand", "Nothing needs a person.", csrf)}`;
+    }
+    if (model.section === "history") {
+        return `<header class="list-head"><h2>History</h2></header>${jobList(board.history, "history", "No finished jobs.", csrf)}`;
+    }
+    const groups = model.repo ? board.repos.filter((group) => group.repo === model.repo) : board.repos;
+    if (groups.length === 0)
+        return `<header class="list-head"><h2>Repos</h2></header><p class="empty">No jobs.</p>`;
+    return `<header class="list-head"><h2>${model.repo ? escapeHtml(model.repo) : "Repos"}</h2></header>${groups
+        .map((group) => `<section class="repo-block"><h3>${escapeHtml(group.repo)}</h3>${jobList(group.jobs, "repos", "No jobs.", csrf)}</section>`)
+        .join("")}`;
+}
+function jobList(jobs, section, empty, csrf) {
+    if (jobs.length === 0)
+        return `<p class="empty">${escapeHtml(empty)}</p>`;
+    return `<div class="jobs">${jobs.map((job) => jobRow(job, section, csrf)).join("\n")}</div>`;
 }
-function card(item, stage) {
-    const job = item.job;
-    const waiting = scheduledRetry(job);
-    const classes = ["card"];
-    if (waiting)
+function jobRow(job, section, csrf) {
+    const id = encodeURIComponent(job.jobId);
+    const classes = ["job"];
+    if (job.scheduledRetry)
         classes.push("retrying");
-    else if (stage === "needs-human")
+    if (section === "inbox" || (section === "hand" && !job.scheduledRetry))
         classes.push("human");
-    if (stage === "done" || stage === "merged")
-        classes.push("merged");
-    if (stage === "queued")
-        classes.push("queued");
-    const deps = job.dependsOn.map((dep) => dep.jobId).join(" ");
-    const pulse = job.state === "running" ? '<span class="pulse" aria-label="running"></span>' : "";
-    const flag = stage === "needs-human" && !waiting ? '<span class="flag">your call</span>' : "";
-    const branch = branchOf(job);
-    return `<div role="button" tabindex="0" class="${classes.join(" ")}" id="job-${escapeHtml(job.jobId)}" data-job="${escapeHtml(job.jobId)}" data-deps="${escapeHtml(deps)}" data-repo="${escapeHtml(job.repo)}" data-stage="${escapeHtml(stage)}">
-<div class="card-top">${pulse}<span class="num">${escapeHtml(job.jobId)}</span>${flag}</div>
-<div class="branch repo">${escapeHtml(repoLabel(job))}</div>
-<p class="title">${escapeHtml(job.title || job.jobId)}</p>
-${branch ? `<div class="branch">${escapeHtml(branch)}</div>` : ""}
-${sandboxHtml(job)}
-${prLink(job)}
-${roundsHtml(job, stage)}
-${attemptHtml(job, stage)}
-${waiting ? "" : noteHtml(item)}
-${dependsHtml(job)}
-</div>`;
-}
-function intakeSheet(intake, items) {
+    const flag = classes.includes("human") ? `<span class="flag">your call</span>` : "";
+    const repo = section === "repos" ? "" : `<span class="meta">${escapeHtml(job.repo)}</span>`;
+    const sandbox = job.sandboxed ? `<span class="meta">sandbox · docker</span>` : "";
+    const pr = section === "repos" && job.state === "in-review" ? `<span class="meta">PR review</span>` : "";
+    const retrying = job.scheduledRetry && job.nextRetryAt
+        ? `<div class="meta">retrying <time datetime="${escapeHtml(job.nextRetryAt)}" data-time="clock">${escapeHtml(job.nextRetryAt)}</time>${job.attemptLine ? ` · ${escapeHtml(job.attemptLine)}` : ""}</div>`
+        : "";
+    const attempt = !retrying && job.attemptLine && (section === "hand" || section === "inbox") ? `<div class="meta">${escapeHtml(job.attemptLine)}</div>` : "";
+    const history = job.historyLine ? `<div class="meta">${escapeHtml(job.historyLine)}</div>` : "";
+    const unsafe = job.prUrl && !safeUrl(job.prUrl) ? `<div class="branch">${escapeHtml(job.prUrl)}</div>` : "";
+    const deps = dependsHtml(job);
+    const evidence = section === "inbox" ? evidenceHtml(job) : "";
+    const feedback = feedbackHtml(job);
+    const tail = section !== "inbox" && job.logTail ? `<div class="note">${escapeHtml(clipTail(job.logTail))}</div>` : "";
+    const notes = job.notes.length ? `<div class="note">${job.notes.map((line) => escapeHtml(line)).join("<br>")}</div>` : "";
+    const unseen = `<p class="unseen" data-unseen-for="${escapeHtml(job.jobId)}" hidden></p>`;
+    const links = fileLinks(job);
+    return `<article class="${classes.join(" ")}" id="job-${escapeHtml(job.jobId)}" data-job="${escapeHtml(job.jobId)}" data-state="${escapeHtml(job.state)}" data-repo="${escapeHtml(job.repo)}" data-deps="${escapeHtml(job.dependsOn.map((dep) => dep.jobId).join(" "))}"${job.latestEventAt ? ` data-latest="${escapeHtml(job.latestEventAt)}"` : ""}>
+<div class="job-main">
+<div class="job-top">${flag}<a class="job-title" href="/jobs/${id}">${escapeHtml(job.title)}</a></div>
+<div class="job-meta"><span class="num">${escapeHtml(job.jobId)}</span>${repo}<span class="meta">${escapeHtml(job.state)}</span>${sandbox}${pr}</div>
+<p class="reason">${escapeHtml(job.reason)}</p>
+${history}${unsafe}${retrying}${attempt}${deps}${feedback}${evidence}${notes}${tail}${unseen}${links}
+</div>
+${actionsHtml(job, section, csrf)}
+</article>`;
+}
+function clipTail(text) {
+    const lines = text.split("\n").filter((line) => line.trim().length > 0);
+    const tail = lines.slice(-8);
+    return tail.join("\n");
+}
+function fileLinks(job) {
+    const id = encodeURIComponent(job.jobId);
+    const links = [];
+    if (job.spec)
+        links.push(`<a href="/jobs/${id}/spec">spec</a>`);
+    if (job.log)
+        links.push(`<a href="/jobs/${id}/log">log</a>`);
+    if (job.findings)
+        links.push(`<a href="/jobs/${id}/findings">Findings</a>`);
+    if (links.length === 0)
+        return "";
+    return `<p class="links">${links.join(" ")}</p>`;
+}
+function evidenceHtml(job) {
+    if (job.evidence.length === 0)
+        return "";
+    const texts = job.evidence.map((text) => (text.length > 500 ? `${text.slice(0, 499)}…` : text));
+    return `<div class="evidence">${texts.map((text) => `<pre class="text">${escapeHtml(text)}</pre>`).join("")}</div>`;
+}
+function feedbackHtml(job) {
+    if (job.feedback.length === 0)
+        return "";
+    const rows = job.feedback
+        .map((line) => {
+        const href = line.url ? safeUrl(line.url) : undefined;
+        const body = href ? `<a href="${escapeHtml(href)}">${escapeHtml(line.label)}</a>` : escapeHtml(line.label);
+        return `<li>${body}</li>`;
+    })
+        .join("");
+    return `<ul class="feedback">${rows}</ul>`;
+}
+function dependsHtml(job) {
+    if (job.dependsOn.length === 0)
+        return "";
+    const links = job.dependsOn
+        .map((dep) => `<a href="/jobs/${encodeURIComponent(dep.jobId)}">${escapeHtml(dep.jobId)}</a>`)
+        .join(", ");
+    const detail = job.dependsOn
+        .map((dep) => dep.detail)
+        .filter((line) => Boolean(line))
+        .join("; ");
+    return `<p class="deps">depends on ${links}</p>${detail ? `<p class="meta">${escapeHtml(detail)}</p>` : ""}`;
+}
+function actionsHtml(job, section, csrf) {
+    const showGate = section === "inbox" || section === "job";
+    const showRetry = section === "hand" || section === "repos" || section === "job";
+    if (!showGate && !showRetry)
+        return "";
+    const id = encodeURIComponent(job.jobId);
+    const forms = [];
+    if (showGate && job.canApprove)
+        forms.push(postForm(`/api/jobs/${id}/approve`, "approve", "Approve", csrf));
+    if (showGate && job.canReject)
+        forms.push(postForm(`/api/jobs/${id}/reject`, "reject", "Reject", csrf));
+    if (showGate && job.canRevise) {
+        forms.push(`<form method="post" action="/api/jobs/${id}/revise" class="act revise"><input type="hidden" name="csrf" value="${escapeHtml(csrf)}"><input name="note" type="text" required maxlength="8000" placeholder="Note for the next round" autocomplete="off"><button type="submit">Revise</button></form>`);
+    }
+    if (showRetry && job.retry)
+        forms.push(postForm(`/api/jobs/${id}/retry`, "retry", "Retry", csrf));
+    if (forms.length === 0)
+        return "";
+    return `<div class="d-actions">${forms.join("")}</div>`;
+}
+function postForm(action, kind, label, csrf) {
+    return `<form method="post" action="${action}" class="act ${kind}"><input type="hidden" name="csrf" value="${escapeHtml(csrf)}"><button type="submit">${label}</button></form>`;
+}
+function detailHtml(detail, tab, _csrf) {
+    const job = detail.job;
+    const id = encodeURIComponent(job.jobId);
+    const tabs = ["overview", "changes", "timeline"]
+        .map((name) => {
+        const href = name === "overview" ? `/jobs/${id}` : `/jobs/${id}?tab=${name}`;
+        const current = name === tab ? ` aria-current="page"` : "";
+        const label = name[0]?.toUpperCase() + name.slice(1);
+        return `<a href="${href}"${current}>${label}</a>`;
+    })
+        .join("");
+    const panel = tab === "changes" ? changesHtml(detail) : tab === "timeline" ? timelineHtml(detail) : overviewHtml(detail);
+    return `<div class="detail-main">
+<a class="back" href="/inbox">Inbox</a>
+<header class="list-head"><h2>${escapeHtml(job.title)}</h2><p class="reason">${escapeHtml(job.reason)}</p><p class="unseen" data-unseen-for="${escapeHtml(job.jobId)}" hidden></p></header>
+<nav class="tabs" aria-label="Job">${tabs}</nav>
+${actionsHtml(job, "job", _csrf)}
+${panel}
+</div>
+${railHtml(detail)}`;
+}
+function overviewHtml(detail) {
+    const cards = detail.overview;
+    if (cards.length === 0)
+        return `<p class="empty">No phases in the event log yet.</p>`;
+    return `<ol class="phases">${cards.map((card) => phaseHtml(card)).join("")}</ol>`;
+}
+function phaseHtml(card) {
+    const bits = [];
+    if (card.verdict)
+        bits.push(`<p class="verdict">${escapeHtml(card.verdict)}</p>`);
+    if (card.detail)
+        bits.push(`<pre class="text">${escapeHtml(card.detail)}</pre>`);
+    if (card.testCommand || card.exitCode !== undefined) {
+        const exit = card.exitCode === undefined ? "" : ` · exit ${card.exitCode}`;
+        bits.push(`<p class="meta">${escapeHtml(`${card.testCommand ?? "test"}${exit}`)}</p>`);
+    }
+    if (card.failureClass || card.fingerprint) {
+        bits.push(`<p class="meta">${escapeHtml([card.failureClass, card.fingerprint].filter(Boolean).join(" · "))}</p>`);
+    }
+    if (card.note)
+        bits.push(`<blockquote class="note">${escapeHtml(card.note)}</blockquote>`);
+    const iteration = card.iteration !== undefined ? ` <span class="meta">#${card.iteration}</span>` : "";
+    return `<li class="phase ${escapeHtml(card.outcome)}"><header><span class="step">${escapeHtml(card.label)}</span>${iteration}<span class="outcome">${escapeHtml(card.outcome)}</span><time datetime="${escapeHtml(card.ts)}">${escapeHtml(card.ts)}</time></header>${bits.join("")}</li>`;
+}
+function changesHtml(detail) {
+    const changes = detail.changes;
+    const branch = changes.branch ? `<p><span class="k">Branch</span> <span class="mono">${escapeHtml(changes.branch)}</span></p>` : `<p class="empty">No branch yet.</p>`;
+    const base = changes.base ? `<p><span class="k">Base</span> <span class="mono">${escapeHtml(changes.base)}</span></p>` : "";
+    const pr = prHtml(changes.prUrl, changes.prNumber);
+    const diff = changes.diffStat ? `<pre class="text">${escapeHtml(changes.diffStat)}</pre>` : "";
+    const commits = changes.commits.length === 0
+        ? `<p class="empty">No commits read for this branch.</p>`
+        : `<ul class="commits">${changes.commits
+            .map((commit) => {
+            const round = commit.round !== undefined ? `<span class="meta">Kiln-Round ${commit.round}</span>` : "";
+            return `<li><code>${escapeHtml(commit.sha.slice(0, 12))}</code> ${escapeHtml(commit.subject)} ${round}</li>`;
+        })
+            .join("")}</ul>`;
+    return `<section class="changes">${branch}${base}${pr}${diff}<h3>Commits</h3>${commits}</section>`;
+}
+function timelineHtml(detail) {
+    if (detail.timeline.length === 0)
+        return `<p class="empty">No events.</p>`;
+    const rows = detail.timeline
+        .map((event) => {
+        const step = event.step ? `<span class="meta">${escapeHtml(event.step)}</span>` : "";
+        return `<li><time datetime="${escapeHtml(event.ts)}">${escapeHtml(event.ts)}</time> <span class="ev">${escapeHtml(event.event)}</span> ${step}<pre class="text">${escapeHtml(JSON.stringify(event.properties))}</pre></li>`;
+    })
+        .join("");
+    return `<ol class="timeline">${rows}</ol>`;
+}
+function railHtml(detail) {
+    const rail = detail.rail;
+    const rows = [];
+    const row = (label, value) => {
+        rows.push(`<div><dt>${escapeHtml(label)}</dt><dd>${value}</dd></div>`);
+    };
+    row("Repo", escapeHtml(rail.repo));
+    if (rail.issue)
+        row("Issue", `<span class="mono">${escapeHtml(rail.issue)}</span>`);
+    if (rail.branch)
+        row("Branch", `<span class="mono">${escapeHtml(rail.branch)}</span>`);
+    if (rail.prUrl || rail.prNumber)
+        row("Pull request", prHtml(rail.prUrl, rail.prNumber) || escapeHtml(rail.prUrl ?? ""));
+    if (rail.ci)
+        row("CI", escapeHtml(rail.ci));
+    if (rail.risk)
+        row("Risk", escapeHtml(rail.risk));
+    row("Cost", rail.costUsd === null ? "no cost recorded" : escapeHtml(formatDollars(rail.costUsd)));
+    row("Attempts", escapeHtml(`${rail.attempts.used} / ${rail.attempts.cap}`));
+    row("Fix rounds", escapeHtml(`${rail.fixRounds.used} / ${rail.fixRounds.cap}`));
+    if (rail.failureClass || rail.fingerprint) {
+        row("Failure", escapeHtml([rail.failureClass, rail.fingerprint].filter(Boolean).join(" · ")));
+    }
+    return `<aside class="rail" aria-label="Job facts"><h3>${escapeHtml(detail.job.jobId)}</h3><dl>${rows.join("")}</dl></aside>`;
+}
+function prHtml(url, number) {
+    const safe = url ? safeUrl(url) : undefined;
+    const text = number ? `PR #${number}` : (safe ?? url ?? "");
+    if (!text)
+        return "";
+    if (safe)
+        return `<a href="${escapeHtml(safe)}">${escapeHtml(text)}</a>`;
+    return escapeHtml(url ?? text);
+}
+function statsHtml(stats) {
+    const windows = ["today", "7d", "30d"]
+        .map((window) => {
+        const current = stats.window === window ? ` aria-current="page"` : "";
+        const label = window === "today" ? "Today" : window;
+        return `<a href="/stats?window=${window}"${current}>${label}</a>`;
+    })
+        .join("");
+    const cap = stats.spend.cap === null ? "no cap" : formatDollars(stats.spend.cap);
+    const repoRows = tableRows(stats.costByRepo.map((row) => [row.repo, formatDollars(row.usd)]), "No recorded cost in this window.");
+    const phaseRows = tableRows(stats.costByPhase.map((row) => [row.phase, formatDollars(row.usd)]), "No recorded cost in this window.");
+    const classRows = tableRows(stats.failuresByClass.map((row) => [row.class, String(row.count)]), "No failures in this window.");
+    const interventions = stats.interventions.total === 0
+        ? `<p class="empty">0 interventions</p>`
+        : `<ul class="ledger">${stats.interventions.rows
+            .map((row) => {
+            const reasons = row.reasons.map((reason) => `<li>${escapeHtml(reason.reason)} ${reason.count}</li>`).join("");
+            return `<li><span class="mono">${escapeHtml(row.repo)} / ${escapeHtml(row.jobId)}</span> ${row.total}<ul>${reasons}</ul></li>`;
+        })
+            .join("")}</ul><p class="meta">${stats.interventions.total} ${stats.interventions.total === 1 ? "intervention" : "interventions"}</p>`;
+    return `<header class="list-head"><h2>Stats</h2><nav class="tabs" aria-label="Window">${windows}</nav></header>
+<section class="stat"><h3>Spend</h3><p>Today ${escapeHtml(stats.spend.day)} ${escapeHtml(formatDollars(stats.spend.usd))} / ${escapeHtml(cap)}</p><p class="meta">This window ${escapeHtml(formatDollars(stats.windowUsd))}</p></section>
+<section class="stat"><h3>Cost by repo</h3>${repoRows}</section>
+<section class="stat"><h3>Cost by phase</h3>${phaseRows}</section>
+<section class="stat"><h3>Runs</h3><p>${stats.runs.started} started · ${stats.runs.finished} finished · ${stats.runs.failed} failed</p>${classRows}</section>
+<section class="stat"><h3>Interventions</h3>${interventions}</section>`;
+}
+function reportHtml(report) {
+    const cap = report.spend.cap === null ? "no cap" : formatDollars(report.spend.cap);
+    const runs = report.runs.length === 0
+        ? `<p class="empty">Nothing ran today.</p>`
+        : `<ul class="runs">${report.runs
+            .map((run) => {
+            const cost = run.usd === null ? "" : ` · ${escapeHtml(formatDollars(run.usd))}`;
+            const klass = run.failureClass ? ` · ${escapeHtml(run.failureClass)}` : "";
+            return `<li><a href="/jobs/${encodeURIComponent(run.jobId)}">${escapeHtml(run.title)}</a> <span class="meta">${escapeHtml(run.repo)} · ${escapeHtml(run.outcome)}${klass}${cost}</span></li>`;
+        })
+            .join("")}</ul>`;
+    const interventions = report.interventions.total === 0
+        ? `<p class="empty">0 interventions</p>`
+        : `<ul class="ledger">${report.interventions.rows
+            .map((row) => `<li><span class="mono">${escapeHtml(row.repo)} / ${escapeHtml(row.jobId)}</span> ${row.total}</li>`)
+            .join("")}</ul>`;
+    return `<header class="list-head"><h2>Today</h2><p class="meta">${escapeHtml(report.day)}</p></header>
+<section class="stat"><h3>Spend</h3><p>${escapeHtml(formatDollars(report.spend.usd))} / ${escapeHtml(cap)}</p></section>
+<section class="stat"><h3>Runs</h3>${runs}</section>
+<section class="stat"><h3>Interventions</h3>${interventions}</section>`;
+}
+function tableRows(rows, empty) {
+    if (rows.length === 0)
+        return `<p class="empty">${escapeHtml(empty)}</p>`;
+    return `<table><tbody>${rows.map((row) => `<tr><td>${escapeHtml(row[0] ?? "")}</td><td class="num">${escapeHtml(row[1] ?? "")}</td></tr>`).join("")}</tbody></table>`;
+}
+function formatDollars(value) {
+    return `$${value.toFixed(2)}`;
+}
+function intakeSheet(intake, attention) {
+    const items = [...attention.needsYou, ...attention.inFlight, ...attention.doneRecently];
     return `<section class="sheet intake" id="intake" aria-label="Add job" hidden>
 <div class="d-head">
 <div class="num">kiln add</div>
@@ -174,21 +476,15 @@ function intakeSheet(intake, items) {
 <div data-pane="jira" hidden><label class="field"><span class="k">Jira key</span><input id="jira-key" type="text" placeholder="PROJ-123" autocomplete="off" spellcheck="false"></label></div>
 <label class="field" id="issue-field"><span class="k">Issue</span><input id="job-issue" type="text" placeholder="ABC-123" autocomplete="off" spellcheck="false"></label>
 <label class="field" id="title-field"><span class="k">Title</span><input id="job-title" type="text" autocomplete="off"></label>
-<fieldset class="field" id="after-field"><legend class="k">After</legend><div id="after-list">${afterOptions(items)}</div></fieldset>
+<fieldset class="field" id="after-field"><legend class="k">After</legend><div id="after-list">${afterOptions(items.map((item) => item.job))}</div></fieldset>
 <pre class="text preview" id="intake-preview" hidden></pre>
 <p class="form-error" id="intake-error" role="alert" hidden></p>
 <div class="d-actions"><button type="button" id="preview-job" hidden>Preview</button><button type="submit">Add</button></div>
 </form>
 </section>`;
 }
-function settingsSheet() {
-    return `<section class="sheet intake" id="settings" aria-label="Settings" hidden>
-<div class="d-head">
-<div class="num">kiln.config.json</div>
-<h3>Settings</h3>
-<button type="button" class="close" data-close aria-label="Close">×</button>
-</div>
-<form id="settings-form" class="intake-form">
+function settingsForm() {
+    return `<form id="settings-form" class="intake-form">
 <p class="meta" id="settings-path"></p>
 <p class="saved" id="settings-saved" role="status" hidden>Saved</p>
 <p class="form-error" id="settings-error" role="alert" hidden></p>
@@ -256,8 +552,7 @@ function settingsSheet() {
 <p class="field-error" data-error="dailyDollarCap" hidden></p>
 </div>
 <div class="d-actions"><button type="submit">Save</button></div>
-</form>
-</section>`;
+</form>`;
 }
 function repoButtons(repos) {
     if (repos.length === 0)
@@ -273,219 +568,13 @@ function workflowOptions(names) {
         .map((name) => `<option value="${escapeHtml(name)}"${name === "feature" ? " selected" : ""}>${escapeHtml(name)}</option>`)
         .join("");
 }
-function afterOptions(items) {
-    const open = items.filter((item) => item.job.state !== "done");
+function afterOptions(jobs) {
+    const open = jobs.filter((job) => job.state !== "done");
     if (open.length === 0)
         return `<p class="empty">No open jobs.</p>`;
     return open
-        .map((item) => {
-        const job = item.job;
-        return `<label class="after"><input type="checkbox" name="after" value="${escapeHtml(job.jobId)}"><span class="num">${escapeHtml(job.jobId)}</span><span>${escapeHtml(job.title || job.jobId)}</span></label>`;
-    })
-        .join("");
-}
-function sheet(item, csrf) {
-    const job = item.job;
-    const files = displayFiles(job);
-    const round = lastRound(job);
-    const pr = safeUrl(job.prUrl);
-    const num = `${job.repo}/${job.jobId} · ${job.workflow} · ${job.state}${round ? ` · round ${round}` : ""}`;
-    const branch = branchOf(job);
-    return `<section class="sheet" data-job="${escapeHtml(job.jobId)}"${pr ? ` data-pr="${escapeHtml(pr)}"` : ""} hidden>
-<div class="d-head">
-<div class="num">${escapeHtml(num)}</div>
-<h3>${escapeHtml(job.title || job.jobId)}</h3>
-${branch ? `<div class="branch">${escapeHtml(branch)}</div>` : ""}
-${sandboxHtml(job)}
-${prLink(job)}
-${actionsHtml(item, csrf)}
-<button type="button" class="close" data-close aria-label="Close">×</button>
-</div>
-<div class="d-body">${filesNav(files, job)}</div>
-</section>`;
-}
-function filesNav(files, job) {
-    let group = "";
-    const buttons = files
-        .map((file, index) => {
-        const head = file.group !== group ? `<div class="group">${escapeHtml(file.group)}</div>` : "";
-        group = file.group;
-        const dot = file.tone ? ` ${file.tone}` : "";
-        return `${head}<button type="button" class="file${index === 0 ? " on" : ""}" data-file="${escapeHtml(file.id)}"><span class="dot${dot}"></span>${escapeHtml(file.label)}</button>`;
-    })
+        .map((job) => `<label class="after"><input type="checkbox" name="after" value="${escapeHtml(job.jobId)}"><span class="num">${escapeHtml(job.jobId)}</span><span>${escapeHtml(job.title || job.jobId)}</span></label>`)
         .join("");
-    const sources = files
-        .map((file) => `<pre class="src" data-file="${escapeHtml(file.id)}" hidden>${escapeHtml(file.text)}</pre>`)
-        .join("");
-    const empty = files.length === 0 ? '<div class="empty">Nothing written yet.</div>' : "";
-    return `<nav class="files">${buttons}${routeLinks(job)}${empty}</nav><article class="doc"><div class="md" data-view></div>${sources}</article>`;
-}
-function routeLinks(job) {
-    const id = encodeURIComponent(job.jobId);
-    const links = [];
-    if (job.specPath)
-        links.push(`<a class="file" href="/jobs/${id}/spec">spec</a>`);
-    if (job.logPath)
-        links.push(`<a class="file" href="/jobs/${id}/log">log</a>`);
-    if (job.findingsPath)
-        links.push(`<a class="file" href="/jobs/${id}/findings">Findings</a>`);
-    if (links.length === 0)
-        return "";
-    return `<div class="group">Open</div>${links.join("")}`;
-}
-function actionsHtml(item, csrf) {
-    const id = encodeURIComponent(item.job.jobId);
-    const token = `<input type="hidden" name="csrf" value="${escapeHtml(csrf)}">`;
-    const forms = [];
-    if (item.job.canApprove) {
-        forms.push(`<form method="post" action="/api/jobs/${id}/approve" class="act approve">${token}<button type="submit">Approve</button></form>`);
-    }
-    if (item.job.canReject) {
-        forms.push(`<form method="post" action="/api/jobs/${id}/reject" class="act reject">${token}<button type="submit">Reject</button></form>`);
-    }
-    if (item.job.canRevise) {
-        forms.push(`<form method="post" action="/api/jobs/${id}/revise" class="act revise">${token}<input name="note" type="text" required maxlength="8000" placeholder="Note for the next round" autocomplete="off"><button type="submit">Revise</button></form>`);
-    }
-    if (item.retry) {
-        forms.push(`<form method="post" action="/api/jobs/${id}/retry" class="act retry">${token}<button type="submit">Retry</button></form>`);
-    }
-    if (forms.length === 0)
-        return "";
-    return `<div class="d-actions">${forms.join("")}</div>`;
-}
-function sandboxHtml(job) {
-    if (!job.sandboxed)
-        return "";
-    return `<div class="meta">sandbox · docker</div>`;
-}
-function roundsHtml(job, stage) {
-    const rounds = job.rounds ?? [];
-    const last = rounds[rounds.length - 1]?.n;
-    const rows = rounds.map((round) => roundRow(round, stage === "review" && job.state === "running" && round.n === last));
-    for (const round of job.feedbackRounds ?? []) {
-        const tone = round.outcome ? " PASS" : " CHANGES";
-        rows.push(`<div class="round"><span class="r">R${round.round}</span><span class="chip${tone}" style="grid-column: 2 / -1">${escapeHtml(feedbackRoundLabel(round))}</span></div>`);
-    }
-    const inReview = job.state === "in-review" || (job.state === "done" && safeUrl(job.prUrl));
-    if (inReview && (job.feedbackRounds?.length ?? 0) === 0) {
-        const n = (last ?? 0) + 1;
-        const tone = job.state === "done" ? " PASS" : "";
-        rows.push(`<div class="round"><span class="r">R${n}</span><span class="chip${tone}" style="grid-column: 2 / -1">PR review</span></div>`);
-    }
-    if (rows.length === 0)
-        return "";
-    return `<div class="rounds">${rows.join("")}</div>`;
-}
-function roundRow(round, waiting) {
-    const cells = REVIEWERS.map(([key, label]) => {
-        const verdict = round[key];
-        const tone = verdict === "PASS" || verdict === "CHANGES" ? verdict : waiting && !verdict ? "wait" : "";
-        return `<span class="chip${tone ? ` ${tone}` : ""}" title="${escapeHtml(`${key}: ${verdict || "pending"}`)}">${label}</span>`;
-    }).join("");
-    return `<div class="round"><span class="r">R${round.n}</span>${cells}</div>`;
-}
-/**
- * A scheduled retry is one quiet line in the stage column.
- * A dead or non-retryable failure in Needs human keeps the attempt budget.
- */
-function attemptHtml(job, stage) {
-    if (scheduledRetry(job) && job.nextRetryAt) {
-        const detail = [`attempt ${job.attemptCount}/${job.maxAttempts}`];
-        if (job.lastFailureReason)
-            detail.push(job.lastFailureReason);
-        return `<div class="meta">retrying <time datetime="${escapeHtml(job.nextRetryAt)}" data-time="clock">${escapeHtml(job.nextRetryAt)}</time> · ${escapeHtml(detail.join(" · "))}</div>`;
-    }
-    if (stage !== "needs-human" || (job.state !== "failed" && job.state !== "dead" && job.state !== "needs-human"))
-        return "";
-    if (job.attemptCount <= 0 && !job.lastFailureReason && !job.nextRetryAt)
-        return "";
-    const parts = [];
-    if (job.attemptCount > 0)
-        parts.push(`attempt ${job.attemptCount}/${job.maxAttempts}`);
-    if (job.lastFailureReason)
-        parts.push(job.lastFailureReason);
-    const line = parts.length > 0 ? `<div class="meta">${escapeHtml(parts.join(" · "))}</div>` : "";
-    const when = job.nextRetryAt
-        ? `<div class="meta">next retry <time datetime="${escapeHtml(job.nextRetryAt)}">${escapeHtml(job.nextRetryAt)}</time></div>`
-        : "";
-    return `${line}${when}`;
-}
-function noteHtml(item) {
-    const lines = [noteText(item)];
-    if (item.errorTail) {
-        for (const line of item.errorTail.split("\n")) {
-            const trimmed = line.trim();
-            if (trimmed && !lines.some((existing) => existing.includes(trimmed)))
-                lines.push(trimmed);
-        }
-    }
-    return `<div class="note">${lines.map((line) => escapeHtml(line)).join("<br>")}</div>`;
-}
-function repoLabel(job) {
-    if (job.deliver === "local" || job.deliver === "pr")
-        return `${job.repo} · ${job.deliver}`;
-    return job.repo;
-}
-function noteText(item) {
-    const job = item.job;
-    if (job.state === "done") {
-        if (job.prNumber)
-            return `merged · PR #${job.prNumber}`;
-        if (safeUrl(job.prUrl))
-            return "merged · PR";
-        const branch = branchOf(job);
-        return branch ? `landed locally · ${branch}` : "landed locally";
-    }
-    return item.reason;
-}
-function dependsHtml(job) {
-    if (job.dependsOn.length === 0)
-        return "";
-    const links = job.dependsOn
-        .map((dep) => `<a href="#job-${encodeURIComponent(dep.jobId)}">${escapeHtml(dep.jobId)}</a>`)
-        .join(", ");
-    return `<p class="deps">depends on ${links}</p>`;
-}
-function prLink(job) {
-    const safe = safeUrl(job.prUrl);
-    if (safe) {
-        const text = job.prNumber ? `PR #${job.prNumber}` : safe;
-        return `<div class="branch"><a href="${escapeHtml(safe)}" target="_blank" rel="noopener">${escapeHtml(text)}</a></div>`;
-    }
-    if (job.prUrl)
-        return `<div class="branch">${escapeHtml(job.prUrl)}</div>`;
-    return "";
-}
-function branchOf(job) {
-    if (job.branch)
-        return job.branch;
-    if (job.runId)
-        return `yak/${job.runId}`;
-    return "";
-}
-function lastRound(job) {
-    const rounds = job.rounds ?? [];
-    return rounds.length > 0 ? rounds[rounds.length - 1]?.n : undefined;
-}
-function displayFiles(job) {
-    if (job.files && job.files.length > 0)
-        return job.files;
-    return readBoardFiles({
-        ...(job.diffSummary && job.workflow !== INVESTIGATION_WORKFLOW ? { diffSummary: job.diffSummary } : {}),
-        ...(job.logTail ? { logTail: job.logTail } : {}),
-        ...(job.workflow ? { workflow: job.workflow } : {}),
-        gates: job.gates.map((gate) => ({
-            stepId: gate.stepId,
-            prompt: gate.prompt,
-            ...(gate.rendered ? { rendered: gate.rendered } : {}),
-            choices: gate.choices,
-            artifacts: gate.artifacts,
-            reviews: gate.reviews,
-        })),
-    });
-}
-function chip(id, label, count, pressed) {
-    return `<button type="button" class="repo-f" aria-pressed="${pressed ? "true" : "false"}" data-repo="${escapeHtml(id)}">${escapeHtml(label)}<span class="n">${count}</span></button>`;
 }
 function safeUrl(url) {
     if (!url)
@@ -501,6 +590,8 @@ function safeUrl(url) {
     }
 }
 function document(options) {
+    const job = options.jobId ? ` data-job="${escapeHtml(options.jobId)}"` : "";
+    const latest = options.latest ? ` data-latest="${escapeHtml(options.latest)}"` : "";
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -512,7 +603,7 @@ function document(options) {
 ${options.css}
 </style>
 </head>
-<body data-needs-you="${options.needsYou}" data-revision="${escapeHtml(options.revision)}" data-csrf="${escapeHtml(options.csrf ?? "")}">
+<body data-section="${escapeHtml(options.section)}" data-needs-you="${options.needsYou}" data-revision="${escapeHtml(options.revision)}" data-csrf="${escapeHtml(options.csrf ?? "")}"${job}${latest}>
 ${options.body}
 ${options.live ? `<script>\n${LIVE_SCRIPT}\n</script>` : ""}
 </body>