@nanocollective/roster 0.1.0-alpha.3 → 0.1.0-alpha.30

package/templates/portal/js/views/paste.js

@@ -7,19 +7,27 @@
  * Nothing here writes. The panel parses, shows a diff, and waits for a second click. */
 
 import { getBrief, parsePaste, saveFile } from "../api.js";
+import { mdlite } from "../md.js";
 import { el, toClipboard } from "../dom.js";
 import { unifiedDiff, diffStat } from "../textdiff.js";
 
 /**
- * @param {{kind: string, staff?: string, title?: string, onSaved?: () => void}} opts
+ * @param {{kind: string, staff?: string, title?: string, about?: string, onSaved?: () => void}} opts
+ *   `about` is a sentence on what the role does, added to a charter brief.
  */
 export function paste(opts) {
   const box = el("div", { className: "paste" });
-  box.append(el("h3", { textContent: opts.title ?? "Write it with your own AI" }));
+  if (opts.title !== "") box.append(el("h3", { textContent: opts.title ?? "Write it with your own AI" }));
 
   const status = el("p", { className: "sub", textContent: "Building the prompt…" });
   box.append(status);
 
+  /* A charter brief carries a worked example to model the shape on, matched to the role. The
+     choice is on the page because the match is a guess, and "none" is a fair answer. */
+  const model = el("select", { hidden: true });
+  const modelRow = el("label", { className: "sub", hidden: true }, ["Example to follow: ", model]);
+  box.append(modelRow);
+
   const actions = el("div", { className: "row" });
   const copy = el("button", { className: "btn primary", textContent: "Copy the prompt" });
   const show = el("button", { className: "btn", textContent: "Show it" });
@@ -32,8 +40,7 @@ export function paste(opts) {
   const answer = el("textarea", {
     className: "pastebox",
     placeholder:
-      "Paste the whole reply here, including anything your AI said around the file. " +
-      "Only the part between the sentinels is used.",
+      "Paste its whole reply here.",
   });
   answer.rows = 8;
 
@@ -42,16 +49,49 @@ export function paste(opts) {
 
   let brief = null;
 
-  getBrief(opts.kind, opts.staff)
+  const NAMES = {
+    cto: "the CTO example",
+    cmo: "the CMO example",
+    support: "the support example",
+    pm: "the product manager example",
+    designer: "the designer example",
+    qa: "the QA example",
+    devops: "the DevOps example",
+    writer: "the writer example",
+    analyst: "the analyst example",
+    community: "the community example",
+    none: "no example",
+  };
+  model.onchange = () => {
+    copy.disabled = true;
+    getBrief(opts.kind, opts.staff, model.value, opts.about)
+      .then((data) => {
+        if (data.error) throw new Error(data.error);
+        brief = data;
+        if (!preview.hidden) preview.textContent = brief.text;
+      })
+      .catch((err) => {
+        status.className = "err";
+        status.textContent = String(err.message || err);
+      })
+      .finally(() => {
+        copy.disabled = false;
+      });
+  };
+
+  getBrief(opts.kind, opts.staff, undefined, opts.about)
     .then((data) => {
       if (data.error) throw new Error(data.error);
       brief = data;
+      if (data.examples) {
+        model.replaceChildren(...data.examples.map((e) => el("option", { value: e, textContent: NAMES[e] ?? e })));
+        model.value = data.example ?? "none";
+        model.hidden = modelRow.hidden = false;
+      }
       status.textContent =
-        "Paste this into Claude, ChatGPT or anything else. It carries every file it refers to, " +
-        "so there is nothing to attach and nothing for it to ask you for. It will interview you " +
-        "first, then hand back the finished file.";
+        "Copy the prompt into Claude or ChatGPT and answer its questions.";
       box.append(
-        el("p", { className: "sub", textContent: "Then paste its whole reply back here:" }),
+        el("p", { className: "sub", textContent: "Then paste its reply here:" }),
         answer,
         el("div", { className: "row" }, [check]),
         result,
@@ -97,23 +137,47 @@ export function paste(opts) {
       result.append(note);
     }
 
+    // What the AI said around the file: its caveats and "check these" are worth reading first.
+    const notes = String(answer.value ?? "")
+      .replace(/<<<ROSTER FILE [^>]+>>>[\s\S]*?<<<ROSTER END>>>/g, "")
+      .trim();
+
     for (const file of data.files ?? []) {
-      if (file.unchanged) continue;
       const card = el("div", { className: "pastefile" });
-      const stat = diffStat(file.before, file.text);
+      const name = file.path.split("/").slice(-2).join("/");
+      if (file.unchanged) {
+        card.append(el("p", { className: "verdict", textContent: "✓ Same as what's already in " + name + ". Nothing to save." }));
+        result.append(card);
+        continue;
+      }
       card.append(
-        el("b", { textContent: file.path }),
-        el("span", {
-          className: "meta",
-          textContent: `+${stat.added} −${stat.removed}` + (file.writable ? "" : " · not writable"),
+        el("p", {
+          className: "verdict" + (file.writable ? " ok" : " bad"),
+          textContent: file.writable
+            ? "✓ Looks good. Saving replaces " + name + " with this:"
+            : "✗ " + file.path + " can't be written from here.",
         }),
       );
-      const diff = el("pre", { className: "diff" });
+      card.append(el("div", { className: "md doc pastepreview", innerHTML: mdlite(file.text) }));
+
+      if (notes) {
+        const said = el("details", { className: "pastenotes", open: true });
+        said.append(el("summary", { textContent: "Your AI also said" }), el("div", { className: "md doc", innerHTML: mdlite(notes) }));
+        card.append(said);
+      }
+
+      const diff = el("pre", { className: "diff", hidden: true });
       diff.textContent = unifiedDiff(file.before, file.text, file.path);
-      card.append(diff);
+      const stat = diffStat(file.before, file.text);
+      const toggle = el("button", { className: "ghbtn", textContent: `Show changes (+${stat.added} −${stat.removed})` });
+      toggle.onclick = () => {
+        diff.hidden = !diff.hidden;
+        toggle.textContent = (diff.hidden ? "Show changes" : "Hide changes") + ` (+${stat.added} −${stat.removed})`;
+      };
 
+      const row = el("div", { className: "row" });
       if (file.writable) {
-        const save = el("button", { className: "btn primary", textContent: "Save and commit" });
+        const save = el("button", { className: "btn primary", textContent: "Save" });
         save.onclick = async () => {
           save.disabled = true;
           save.textContent = "Saving…";
@@ -124,17 +188,19 @@ export function paste(opts) {
             opts.onSaved?.();
           } catch (err) {
             save.disabled = false;
-            save.textContent = "Save and commit";
+            save.textContent = "Save";
             card.append(el("p", { className: "err", textContent: String(err.message || err) }));
           }
         };
-        card.append(save);
+        row.append(save);
       }
+      row.append(toggle);
+      card.append(row, diff);
       result.append(card);
     }
 
     if (!(data.problems ?? []).length && !(data.files ?? []).length) {
-      result.append(el("p", { className: "sub", textContent: "Nothing to do." }));
+      result.append(el("p", { className: "verdict bad", textContent: "✗ No file found in that reply." }));
     }
   };
 

package/templates/portal/js/views/prompt.js

@@ -9,11 +9,13 @@
  * changing a byte of the composed text, and nothing said so before.
  */
 
+import { highlighted } from "../mdedit.js";
 import { getFile, post } from "../api.js";
-import { askText } from "../dialog.js";
+import { askText, askYes } from "../dialog.js";
 import { el, esc, grow, kb, toClipboard } from "../dom.js";
 import { icon } from "../icons.js";
 import { mdlite } from "../md.js";
+import { render } from "../router.js";
 import { S, staff, writeHash } from "../state.js";
 import { diffStat, unifiedDiff } from "../textdiff.js";
 import { renderDiff } from "./changed.js";
@@ -21,9 +23,53 @@ import { renderDiff } from "./changed.js";
 const KINDS = [
   ["daily", "Daily", "the scheduled run"],
   ["mention", "Mention", "someone typed @them in an issue"],
-  ["pr-mention", "PR mention", "someone typed @them on a pull request"],
 ];
 
+/**
+ * Build the paste-ready brief on the server, where compose.mjs lives, and copy it.
+ *
+ * A finding pre-fills the box rather than skipping it: what it wrote is a starting point, and
+ * "and keep it in operating.md" is exactly the sort of thing you want to add.
+ *
+ * Exported because the findings themselves live on Health now, and the fix for one of them is
+ * the same brief whichever screen you asked from.
+ */
+export async function copyAmendBrief(handle, kind, want, btn, note) {
+  const label = btn.textContent;
+  const asked = await askText({
+    title: "What do you want changed?",
+    hint:
+      "This goes at the top of a brief carrying the whole prompt and every file it is " +
+      "made of. Say it the way you would say it to a person.",
+    value: want,
+    placeholder: "stop opening decision issues for anything reversible",
+    confirm: "Copy the brief",
+  });
+  if (!asked) return;
+  btn.disabled = true;
+  btn.textContent = "building…";
+  try {
+    const url =
+      "/api/amend?staff=" + encodeURIComponent(handle) +
+      "&kind=" + encodeURIComponent(kind) +
+      "&want=" + encodeURIComponent(asked);
+    const text = await (await fetch(url, { cache: "no-store" })).text();
+    btn.disabled = false;
+    toClipboard(text, btn, label);
+    if (note) {
+      note.textContent = "paste it into whatever agent you use";
+      note.className = "meta";
+    }
+  } catch (e) {
+    btn.disabled = false;
+    btn.textContent = label;
+    if (note) {
+      note.textContent = e.message;
+      note.className = "meta err";
+    }
+  }
+}
+
 export function viewPrompt(m) {
   const s = staff();
   if (!S.promptKind) S.promptKind = "daily";
@@ -54,40 +100,7 @@ export function viewPrompt(m) {
   const note = el("span", { className: "meta" });
   m.append(el("div", { className: "row", style: "margin-bottom:16px" }, [kind, help, copy, note]));
 
-  /* Build the paste-ready brief on the server, where compose.mjs lives, and copy it.
-     A finding pre-fills the box rather than skipping it: what it wrote is a starting point,
-     and "and keep it in operating.md" is exactly the sort of thing you want to add. */
-  async function copyAmend(want, btn) {
-    const target = btn ?? help;
-    const label = target.textContent;
-    const asked = await askText({
-      title: "What do you want changed?",
-      hint:
-        "This goes at the top of a brief carrying the whole prompt and every file it is " +
-        "made of. Say it the way you would say it to a person.",
-      value: want,
-      placeholder: "stop opening decision issues for anything reversible",
-      confirm: "Copy the brief",
-    });
-    if (!asked) return;
-    target.disabled = true;
-    target.textContent = "building…";
-    try {
-      const url =
-        "/api/amend?staff=" + encodeURIComponent(s.handle) +
-        "&kind=" + encodeURIComponent(S.promptKind) +
-        "&want=" + encodeURIComponent(asked);
-      const text = await (await fetch(url, { cache: "no-store" })).text();
-      target.disabled = false;
-      toClipboard(text, target, label);
-      note.textContent = "paste it into whatever agent you use";
-    } catch (e) {
-      target.disabled = false;
-      target.textContent = label;
-      note.textContent = e.message;
-      note.className = "meta err";
-    }
-  }
+  const copyAmend = (want, btn) => copyAmendBrief(s.handle, S.promptKind, want, btn ?? help, note);
 
   const split = el("div", { className: "split" });
   const tree = el("div", { className: "tree" });
@@ -140,12 +153,9 @@ export function viewPrompt(m) {
     for (const l of view.layers) inlined.append(layerRow(l));
     tree.append(inlined);
 
-    if (view.problems?.length) {
-      const bad = group("Problems", String(view.problems.length));
-      for (const p of view.problems) bad.append(problemRow(p));
-      tree.append(bad);
-    }
-
+    /* No Problems section. This screen answers "what is sent"; whether what is sent is any
+       good is a health question, and it is asked and answered on Health. Having both here
+       made the tree beside the prompt half prompt and half complaints. */
     const named = group("Named, not inlined");
     named.append(
       el("p", {
@@ -160,28 +170,6 @@ export function viewPrompt(m) {
     open(S.promptOpen ?? "composed");
   }
 
-  /* A finding is only half useful. The other half is the sentence that goes into the brief,
-     which is why every one of them carries a `want`. */
-  function problemRow(p) {
-    const b = el("div", { className: "prob " + p.level });
-    b.append(el("div", { className: "ptitle", textContent: p.title }));
-    b.append(el("div", { className: "pdetail", textContent: p.detail }));
-    const fix = el("button", { className: "ghbtn", textContent: "Copy a prompt to fix this" });
-    fix.onclick = () => copyAmend(p.want, fix);
-    const row = el("div", { className: "row", style: "margin-top:8px" }, [fix]);
-    if (p.path) {
-      row.append(
-        el("button", {
-          className: "ghbtn",
-          textContent: "Open the file",
-          onclick: () => open(p.path),
-        }),
-      );
-    }
-    b.append(row);
-    return b;
-  }
-
   function group(title, right) {
     const g = el("div", { className: "navgroup" });
     const h = el("div", { className: "ghead", textContent: title });
@@ -364,8 +352,10 @@ export function viewPrompt(m) {
     );
 
     const ta = el("textarea", { value: text, className: "editor" });
-    viewer.append(ta);
+    const hl = highlighted(ta, "md");
+    viewer.append(hl);
     grow(ta);
+    hl.repaint();
     ta.addEventListener("input", () => grow(ta));
 
     const status = el("span", { className: "meta" });
@@ -388,8 +378,12 @@ export function viewPrompt(m) {
         status.textContent = "nothing changed";
         return;
       }
-      if (!confirm("Commit " + layer.path + " to " + layer.repo + " and push?\n\n" +
-                   "Picked up by " + reach + ".")) return;
+      const yes = await askYes({
+        title: "Commit " + layer.path + " to " + layer.repo + " and push?",
+        hint: "Picked up by " + reach + ".",
+        confirm: "Commit and push",
+      });
+      if (!yes) return;
       save.disabled = cancel.disabled = true;
       status.textContent = "committing…";
       status.className = "meta";

package/templates/portal/js/views/repos.js

@@ -5,31 +5,36 @@
  * spelling a repo name exactly right in a YAML file, which is the kind of thing that fails
  * quietly and reads as the tool being broken. */
 
-import { addRepo, listRepos } from "../api.js";
+import { addRepo, getRepos, listRepos } from "../api.js";
 import { el } from "../dom.js";
 
 /**
- * @param {{org: string, known: string[], onAdded?: () => void}} opts
+ * @param {{org: string, known?: string[], onAdded?: () => void}} opts  without `known`, what
+ *   org.yaml already lists is read off disk, which is how the Org screen uses it long after setup.
  */
 export function repoPicker(opts) {
-  const box = el("div", { className: "manual" });
-  box.append(
-    el("b", { textContent: "Which repos the staff work in" }),
-    el("p", {
-      textContent:
-        "Repos marked as products are the ones staff contribute to without owning. A new hire " +
-        "picks them up automatically.",
-    }),
-  );
+  const box = el("div", { className: opts.bare ? "" : "manual" });
+  if (!opts.bare) {
+    box.append(
+      el("b", { textContent: "Which repos the staff work in" }),
+      el("p", {
+        textContent:
+          "Add the repos your staff should work on. New hires get access to them automatically.",
+      }),
+    );
+  }
 
   const out = el("div", { style: "margin-top:9px" });
   box.append(out);
   out.replaceChildren(el("p", { className: "sub", textContent: "Reading your repos…" }));
 
-  listRepos(opts.org)
-    .then((data) => {
+  const known = opts.known
+    ? Promise.resolve(opts.known)
+    : getRepos().then((d) => (d.repos ?? []).map((r) => r.name));
+  Promise.all([listRepos(opts.org), known])
+    .then(([data, listed]) => {
       if (data.error) throw new Error(data.error);
-      const already = new Set(opts.known ?? []);
+      const already = new Set(listed);
       const candidates = (data.repos ?? []).filter((r) => !already.has(r.name));
 
       if (!candidates.length) {
@@ -52,7 +57,7 @@ export function repoPicker(opts) {
           add.disabled = true;
           add.textContent = "Adding…";
           try {
-            await addRepo(repo.name, "product");
+            await addRepo(repo.name, "product", repo.visibility);
             add.textContent = "Added";
             row.classList.add("added");
             opts.onAdded?.();

package/templates/portal/js/views/runonce.js

@@ -0,0 +1,94 @@
+/* One daily run, now, followed to the end.
+ *
+ * The last step of setting anybody up. Doctor calls a workflow that has never run unproven,
+ * because nothing short of a finished run shows the App, its grant, the secrets and the
+ * callers all work together. This starts one, and says how it ended. */
+
+import { runStatus, startRun } from "../api.js";
+import { askYes } from "../dialog.js";
+import { el } from "../dom.js";
+
+/**
+ * @param {{staff: string, name: string, onDone?: (ok: boolean) => void}} opts
+ */
+export function runOnce(opts) {
+  const box = el("div", { className: "manual" });
+  box.append(
+    el("b", { textContent: "Run " + opts.name + " once, now" }),
+    el("p", {
+      className: "sub",
+      textContent:
+        "A real daily run: it does a day's work and spends what a scheduled one would. " +
+        "When it finishes you get the outcome and the log.",
+    }),
+  );
+  const go = el("button", { className: "btn primary", textContent: "Run once now" });
+  const out = el("div", { style: "margin-top:9px" });
+  box.append(el("div", { className: "row" }, [go]), out);
+
+  go.onclick = async () => {
+    const yes = await askYes({
+      title: "Start a daily run for " + opts.name + " now?",
+      hint: "It is a real run, and it costs what one does.",
+      confirm: "Start the run",
+    });
+    if (!yes) return;
+    go.disabled = true;
+    const say = (text, cls) => out.replaceChildren(el("p", { className: cls ?? "sub", textContent: text }));
+    say("Starting…");
+    let run;
+    try {
+      run = await startRun(opts.staff);
+    } catch (err) {
+      say(String(err.message || err), "err");
+      go.disabled = false;
+      return;
+    }
+    const link = el("a", { href: run.url, target: "_blank", rel: "noopener", textContent: "the log" });
+    if (!run.id) {
+      out.replaceChildren(el("p", { className: "sub" }, ["Started. It has not shown up yet; follow it at ", link, "."]));
+      go.disabled = false;
+      return;
+    }
+
+    /* Polled rather than streamed: a run takes minutes, the status changes a handful of times,
+       and a clock beside it is what shows the page has not hung. */
+    const began = Date.now();
+    const tick = async () => {
+      let now;
+      try {
+        now = await runStatus(opts.staff, run.id);
+        if (now.error) throw new Error(now.error);
+      } catch (err) {
+        say(String(err.message || err), "err");
+        go.disabled = false;
+        return;
+      }
+      const mins = Math.floor((Date.now() - began) / 60000);
+      if (now.status !== "completed") {
+        out.replaceChildren(
+          el("p", { className: "sub" }, [now.status.replace("_", " ") + ", " + mins + " min so far. ", link]),
+        );
+        setTimeout(tick, 15000);
+        return;
+      }
+      go.disabled = false;
+      const ok = now.conclusion === "success";
+      const done = el("div");
+      done.append(
+        el("p", { className: ok ? "" : "err" }, [
+          ok
+            ? "It worked. The App, its grant, the secrets and the callers are proven, and Health now says so. "
+            : "It ended " + (now.conclusion || "without a conclusion") + ". ",
+          el("a", { href: now.url, target: "_blank", rel: "noopener", textContent: "The log" }),
+        ]),
+      );
+      for (const f of now.failedAt ?? []) done.append(el("p", { className: "sub", textContent: "Failed at " + f }));
+      if (!ok) done.append(el("p", { className: "sub", textContent: "Troubleshooting, in the docs, has what each failure usually means." }));
+      out.replaceChildren(done);
+      opts.onDone?.(ok);
+    };
+    tick();
+  };
+  return box;
+}

package/templates/portal/js/views/runs.js

@@ -0,0 +1,165 @@
+/* Every staff member's recent runs, and what the last 30 days cost.
+ *
+ * The one screen that is only ever on GitHub: runs are not in any repo, so offline it says so
+ * rather than drawing an empty table that reads as "nothing ran". */
+
+import { getRuns } from "../api.js";
+import { ago, el, esc, skeleton } from "../dom.js";
+import { render } from "../router.js";
+import { S } from "../state.js";
+
+/** How many runs a staff member's table shows. The spend covers all of the last 30 days. */
+const SHOWN = 15;
+
+export function viewRuns(m) {
+  m.append(el("h1", { textContent: "Runs" }));
+  m.append(
+    el("p", {
+      className: "sub",
+      textContent:
+        "What each staff member ran in the last 30 days, how it ended, and what it cost where " +
+        "the agent said. Read from GitHub through your own gh.",
+    }),
+  );
+
+  if (!S.runs) {
+    const wait = el("div", { className: "runs" }, skeleton("row", 4));
+    m.append(wait);
+    load(false);
+    return;
+  }
+  paint(m, S.runs);
+}
+
+let asking = false;
+
+async function load(force) {
+  if (asking) return;
+  asking = true;
+  try {
+    S.runs = await getRuns(force);
+  } catch (e) {
+    S.runs = { online: false, error: e.message, staff: [] };
+  } finally {
+    asking = false;
+  }
+  if (S.view === "runs") render();
+}
+
+function paint(m, data) {
+  const again = el("button", { className: "ghbtn", textContent: "Ask GitHub again" });
+  again.onclick = () => {
+    S.runs = null;
+    load(true);
+    render();
+  };
+
+  if (!data.online) {
+    const box = el("div", { className: "notice" });
+    box.innerHTML =
+      "<b>Runs live on GitHub, and it could not be reached.</b><br>" +
+      esc(data.error ?? "gh is unavailable") +
+      "<br>Everything else in the portal reads from disk and still works.";
+    m.append(box, el("div", { className: "row hacts" }, [again]));
+    return;
+  }
+
+  const g = el("div", { className: "grid runsum" });
+  g.append(tile("Last 30 days", money(data.spend), priced(data.spend), over(data.spend, data.budget)));
+  if (data.budget) {
+    g.append(tile("Budget", "$" + data.budget, "org.yaml · 30 days, all staff", over(data.spend, data.budget)));
+  }
+  g.append(tile("Runs", String(data.spend?.runs ?? 0), "skipped mentions are not counted"));
+  m.append(g);
+
+  for (const s of data.staff ?? []) m.append(...staffSection(s));
+
+  m.append(
+    el("div", { className: "row hacts" }, [
+      again,
+      el("span", { className: "meta", textContent: data.fetchedAt ? "read " + ago(data.fetchedAt) : "" }),
+    ]),
+  );
+}
+
+function staffSection(s) {
+  const head = el("div", { className: "hsect" });
+  head.append(el("span", { textContent: s.name }));
+  const total = el("i", {
+    textContent: money(s.spend) + (s.budget ? " of $" + s.budget : "") + " · 30 days",
+  });
+  if (over(s.spend, s.budget)) total.className = "warn";
+  head.append(total);
+
+  const body = el("div", { className: "hbody runs" });
+  for (const e of s.errors ?? []) body.append(el("p", { className: "hnote err", textContent: e }));
+  if (!(s.runs ?? []).length) {
+    body.append(el("p", { className: "hnote", textContent: "No runs in the last 30 days." }));
+    return [head, body];
+  }
+
+  const table = el("table", { className: "runtable" });
+  table.innerHTML =
+    "<thead><tr><th>When</th><th>Kind</th><th>Outcome</th><th>Took</th><th>Turns</th>" +
+    "<th>Cost</th><th></th></tr></thead>";
+  const rows = el("tbody");
+  for (const r of s.runs.slice(0, SHOWN)) rows.append(row(r));
+  table.append(rows);
+  body.append(table);
+  if (s.runs.length > SHOWN) {
+    body.append(
+      el("p", {
+        className: "hnote",
+        textContent: s.runs.length - SHOWN + " older runs count towards the total and are not listed.",
+      }),
+    );
+  }
+  return [head, body];
+}
+
+function row(r) {
+  const tr = el("tr");
+  const out = outcome(r);
+  const rec = r.record ?? {};
+  const mins = rec.duration_s != null ? rec.duration_s / 60 : r.minutes;
+  tr.innerHTML =
+    '<td title="' + esc(r.createdAt) + '">' + esc(ago(r.createdAt)) + "</td>" +
+    "<td>" + esc(r.kind) + "</td>" +
+    '<td><span class="chip ' + out.tone + '">' + esc(out.word) + "</span></td>" +
+    "<td>" + (mins != null ? Math.round(mins) + "m" : "–") + "</td>" +
+    "<td>" + (rec.turns ?? "–") + "</td>" +
+    "<td>" + (typeof rec.cost_usd === "number" ? "$" + rec.cost_usd.toFixed(2) : "–") + "</td>" +
+    '<td><a class="ref" href="' + esc(r.url) + '" target="_blank" rel="noopener">log</a></td>';
+  return tr;
+}
+
+/** The record's word when there is one, which knows a setup failure from an agent failure. */
+function outcome(r) {
+  if (r.status !== "completed") return { word: r.status.replace("_", " "), tone: "" };
+  const word = r.record?.outcome ?? r.conclusion ?? "unknown";
+  const tone = word === "success" ? "ok" : word === "cancelled" ? "warm" : "hot";
+  return { word, tone };
+}
+
+function money(spend) {
+  return "$" + (spend?.usd ?? 0).toFixed(2);
+}
+
+/** A total is only as good as the runs it could price, so it says how many that was. */
+function priced(spend) {
+  if (!spend?.runs) return "no runs";
+  if (spend.known === spend.runs) return "every run priced";
+  return "cost known for " + spend.known + " of " + spend.runs + " runs";
+}
+
+function over(spend, budget) {
+  return !!budget && (spend?.usd ?? 0) > budget;
+}
+
+function tile(k, v, sub, bad) {
+  const d = el("div", { className: "kv" + (bad ? " bad" : "") });
+  d.innerHTML =
+    '<div class="k">' + esc(k) + '</div><div class="v">' + esc(v) +
+    (sub ? "<small>" + esc(sub) + "</small>" : "") + "</div>";
+  return d;
+}