@lchase/kiln 0.3.0 → 0.5.0

package/dist/serve-page.js

@@ -1,196 +1,349 @@
+import { readFileSync } from "node:fs";
+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 { statusDetails } from "./report.js";
-import { JOB_STATES } from "./schemas.js";
-const REFRESH_SECONDS = 3;
-export function renderInbox(css, view) {
-    const waiting = view.jobs.filter((job) => job.state === "needs-human");
-    const body = waiting.length === 0 ? emptyInbox() : waiting.map(renderInboxCard).join("\n");
-    return document({
-        css,
-        title: "Kiln inbox",
-        refresh: true,
-        current: "inbox",
-        main: `<h1>Inbox</h1>
-<p class="lede">Jobs waiting on a person. Approve and reject use the same gate as the CLI.</p>
-${body}`,
-    });
+import { packageRoot } from "./paths.js";
+const REVIEWERS = [
+    ["security", "sec"],
+    ["ux", "ux"],
+    ["ui", "ui"],
+    ["code", "code"],
+];
+const LIVE_SCRIPT = readFileSync(join(packageRoot(), "assets", "serve.js"), "utf8");
+function kilnVersion() {
+    try {
+        const parsed = JSON.parse(readFileSync(join(packageRoot(), "package.json"), "utf8"));
+        return typeof parsed.version === "string" ? parsed.version : "";
+    }
+    catch {
+        return "";
+    }
 }
-export function renderBoard(css, view) {
-    const groups = [];
-    const states = [...JOB_STATES, "invalid"];
-    for (const state of states) {
-        const jobs = view.jobs.filter((job) => job.state === state);
-        if (jobs.length === 0)
-            continue;
-        groups.push(`<section class="group" id="state-${escapeHtml(state)}">
-<h2>${escapeHtml(state)} <span class="count">${jobs.length}</span></h2>
-${jobs.map(renderBoardJob).join("\n")}
-</section>`);
+const VERSION = kilnVersion();
+export function renderConsole(css, attention) {
+    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 main = groups.length > 0
-        ? groups.join("\n")
-        : `<h1>Board</h1><p class="empty">No jobs.</p>`;
-    const titled = groups.length > 0 ? `<h1>Board</h1>\n${main}` : main;
+    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 version = VERSION ? `<span class="ver">v${escapeHtml(VERSION)}</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>
+<div class="status" id="status">${items.length === 1 ? "1 job" : `${items.length} jobs`}</div>
+</header>
+<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" 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>
+</nav>
+<div class="scrim" data-close></div>
+<aside class="drawer" id="drawer" role="dialog" aria-modal="true" aria-label="Job">
+${items.map((item) => sheet(item)).join("\n")}
+</aside>`;
     return document({
         css,
-        title: "Kiln board",
-        refresh: true,
-        current: "board",
-        main: titled,
+        title: `(${attention.needsYouCount}) Kiln`,
+        needsYou: attention.needsYouCount,
+        revision: attention.revision,
+        live: true,
+        body,
     });
 }
 export function renderTextPage(css, title, text) {
     return document({
         css,
         title,
-        refresh: false,
-        current: "inbox",
-        main: `<a class="back" href="/">Inbox</a>
-<h1>${escapeHtml(title)}</h1>
-<pre class="text">${escapeHtml(text)}</pre>`,
+        needsYou: 0,
+        revision: "",
+        live: false,
+        body: `<a class="back" href="/">Console</a>
+<div class="page"><h1>${escapeHtml(title)}</h1>
+<pre class="text">${escapeHtml(text)}</pre></div>`,
     });
 }
 export function renderMessagePage(css, title, message) {
     return document({
         css,
         title,
-        refresh: false,
-        current: "inbox",
-        main: `<a class="back" href="/">Inbox</a>
-<h1>${escapeHtml(title)}</h1>
-<p class="empty">${escapeHtml(message)}</p>`,
+        needsYou: 0,
+        revision: "",
+        live: false,
+        body: `<a class="back" href="/">Console</a>
+<div class="page"><h1>${escapeHtml(title)}</h1>
+<p class="empty">${escapeHtml(message)}</p></div>`,
     });
 }
-function emptyInbox() {
-    return `<p class="empty">Nothing is waiting on a person. The <a href="/board">board</a> lists every job.</p>`;
-}
-function renderInboxCard(job) {
-    const gates = job.gates
-        .map((gate) => {
-        const asking = gate.rendered && gate.rendered !== gate.prompt ? gate.rendered : gate.prompt;
-        const artifacts = gate.artifacts.length === 0
-            ? ""
-            : `<ul class="facts">${gate.artifacts
-                .map((artifact) => `<li><span class="name">${escapeHtml(artifact.name)}</span> ${escapeHtml(artifact.summary)}</li>`)
-                .join("")}</ul>`;
-        const reviews = gate.reviews.length === 0
-            ? ""
-            : `<h4>Reviews</h4><ul class="facts">${gate.reviews
-                .map((review) => `<li><span class="name">${escapeHtml(review.name)}</span> ${escapeHtml(review.summary)}</li>`)
-                .join("")}</ul>`;
-        return `<p class="prompt">${escapeHtml(asking)}</p>${artifacts}${reviews}`;
-    })
-        .join("\n");
-    return `<article class="card" id="job-${escapeHtml(job.jobId)}">
-<h2>${escapeHtml(job.title || job.jobId)}</h2>
-<p class="meta">${escapeHtml(job.repo)} · ${escapeHtml(job.workflow)} · <code>${escapeHtml(job.jobId)}</code>${job.stack ? ' · <span class="chip">stacked</span>' : ""}</p>
-${gates}
-${resourceLinks(job)}
-${actionForms(job)}
-</article>`;
-}
-function renderBoardJob(job) {
-    const deps = job.dependsOn.length === 0
-        ? ""
-        : `<p class="deps">depends on ${job.dependsOn
-            .map((dep) => {
-            const why = dep.blockedDetail ? ` <span class="why">${escapeHtml(dep.blockedDetail)}</span>` : "";
-            return `<a href="/board#job-${encodeURIComponent(dep.jobId)}">${escapeHtml(dep.jobId)}</a> <span class="chip">${escapeHtml(dep.state)}</span>${why}`;
-        })
-            .join(", ")}</p>`;
-    const pr = job.prUrl && (job.state === "in-review" || job.state === "done" || job.state === "failed")
-        ? renderPr(job.prUrl)
-        : "";
-    const details = statusDetails(job);
-    const detailList = details.length === 0
-        ? ""
-        : `<ul class="details">${details
-            .map((line) => `<li class="${detailClass(job.state, line)}">${escapeHtml(line)}</li>`)
-            .join("")}</ul>`;
-    return `<article class="job" id="job-${escapeHtml(job.jobId)}">
+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 card(item, stage) {
+    const job = item.job;
+    const waiting = scheduledRetry(job);
+    const classes = ["card"];
+    if (waiting)
+        classes.push("retrying");
+    else if (stage === "needs-human")
+        classes.push("human");
+    if (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(job.repo)}</div>
+<p class="title">${escapeHtml(job.title || job.jobId)}</p>
+${branch ? `<div class="branch">${escapeHtml(branch)}</div>` : ""}
+${prLink(job)}
+${roundsHtml(job, stage)}
+${attemptHtml(job, stage)}
+${waiting ? "" : noteHtml(item)}
+${dependsHtml(job)}
+</div>`;
+}
+function sheet(item) {
+    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>
-<p class="meta">${escapeHtml(job.repo)} · ${escapeHtml(job.workflow)} · <code>${escapeHtml(job.jobId)}</code></p>
-<p class="chips"><span class="chip state-${escapeHtml(job.state)}">${escapeHtml(job.state)}</span>${job.stack ? '<span class="chip">stacked</span>' : ""}</p>
-${deps}
-${pr}
-${detailList}
-${resourceLinks(job)}
-</article>`;
-}
-function detailClass(state, line) {
-    if (line.startsWith("source ") ||
-        line.startsWith("gate ") ||
-        line.startsWith("approve:") ||
-        line.startsWith("reject:") ||
-        line.startsWith("waiting ") ||
-        line.startsWith("blocked on ") ||
-        line.startsWith("fix:")) {
-        return "";
-    }
-    if (state === "failed" || state === "dead")
-        return "bad";
-    return "";
+${branch ? `<div class="branch">${escapeHtml(branch)}</div>` : ""}
+${prLink(job)}
+${actionsHtml(item)}
+<button type="button" class="close" data-close aria-label="Close">×</button>
+</div>
+<div class="d-body">${filesNav(files, job)}</div>
+</section>`;
 }
-function renderPr(url) {
-    const safe = httpUrl(url);
-    if (!safe)
-        return `<p class="links">${escapeHtml(url)}</p>`;
-    return `<p class="links"><a href="${escapeHtml(safe)}">Pull request</a></p>`;
+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>`;
+    })
+        .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 resourceLinks(job) {
-    const links = [];
+function routeLinks(job) {
     const id = encodeURIComponent(job.jobId);
+    const links = [];
     if (job.specPath)
-        links.push(`<a href="/jobs/${id}/spec">Spec</a>`);
+        links.push(`<a class="file" href="/jobs/${id}/spec">spec</a>`);
     if (job.logPath)
-        links.push(`<a href="/jobs/${id}/log">Log</a>`);
-    if (job.workflow === INVESTIGATION_WORKFLOW)
-        links.push(`<a href="/jobs/${id}/findings">Findings</a>`);
+        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 `<p class="links">${links.join(" ")}</p>`;
+    return `<div class="group">Open</div>${links.join("")}`;
 }
-function actionForms(job) {
+function actionsHtml(item) {
+    const id = encodeURIComponent(item.job.jobId);
     const forms = [];
-    const id = encodeURIComponent(job.jobId);
-    if (job.canApprove) {
-        forms.push(`<form method="post" action="/api/jobs/${id}/approve"><button class="approve" type="submit">Approve</button></form>`);
+    if (item.job.canApprove) {
+        forms.push(`<form method="post" action="/api/jobs/${id}/approve" class="act approve"><button type="submit">Approve</button></form>`);
+    }
+    if (item.job.canReject) {
+        forms.push(`<form method="post" action="/api/jobs/${id}/reject" class="act reject"><button type="submit">Reject</button></form>`);
     }
-    if (job.canReject) {
-        forms.push(`<form method="post" action="/api/jobs/${id}/reject"><button class="reject" type="submit">Reject</button></form>`);
+    if (item.retry) {
+        forms.push(`<form method="post" action="/api/jobs/${id}/retry" class="act retry"><button type="submit">Retry</button></form>`);
     }
     if (forms.length === 0)
         return "";
-    return `<div class="actions">${forms.join("")}</div>`;
+    return `<div class="d-actions">${forms.join("")}</div>`;
 }
-function document(options) {
-    const refresh = options.refresh
-        ? `<meta http-equiv="refresh" content="${REFRESH_SECONDS}">`
+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"))
+        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 noteText(item) {
+    const job = item.job;
+    if (job.state === "done")
+        return safeUrl(job.prUrl) ? "merged via PR" : "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)
+        return undefined;
+    try {
+        const parsed = new URL(url);
+        if (parsed.protocol !== "http:" && parsed.protocol !== "https:")
+            return undefined;
+        return url;
+    }
+    catch {
+        return undefined;
+    }
+}
+function document(options) {
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="referrer" content="same-origin">
-${refresh}
 <title>${escapeHtml(options.title)}</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Roboto+Mono:wght@400;500&display=swap">
 <style>
 ${options.css}
 </style>
 </head>
-<body>
-<header class="top">
-  <a class="kiln-mark" href="/">Kiln</a>
-  <nav>
-    <a href="/" ${options.current === "inbox" ? 'aria-current="page"' : ""}>Inbox</a>
-    <a href="/board" ${options.current === "board" ? 'aria-current="page"' : ""}>Board</a>
-  </nav>
-  ${options.refresh ? `<p class="refresh">Refreshes every ${REFRESH_SECONDS}s</p>` : ""}
-</header>
-<main>
-${options.main}
-</main>
+<body data-needs-you="${options.needsYou}" data-revision="${escapeHtml(options.revision)}">
+${options.body}
+${options.live ? `<script>\n${LIVE_SCRIPT}\n</script>` : ""}
 </body>
 </html>
 `;
@@ -203,14 +356,3 @@ export function escapeHtml(value) {
         .replaceAll('"', "&quot;")
         .replaceAll("'", "&#39;");
 }
-function httpUrl(value) {
-    try {
-        const url = new URL(value);
-        if (url.protocol === "http:" || url.protocol === "https:")
-            return url.href;
-    }
-    catch {
-        return undefined;
-    }
-    return undefined;
-}

package/dist/serve.js

@@ -1,10 +1,11 @@
 import { createServer } from "node:http";
 import { existsSync, readFileSync, realpathSync } from "node:fs";
 import { join, resolve, sep } from "node:path";
-import { answerJob, readStatus, runTick } from "./driver.js";
+import { answerJob, readStatus, retryJob, runTick, startupRecovery } from "./driver.js";
+import { defaultHost } from "./host.js";
 import { INVESTIGATION_WORKFLOW } from "./findings.js";
 import { packageRoot } from "./paths.js";
-import { renderBoard, renderInbox, renderMessagePage, renderTextPage } from "./serve-page.js";
+import { renderConsole, renderMessagePage, renderTextPage } from "./serve-page.js";
 const BODY_LIMIT = 65_536;
 const TEXT_LIMIT = 100_000;
 const JOB_ID = /^[A-Za-z0-9][A-Za-z0-9._-]*$/;
@@ -13,6 +14,7 @@ const JOB_ID = /^[A-Za-z0-9][A-Za-z0-9._-]*$/;
  * Listens on 127.0.0.1 only. Resolves when the process is signalled.
  */
 export function startServe(options) {
+    startupRecovery(options.config);
     const css = loadServeCss();
     const secrets = secretValues(options.config);
     let port = options.port;
@@ -53,7 +55,7 @@ export function startServe(options) {
             const tick = () => {
                 if (stopped)
                     return;
-                safeTick(options.config, secrets);
+                safeTick(options.config, secrets, false);
             };
             firstTick = setTimeout(tick, 0);
             timer = setInterval(tick, options.tickSeconds * 1000);
@@ -67,9 +69,9 @@ export function loadServeCss() {
     }
     return readFileSync(path, "utf8");
 }
-function safeTick(config, secrets) {
+function safeTick(config, secrets, startup) {
     try {
-        runTick(config);
+        runTick(config, defaultHost(), { startup });
     }
     catch (error) {
         const message = error instanceof Error ? error.message : String(error);
@@ -91,8 +93,8 @@ async function handle(req, res, config, boundPort, css, secrets) {
             sendJson(res, 403, { error: "Cross-origin request rejected." }, secrets);
             return;
         }
-        const action = /^\/api\/jobs\/([^/]+)\/(approve|reject)$/.exec(path);
-        if (!action?.[1] || (action[2] !== "approve" && action[2] !== "reject")) {
+        const action = /^\/api\/jobs\/([^/]+)\/(approve|reject|retry)$/.exec(path);
+        if (!action?.[1] || (action[2] !== "approve" && action[2] !== "reject" && action[2] !== "retry")) {
             sendJson(res, 404, { error: "Not found." }, secrets);
             return;
         }
@@ -101,6 +103,10 @@ async function handle(req, res, config, boundPort, css, secrets) {
             sendJson(res, 404, { error: "Not found." }, secrets);
             return;
         }
+        if (action[2] === "retry") {
+            await retry(req, res, config, css, secrets, jobId);
+            return;
+        }
         await answer(req, res, config, css, secrets, jobId, action[2]);
         return;
     }
@@ -108,12 +114,8 @@ async function handle(req, res, config, boundPort, css, secrets) {
         sendJson(res, 405, { error: "Method not allowed." }, secrets);
         return;
     }
-    if (path === "/" || path === "") {
-        sendHtml(res, 200, renderInbox(css, readStatus(config)), secrets);
-        return;
-    }
-    if (path === "/board") {
-        sendHtml(res, 200, renderBoard(css, readStatus(config)), secrets);
+    if (path === "/" || path === "" || path === "/board") {
+        sendHtml(res, 200, renderConsole(css, readStatus(config).attention), secrets);
         return;
     }
     if (path === "/api/jobs") {
@@ -182,6 +184,26 @@ async function answer(req, res, config, css, secrets, jobId, choice) {
     }
     redirect(res, redirectTarget(req));
 }
+async function retry(req, res, config, css, secrets, jobId) {
+    try {
+        retryJob(config, jobId);
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        const status = message.startsWith("No job ") ? 404 : 409;
+        if (wantsJson(req))
+            sendJson(res, status, { error: message }, secrets);
+        else
+            sendHtml(res, status, renderMessagePage(css, "Could not retry", message), secrets);
+        return;
+    }
+    const job = findJob(config, jobId);
+    if (wantsJson(req)) {
+        sendJson(res, 200, { ok: true, job }, secrets);
+        return;
+    }
+    redirect(res, redirectTarget(req));
+}
 function sendFindings(res, config, css, secrets, job) {
     if (job.workflow !== INVESTIGATION_WORKFLOW) {
         sendHtml(res, 404, renderMessagePage(css, "Not found", "Not found."), secrets);
@@ -314,7 +336,7 @@ function sendHtml(res, status, html, secrets) {
         Connection: "close",
         "Cache-Control": "no-store",
         "X-Content-Type-Options": "nosniff",
-        "Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline'; form-action 'self'; base-uri 'none'; frame-ancestors 'none'",
+        "Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'unsafe-inline'; connect-src 'self'; form-action 'self'; base-uri 'none'; frame-ancestors 'none'",
         "Referrer-Policy": "same-origin",
     });
     res.end(body);