co-maintainer 0.5.0 → 0.5.1-beta.2

package/dist/src/server/pages/analytics.js

@@ -1,4 +1,5 @@
 import { bars, count, delta, duration, empty, html, layout, money, text, } from "./layout.js";
+import { formatCostTotal } from "./cost.js";
 import { listJobs } from "../../store/jobs.js";
 export function renderAnalytics(username, range, data) {
     const failed = listJobs({ status: "failed" }).slice(0, 5);
@@ -19,7 +20,7 @@ export function renderAnalytics(username, range, data) {
             : "0"}</td>
             <td class="num">${count(row.tokensIn + row.tokensOut)}</td>
             <td class="num">${duration(row.avgDurationMs)}</td>
-            <td class="num">${money(row.cost)}</td></tr>`)
+            <td class="num">${formatCostTotal(row)}</td></tr>`)
             .join("")}
         </tbody>
       </table>`;
@@ -36,8 +37,12 @@ export function renderAnalytics(username, range, data) {
             <td class="num">${count(row.tokensIn)}</td>
             <td class="num">${count(row.tokensOut)}</td>
             <td class="num">${duration(row.avgDurationMs)}</td>
-            <td class="num">${money(row.reviews ? row.cost / row.reviews : 0)}</td>
-            <td class="num">${money(row.cost)}</td></tr>`)
+            <td class="num">${row.knownCount
+            ? money(row.cost / row.knownCount)
+            : row.unknownCount
+                ? "unknown"
+                : money(0)}</td>
+            <td class="num">${formatCostTotal(row)}</td></tr>`)
             .join("")}
         </tbody>
       </table>`;
@@ -51,7 +56,7 @@ export function renderAnalytics(username, range, data) {
             .map((row) => `<tr><td>${text(row.tokenName)}</td>
             <td class="num">${row.reviews}</td>
             <td class="num">${row.findings}</td>
-            <td class="num">${money(row.cost)}</td></tr>`)
+            <td class="num">${formatCostTotal(row)}</td></tr>`)
             .join("")}
         </tbody>
       </table>`;
@@ -77,6 +82,11 @@ export function renderAnalytics(username, range, data) {
         cost: 0,
         reviews: 0,
         findings: 0,
+        knownCount: 0,
+        unknownCount: 0,
+        byokUsd: 0,
+        byokKnownCount: 0,
+        byokUnknownCount: 0,
     });
     const looks = failed.length === 0
         ? empty("Nothing stands out", "Failed jobs will be listed here.")
@@ -107,7 +117,7 @@ export function renderAnalytics(username, range, data) {
     <div class="kfig wrap4">
       <div><div class="k">Pull requests reviewed</div><div class="big">${data.totals.pullRequests}</div>${delta(data.change.pullRequests, data.days)}</div>
       <div><div class="k">Findings</div><div class="big">${data.totals.findings}</div>${delta(data.change.findings, data.days)}</div>
-      <div><div class="k">Cost</div><div class="big">${money(data.totals.cost)}</div>${delta(data.change.cost, data.days, true)}</div>
+      <div><div class="k">Cost</div><div class="big">${formatCostTotal(data.totals)}</div>${delta(data.change.cost, data.days, true)}</div>
       <div><div class="k">Tokens</div><div class="big">${count(data.totals.tokensIn + data.totals.tokensOut)}</div><div class="trend">${count(data.totals.tokensIn)} in and ${count(data.totals.tokensOut)} out</div></div>
       <div><div class="k">Average review</div><div class="big">${duration(data.totals.avgDurationMs)}</div></div>
       <div><div class="k">Rounds per pull request</div><div class="big">${data.totals.pullRequests
@@ -121,11 +131,11 @@ export function renderAnalytics(username, range, data) {
     <div class="hd"><h2>Cost per day</h2></div>
     <div class="bd">
       ${bars(data.byDay.map((row) => ({
-            label: `${row.day} ${money(row.cost)} over ${row.reviews} reviews`,
+            label: `${row.day} ${formatCostTotal(row)} over ${row.reviews} reviews`,
             value: row.cost,
         })))}
-      <p class="muted" style="margin:10px 0 0">${busiest.cost
-            ? `Busiest day was ${text(busiest.day)} at ${money(busiest.cost)}`
+      <p class="muted" style="margin:10px 0 0">${busiest.cost > 0 || busiest.unknownCount > 0
+            ? `Busiest day was ${text(busiest.day)} at ${formatCostTotal(busiest)}`
             : "No spend in this range"}</p>
     </div>
   </div>

package/dist/src/server/pages/cost.d.ts

@@ -0,0 +1,21 @@
+import type { CostTotals } from "../../store/reviews.ts";
+export type CostRow = {
+    cost: number | null;
+    /** `null` on a row written before this column existed. */
+    cost_status?: "known" | "unknown" | null;
+    cost_note?: string | null;
+    billed_to?: "server" | "byok" | null;
+};
+/** One review's cost cell: the dollar amount, or "unknown" with the reason
+ * as a tooltip. A row from before `cost_status` existed falls back to the
+ * same rule the SQL aggregates use: a recorded cost is known, a missing one
+ * is not. */
+export declare function formatCost(row: CostRow): string;
+/** A figure summed from several reviews, as `$1.23 · 4 reviews with unknown
+ * cost`. Plain text, safe wherever HTML cannot go (a `title` attribute, the
+ * settings page's own JSON). BYOK never sits inside the main amount. */
+export declare function formatCostTotal(totals: CostTotals): string;
+/** Folds a handful of reviews (a pull request's rounds) into the same shape
+ * `reviewStats` returns, so one review list and one SQL aggregate render
+ * through the same `formatCostTotal`. */
+export declare function totalOfRows(rows: CostRow[]): CostTotals;

package/dist/src/server/pages/cost.js

@@ -0,0 +1,72 @@
+/** How a review's cost renders on the dashboard. A missing cost
+ * is never a silent `$0.00`: a single review says why in a tooltip, a total
+ * names how many of its reviews are missing one. */
+import { costReasonText } from "../../util/cost.js";
+import { escapeHtml, money } from "./layout.js";
+function statusOf(row) {
+    return row.cost_status ?? (row.cost !== null ? "known" : "unknown");
+}
+/** One review's cost cell: the dollar amount, or "unknown" with the reason
+ * as a tooltip. A row from before `cost_status` existed falls back to the
+ * same rule the SQL aggregates use: a recorded cost is known, a missing one
+ * is not. */
+export function formatCost(row) {
+    if (statusOf(row) === "known")
+        return money(row.cost ?? 0);
+    const reason = row.cost_note ?? "recorded_before_0_5_1";
+    return `<span class="cost-unknown" tabindex="0" title="${escapeHtml(costReasonText(reason))}">unknown</span>`;
+}
+function reviewsWord(n) {
+    return `${n} review${n === 1 ? "" : "s"} with unknown cost`;
+}
+/** A figure summed from several reviews, as `$1.23 · 4 reviews with unknown
+ * cost`. Plain text, safe wherever HTML cannot go (a `title` attribute, the
+ * settings page's own JSON). BYOK never sits inside the main amount. */
+export function formatCostTotal(totals) {
+    let main;
+    if (totals.knownCount === 0 && totals.unknownCount > 0) {
+        main = reviewsWord(totals.unknownCount);
+    }
+    else {
+        main = money(totals.cost);
+        if (totals.unknownCount > 0)
+            main += ` · ${reviewsWord(totals.unknownCount)}`;
+    }
+    if (totals.byokKnownCount === 0 && totals.byokUnknownCount === 0)
+        return main;
+    const byok = totals.byokKnownCount === 0
+        ? reviewsWord(totals.byokUnknownCount)
+        : money(totals.byokUsd);
+    return `${main} + ${byok} BYOK`;
+}
+/** Folds a handful of reviews (a pull request's rounds) into the same shape
+ * `reviewStats` returns, so one review list and one SQL aggregate render
+ * through the same `formatCostTotal`. */
+export function totalOfRows(rows) {
+    const totals = {
+        cost: 0,
+        knownCount: 0,
+        unknownCount: 0,
+        byokUsd: 0,
+        byokKnownCount: 0,
+        byokUnknownCount: 0,
+    };
+    for (const row of rows) {
+        const known = statusOf(row) === "known";
+        if (row.billed_to === "byok") {
+            if (known) {
+                totals.byokUsd += row.cost ?? 0;
+                totals.byokKnownCount++;
+            }
+            else
+                totals.byokUnknownCount++;
+        }
+        else if (known) {
+            totals.cost += row.cost ?? 0;
+            totals.knownCount++;
+        }
+        else
+            totals.unknownCount++;
+    }
+    return totals;
+}

package/dist/src/server/pages/pr.js

@@ -1,7 +1,8 @@
-import { empty, html, layout, markdown, money, repoNav, skSlot, text, when, } from "./layout.js";
+import { empty, html, layout, markdown, repoNav, skSlot, text, when, } from "./layout.js";
+import { formatCost, formatCostTotal, totalOfRows } from "./cost.js";
 export function renderPr(username, fullName, data) {
     const n = data.prNumber;
-    const totalCost = data.reviews.reduce((sum, review) => sum + Number(review.cost ?? 0), 0);
+    const totalCost = totalOfRows(data.reviews);
     const stateLabel = (state) => {
         if (state === "closed")
             return "Closed";
@@ -64,7 +65,7 @@ export function renderPr(username, fullName, data) {
             ? "Changes since the last review"
             : "Whole pull request")}</td>
               <td class="num">${review.findings_count}</td>
-              <td class="num">${money(Number(review.cost ?? 0))}</td></tr>`)
+              <td class="num">${formatCost(review)}</td></tr>`)
             .join("")}
           </tbody>
         </table>`;
@@ -95,7 +96,7 @@ export function renderPr(username, fullName, data) {
     </div>
     <div class="card">
       <div class="hd"><h2>Reviews</h2>
-        <span class="muted" style="margin-left:auto;font-size:13px">${money(totalCost)} total</span></div>
+        <span class="muted" style="margin-left:auto;font-size:13px">${formatCostTotal(totalCost)} total</span></div>
       <div class="bd flush">${reviewsTable}</div>
     </div>
   </div>

package/dist/src/server/pages/repo.js

@@ -1,4 +1,5 @@
-import { capped, empty, html, layout, money, repoNav, skSlot, text, when, } from "./layout.js";
+import { capped, empty, html, layout, repoNav, skSlot, text, when, } from "./layout.js";
+import { formatCostTotal } from "./cost.js";
 import { COMPARE_FILE_CAP, MAX_COMMITS_COUNTED } from "../../services/drift.js";
 import { webhookReachabilityProblem } from "../../util/webhook_reachability.js";
 import { lastDeliveryForRepo } from "../../store/deliveries.js";
@@ -72,7 +73,7 @@ export function renderRepo(username, data, webhookUrl) {
         <div class="kfig">
           <div><div class="k">Pull requests reviewed</div><div class="big">${stats.pullRequests}</div></div>
           <div><div class="k">Findings</div><div class="big">${stats.findings}</div></div>
-          <div><div class="k">Cost</div><div class="big">${money(stats.cost)}</div></div>
+          <div><div class="k">Cost</div><div class="big">${formatCostTotal(stats)}</div></div>
         </div>
       </div>
     </div>

package/dist/src/server/pages/repo_prs.js

@@ -1,4 +1,5 @@
-import { empty, html, layout, money, repoNav, skSlot, text, when, } from "./layout.js";
+import { empty, html, layout, repoNav, skSlot, text, when } from "./layout.js";
+import { formatCostTotal } from "./cost.js";
 export function renderRepoPulls(username, fullName, data, open) {
     const start = (data.page - 1) * data.per + 1;
     const end = Math.min(data.page * data.per, data.total);
@@ -24,7 +25,7 @@ export function renderRepoPulls(username, fullName, data, open) {
             .map((item) => `<tr><td><a href="/repos/${text(fullName)}/pulls/${item.pr_number}">#${item.pr_number}</a></td>
               <td class="muted">${when(item.last_reviewed)}</td>
               <td class="num">${item.findings}</td>
-              <td class="num">${money(item.cost)}</td></tr>`)
+              <td class="num">${formatCostTotal(item)}</td></tr>`)
             .join("")}
           </tbody>
         </table>${pager}`;

package/dist/src/server/pages/repo_remote.js

@@ -1,4 +1,5 @@
-import { empty, html, layout, money, repoNav, text, when } from "./layout.js";
+import { empty, html, layout, repoNav, text, when } from "./layout.js";
+import { formatCost } from "./cost.js";
 export function renderRepoRemote(username, fullName, data) {
     const rows = data.items.length === 0
         ? empty("No remote reviews yet", "Developers run co-maintainer review --remote with a token from Settings.")
@@ -12,7 +13,7 @@ export function renderRepoRemote(username, fullName, data) {
             <td>${text(review.token_name ?? "none")}</td>
             <td>${text(review.status)}</td>
             <td class="num">${review.findings_count ?? 0}</td>
-            <td class="num">${money(review.cost ?? 0)}</td>
+            <td class="num">${formatCost(review)}</td>
             <td class="muted">${when(review.created_at)}</td>
           </tr>`)
             .join("")}

package/dist/src/server/pages/repo_settings.js

@@ -1,6 +1,22 @@
 import { html, layout, repoNav, skSlot, text } from "./layout.js";
 import { parseRemakeCron } from "../../services/remake_cron.js";
 import { nextCronRun } from "../../util/cron.js";
+import { policySource } from "../../services/webhook.js";
+import { ASSOCIATIONS, TEMPLATES, TEMPLATE_INFO, storedPolicyValue, withDefaults, } from "../../services/review_policy.js";
+const ASSOCIATION_LABEL = {
+    OWNER: "Owner",
+    MEMBER: "Member",
+    COLLABORATOR: "Collaborator",
+    CONTRIBUTOR: "Earlier contributor",
+    FIRST_TIME_CONTRIBUTOR: "First time contributor",
+    FIRST_TIMER: "First timer",
+    NONE: "No relation to the repository",
+};
+/** JSON for an inline script: `<` is escaped so a rule name can never close
+ * the script tag. */
+function scriptJson(value) {
+    return JSON.stringify(value).replace(/</g, "\\u003c");
+}
 function cronHint(repo, expression) {
     const notBuilt = repo.knowledge_built_at
         ? ""
@@ -21,6 +37,30 @@ function cronHint(repo, expression) {
 }
 export function renderRepoSettings(username, repo, config) {
     const name = repo.full_name;
+    const source = policySource(repo);
+    const stored = storedPolicyValue(source.policy);
+    const current = source.legacy
+        ? "legacy"
+        : typeof stored === "string"
+            ? stored
+            : "custom";
+    const templates = Object.fromEntries(Object.keys(TEMPLATES).map((key) => [key, withDefaults(TEMPLATES[key])]));
+    const policyData = {
+        current,
+        legacy: source.legacy,
+        policy: source.legacy ? templates.everyone : source.policy,
+        templates,
+        info: TEMPLATE_INFO,
+        associations: ASSOCIATIONS.map((value) => ({
+            value,
+            label: ASSOCIATION_LABEL[value],
+        })),
+    };
+    const policyOptions = [
+        ...TEMPLATE_INFO.map((item) => `<option value="${text(item.name)}"${current === item.name ? " selected" : ""}>${text(item.label)}</option>`),
+        `<option value="custom"${current === "custom" ? " selected" : ""}>Custom rules</option>`,
+        `<option value="legacy"${current === "legacy" ? " selected" : ""}>Simple switches</option>`,
+    ].join("");
     const skip = repo.skip_drafts && repo.skip_bots
         ? "both"
         : repo.skip_drafts
@@ -37,11 +77,57 @@ export function renderRepoSettings(username, repo, config) {
     <div class="crumbs"><a href="/">Repositories</a> /
       <a href="/repos/${text(name)}">${text(name)}</a> / Settings</div>
     <div class="pagehead"><div><h1>Settings</h1></div></div>
+    <div class="card" data-async id="policy-card">
+      ${skSlot()}
+      <div class="hd"><h2>Who gets a review</h2></div>
+      <div class="bd">
+        <div class="field wide">
+          <label for="policy-template">Policy</label>
+          <select id="policy-template">${policyOptions}</select>
+          <div class="hint" id="policy-desc"></div>
+        </div>
+        <div id="policy-body">
+          <div class="notice info"><div class="txt"><b>In short</b>
+            <ul id="policy-summary" aria-live="polite" style="margin:6px 0 0 18px;padding:0"></ul></div></div>
+          <p id="policy-problem" class="muted" role="alert" hidden></p>
+          <details id="policy-details" style="margin-top:14px">
+            <summary>Edit the rules</summary>
+            <p class="muted">The first rule that matches a pull request decides. If none matches, the last setting below decides.</p>
+            <div id="rules"></div>
+            <button class="btn sm" type="button" id="add-rule">Add rule</button>
+            <div class="field" style="margin-top:14px">
+              <label for="p-default">Any other pull request</label>
+              <select id="p-default">
+                <option value="review">Is reviewed automatically</option>
+                <option value="on-request">Waits for a maintainer request</option>
+                <option value="skip">Is not reviewed</option>
+              </select>
+            </div>
+            <div class="two">
+              <div class="field"><label for="p-label">Request label</label><input id="p-label"></div>
+              <div class="field"><label for="p-command">Request comment</label><input id="p-command"></div>
+              <div class="field"><label for="p-scope">A request covers</label>
+                <select id="p-scope">
+                  <option value="head">Only the commit it was made on</option>
+                  <option value="pull-request">Every later push to the pull request</option>
+                </select></div>
+              <div class="field"><label for="p-max">Reviews per pull request</label>
+                <input id="p-max" placeholder="No limit"></div>
+            </div>
+            <fieldset id="p-requesters" class="ticks">
+              <legend>Who can ask for a review</legend>
+            </fieldset>
+          </details>
+        </div>
+      </div>
+      <div class="ft"><button class="primary" id="save-policy">Save</button></div>
+    </div>
     <div class="card" data-async>
       ${skSlot()}
-      <div class="hd"><h2>Automatic review</h2></div>
+      <div class="hd"><h2>${source.legacy ? "Automatic review" : "How reviews run"}</h2></div>
       <div class="bd">
-        <div style="display:flex;align-items:center;gap:14px;margin-bottom:22px">
+        ${source.legacy
+            ? `<div id="switches"><div style="display:flex;align-items:center;gap:14px;margin-bottom:22px">
           <button class="tg${repo.auto_review === 1 ? " on" : ""}" id="auto"></button>
           <div>Review pull requests as they are pushed</div>
         </div>
@@ -53,7 +139,8 @@ export function renderRepoSettings(username, repo, config) {
             <option value="bots"${skip === "bots" ? " selected" : ""}>Bots only</option>
             <option value="none"${skip === "none" ? " selected" : ""}>Nothing</option>
           </select>
-        </div>
+        </div></div>`
+            : ""}
         <div class="field">
           <label>Review</label>
           <select id="scope">
@@ -111,6 +198,228 @@ export function renderRepoSettings(username, repo, config) {
 </div>
 <script>
 var repo = ${JSON.stringify(name)};
+var P = ${scriptJson(policyData)};
+var state = null;
+var previewTimer = null;
+function el(tag, props, kids) {
+  var node = document.createElement(tag);
+  Object.keys(props || {}).forEach(function(key) {
+    if (key === "text") node.textContent = props[key];
+    else node.setAttribute(key, props[key]);
+  });
+  (kids || []).forEach(function(kid) { node.appendChild(kid); });
+  return node;
+}
+function tri(v) { return v === true ? "yes" : v === false ? "no" : "any"; }
+function unTri(v) { return v === "yes" ? true : v === "no" ? false : undefined; }
+function csv(text) {
+  return text.split(",").map(function(x) { return x.trim(); }).filter(Boolean);
+}
+function fromPolicy(policy) {
+  return {
+    rules: (policy.rules || []).map(function(rule) {
+      var w = rule.when || {};
+      var lines = w.changedLines || {};
+      return {
+        name: rule.name || "", action: rule.action,
+        association: (w.association || []).slice(),
+        fork: tri(w.fork), draft: tri(w.draft), bot: tri(w.bot),
+        labels: (w.labels || []).join(", "),
+        branches: (w.targetBranch || []).join(", "),
+        min: lines.min === undefined ? "" : String(lines.min),
+        max: lines.max === undefined ? "" : String(lines.max)
+      };
+    }),
+    def: policy.default, label: policy.requestLabel,
+    command: policy.requestCommand,
+    requesters: policy.requesters.slice(), scope: policy.approvalScope,
+    max: policy.maxRounds === undefined ? "" : String(policy.maxRounds)
+  };
+}
+function toPolicy() {
+  return {
+    rules: state.rules.map(function(r) {
+      var when = {};
+      if (r.association.length) when.association = r.association;
+      if (unTri(r.fork) !== undefined) when.fork = unTri(r.fork);
+      if (unTri(r.draft) !== undefined) when.draft = unTri(r.draft);
+      if (unTri(r.bot) !== undefined) when.bot = unTri(r.bot);
+      if (csv(r.labels).length) when.labels = csv(r.labels);
+      if (csv(r.branches).length) when.targetBranch = csv(r.branches);
+      if (r.min.trim() !== "" || r.max.trim() !== "") {
+        when.changedLines = {};
+        if (r.min.trim() !== "") when.changedLines.min = Number(r.min);
+        if (r.max.trim() !== "") when.changedLines.max = Number(r.max);
+      }
+      var out = { when: when, action: r.action };
+      if (r.name.trim()) out.name = r.name.trim();
+      return out;
+    }),
+    default: state.def, requestLabel: state.label,
+    requestCommand: state.command, requesters: state.requesters,
+    approvalScope: state.scope,
+    maxRounds: state.max.trim() === "" ? undefined : Number(state.max)
+  };
+}
+function markCustom() {
+  var select = document.getElementById("policy-template");
+  if (select.value !== "legacy") select.value = "custom";
+  describe();
+  queuePreview();
+}
+function describe() {
+  var value = document.getElementById("policy-template").value;
+  var text = "";
+  if (value === "legacy") text = "The three switches below decide: automatic review on or off, and skipping drafts and bots.";
+  else if (value === "custom") text = "Your own rules, edited below.";
+  else P.info.forEach(function(item) { if (item.name === value) text = item.description; });
+  document.getElementById("policy-desc").textContent = text;
+  document.getElementById("policy-body").hidden = value === "legacy";
+}
+function queuePreview() {
+  clearTimeout(previewTimer);
+  previewTimer = setTimeout(preview, 250);
+}
+async function preview() {
+  var list = document.getElementById("policy-summary");
+  var problem = document.getElementById("policy-problem");
+  var saveBtn = document.getElementById("save-policy");
+  if (document.getElementById("policy-template").value === "legacy") return;
+  try {
+    var data = await api("POST", "/api/repos/policy-preview", { policy: toPolicy() });
+    list.replaceChildren();
+    data.summary.forEach(function(line) {
+      list.appendChild(el("li", { text: line }));
+    });
+    problem.hidden = true;
+    saveBtn.disabled = false;
+  } catch (error) {
+    problem.textContent = "This policy cannot be saved yet: " + error.message;
+    problem.hidden = false;
+    saveBtn.disabled = true;
+  }
+}
+function field(id, labelText, control) {
+  return el("div", { "class": "field" }, [el("label", { "for": id, text: labelText }), control]);
+}
+function tickList(container, name, values, onChange) {
+  P.associations.forEach(function(a) {
+    var id = name + a.value;
+    var box = el("input", { type: "checkbox", id: id });
+    box.checked = values().indexOf(a.value) !== -1;
+    box.addEventListener("change", function() {
+      var next = P.associations.map(function(x) { return x.value; }).filter(function(v) {
+        return v === a.value ? box.checked : values().indexOf(v) !== -1;
+      });
+      onChange(next);
+      markCustom();
+    });
+    container.appendChild(el("label", { "for": id }, [box, el("span", { text: a.label })]));
+  });
+}
+function renderRules() {
+  var box = document.getElementById("rules");
+  box.replaceChildren();
+  state.rules.forEach(function(rule, i) {
+    var pre = "r" + i + "-";
+    var bind = function(node, key) {
+      node.addEventListener("input", function() { rule[key] = node.value; markCustom(); });
+      return node;
+    };
+    var pick = function(id, key, options) {
+      var node = el("select", { id: id }, options.map(function(o) {
+        return el("option", { value: o[0], text: o[1] });
+      }));
+      node.value = rule[key];
+      node.addEventListener("change", function() { rule[key] = node.value; markCustom(); });
+      return node;
+    };
+    var move = function(text, label, to, disabled) {
+      var btn = el("button", { "class": "btn sm", type: "button", text: text, "aria-label": label });
+      btn.disabled = disabled;
+      btn.addEventListener("click", function() {
+        state.rules.splice(to, 0, state.rules.splice(i, 1)[0]);
+        renderRules(); markCustom();
+      });
+      return btn;
+    };
+    var del = el("button", { "class": "btn sm", type: "button", text: "Remove", "aria-label": "Remove rule " + (i + 1) });
+    del.addEventListener("click", function() {
+      state.rules.splice(i, 1);
+      renderRules(); markCustom();
+    });
+    var head = el("div", { style: "display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap" }, [
+      el("strong", { text: "Rule " + (i + 1), style: "align-self:center" }),
+      field(pre + "name", "Name (optional)", bind(el("input", { id: pre + "name", value: rule.name }), "name")),
+      field(pre + "action", "Then", pick(pre + "action", "action", [
+        ["review", "Review it"], ["on-request", "Wait for a request"], ["skip", "Do not review it"]
+      ]))
+    ]);
+    var authors = el("fieldset", { "class": "ticks" }, [
+      el("legend", { text: "When the author is (none ticked means anyone)" })
+    ]);
+    tickList(authors, pre + "a-", function() { return rule.association; }, function(next) { rule.association = next; });
+    var yesNo = [["any", "Either"], ["yes", "Yes"], ["no", "No"]];
+    var flags = el("div", { "class": "two" }, [
+      field(pre + "fork", "Opened from a fork", pick(pre + "fork", "fork", yesNo)),
+      field(pre + "draft", "Is a draft", pick(pre + "draft", "draft", yesNo)),
+      field(pre + "bot", "Is by a bot", pick(pre + "bot", "bot", yesNo)),
+      field(pre + "labels", "Has one of these labels (comma separated)", bind(el("input", { id: pre + "labels", value: rule.labels }), "labels")),
+      field(pre + "branches", "Targets one of these branches (comma separated)", bind(el("input", { id: pre + "branches", value: rule.branches }), "branches")),
+      field(pre + "min", "Changes at least this many lines", bind(el("input", { id: pre + "min", value: rule.min }), "min")),
+      field(pre + "max", "Changes at most this many lines", bind(el("input", { id: pre + "max", value: rule.max }), "max"))
+    ]);
+    box.appendChild(el("div", { "class": "rule" }, [
+      head, authors, flags,
+      el("div", { style: "display:flex;gap:8px;margin-top:8px" }, [
+        move("Move up", "Move rule " + (i + 1) + " up", i - 1, i === 0),
+        move("Move down", "Move rule " + (i + 1) + " down", i + 1, i === state.rules.length - 1),
+        del
+      ])
+    ]));
+  });
+}
+function renderSettings() {
+  document.getElementById("p-default").value = state.def;
+  document.getElementById("p-label").value = state.label;
+  document.getElementById("p-command").value = state.command;
+  document.getElementById("p-scope").value = state.scope;
+  document.getElementById("p-max").value = state.max;
+  var box = document.getElementById("p-requesters");
+  box.querySelectorAll("label").forEach(function(n) { n.remove(); });
+  tickList(box, "p-req-", function() { return state.requesters; }, function(next) { state.requesters = next; });
+}
+function loadState(policy) {
+  state = fromPolicy(policy);
+  renderRules();
+  renderSettings();
+}
+[["p-default", "def"], ["p-label", "label"], ["p-command", "command"], ["p-scope", "scope"], ["p-max", "max"]].forEach(function(pair) {
+  var node = document.getElementById(pair[0]);
+  node.addEventListener(node.tagName === "SELECT" ? "change" : "input", function() {
+    state[pair[1]] = node.value;
+    markCustom();
+  });
+});
+document.getElementById("add-rule").addEventListener("click", function() {
+  state.rules.push({ name: "", action: "skip", association: [], fork: "any", draft: "any", bot: "any", labels: "", branches: "", min: "", max: "" });
+  renderRules(); markCustom();
+  var last = document.getElementById("r" + (state.rules.length - 1) + "-name");
+  if (last) last.focus();
+});
+document.getElementById("policy-template").addEventListener("change", function() {
+  if (P.templates[this.value]) loadState(P.templates[this.value]);
+  describe();
+  queuePreview();
+});
+document.getElementById("save-policy").addEventListener("click", function() {
+  var value = document.getElementById("policy-template").value;
+  save(this, { reviewPolicy: value === "legacy" ? "legacy" : toPolicy() });
+});
+loadState(P.policy);
+describe();
+if (P.current !== "legacy") queuePreview();
+
 function save(btn, body) {
   run(btn, btn.closest("[data-async]"), async function() {
     await api("PATCH", "/api/repos/" + repo, body);
@@ -118,18 +427,23 @@ function save(btn, body) {
   });
 }
 document.getElementById("save-auto").addEventListener("click", function() {
-  var skip = document.getElementById("skip").value;
-  save(this, {
-    autoReview: document.getElementById("auto").classList.contains("on"),
-    skipDrafts: skip === "both" || skip === "drafts",
-    skipBots: skip === "both" || skip === "bots",
+  var body = {
     reviewScope: document.getElementById("scope").value,
     useCodegraph: document.getElementById("codegraph").classList.contains("on")
-  });
-});
-document.getElementById("auto").addEventListener("click", function() {
-  this.classList.toggle("on");
+  };
+  if (document.getElementById("auto")) {
+    var skip = document.getElementById("skip").value;
+    body.autoReview = document.getElementById("auto").classList.contains("on");
+    body.skipDrafts = skip === "both" || skip === "drafts";
+    body.skipBots = skip === "both" || skip === "bots";
+  }
+  save(this, body);
 });
+if (document.getElementById("auto")) {
+  document.getElementById("auto").addEventListener("click", function() {
+    this.classList.toggle("on");
+  });
+}
 document.getElementById("codegraph").addEventListener("click", function() {
   this.classList.toggle("on");
 });

package/dist/src/server/pages/router.js

@@ -2,7 +2,8 @@ import { clearOauthStateCookieHeader, clearSessionCookieHeader, createSession, l
 import { githubAuthorizeUrl, githubLoginFromCode } from "../../github/oauth.js";
 import { handleClient, handleLogo, handleStyles } from "../assets.js";
 import { activityFeed, listReposForHome, prDetail, repoKnowledge, RepoNotFound, repoOverview, repoPulls, repoRemoteReviews, runningJobs, skippedDeliveries, statsForRange, } from "../../services/dashboard.js";
-import { escapeHtml, html, money } from "./layout.js";
+import { escapeHtml, html } from "./layout.js";
+import { formatCostTotal } from "./cost.js";
 import { readConfig, resolveAppPrivateKey, writeUserConfig, } from "../../config.js";
 import { appNameProblem, beginManifestState, buildAppManifest, consumeManifestState, convertManifest, } from "../../github/app_manifest.js";
 import { renderHome, renderLogin } from "./home.js";
@@ -210,7 +211,7 @@ function toHomeRow(item) {
         knowledgeAt,
         autoOn: item.repo.auto_review === 1,
         reviews: String(item.stats.reviews),
-        cost: money(item.stats.cost),
+        cost: formatCostTotal(item.stats),
     };
 }
 function requireRepo(fullName) {