akm-cli 0.10.261005-beta → 0.10.261007-beta

package/dist/assets/ui/proposal-actions.js

@@ -0,0 +1,273 @@
+// Accepting and rejecting proposals in the browser: the buttons on a proposal's page and the batch bar on the pending
+// list. These are the only places the UI writes anything, and each goes through POST /api/proposals/... (lib.js `post`).
+//
+// Markup is built with `html` and written with `mount`, like every other page. Handlers are attached with
+// addEventListener on an element this render created (never on <main>, which outlives the page), so they go away with
+// the page. Confirmations are inline: no window.confirm, alert or prompt.
+
+import { ApiError, badge, html, mount, post, proposalHref } from "./lib.js";
+
+const REASON_MAX = 2000;
+
+/** What went wrong, in words a reviewer can act on; the server's own message and code are shown beside it. */
+export function describeError(error) {
+  const code = error instanceof ApiError ? error.code : "ERROR";
+  const message = error instanceof Error ? error.message : String(error);
+  const known = {
+    PROPOSAL_STALE: "The asset changed since this proposal was made; it can't be accepted.",
+    PROPOSAL_NOT_PENDING: "This proposal has already been decided.",
+    PROPOSAL_NOT_FOUND: "This proposal no longer exists.",
+    ASSET_MUTATION_LEASE_HELD: "Another akm process is writing to the bundle. Try again in a moment.",
+    ACCEPT_FAILED: "",
+  };
+  return { text: known[code] ?? "", message, code };
+}
+
+function errorBlock(error) {
+  const { text, message, code } = describeError(error);
+  return html`<div class="notice notice-fail" role="alert" tabindex="-1">
+    <p class="state-title">${text || message}</p>
+    ${text && text !== message ? html`<p class="small">${message}</p>` : ""}
+    <p class="muted small"><code>${code}</code></p>
+  </div>`;
+}
+
+function commitLine(commit) {
+  return commit
+    ? html`Committed <span class="mono">${commit.sha.slice(0, 8)}</span> <span class="muted">${commit.subject}</span>`
+    : "No commit was recorded for this change.";
+}
+
+// ---- one proposal ------------------------------------------------------------
+
+function detailView(state, nextId) {
+  const busy = state.mode === "busy";
+  switch (state.mode) {
+    case "done": {
+      const { kind, result, commit } = state;
+      return html`<div class="notice notice-ok" role="status" tabindex="-1">
+          <p class="state-title">${kind === "accept" ? "Accepted" : "Rejected"}</p>
+          ${
+            kind === "accept"
+              ? html`<p>Written to <span class="mono wrap">${result.assetPath}</span>.</p><p>${commitLine(commit)}</p>`
+              : html`<p>The reason was recorded: <em>${result.reason}</em></p>`
+          }
+        </div>
+        <p class="btn-row">${nextId ? html`<a class="btn" href="${proposalHref(nextId)}">Next pending</a>` : ""}<a class="btn btn-secondary" href="#/proposals">Back to queue</a></p>
+        ${nextId ? "" : html`<p class="muted small">No other proposal is waiting.</p>`}`;
+    }
+    case "confirm-accept":
+      return html`<p class="state-title">Accept this proposal?</p>
+        <p class="muted">The asset is written to its bundle and the change is committed.</p>
+        <p class="btn-row"><button type="button" data-act="accept-confirm">Confirm accept</button><button type="button" class="btn-secondary" data-act="cancel">Cancel</button></p>`;
+    case "reject":
+    case "busy":
+      if (state.mode === "busy" && state.kind === "accept") {
+        return html`<p class="btn-row"><button type="button" disabled>Accept</button><button type="button" class="btn-secondary" disabled>Reject</button></p>
+          <p class="muted" role="status">Accepting...</p>`;
+      }
+      return html`${state.error ? errorBlock(state.error) : ""}<label for="reject-reason"><strong>Why reject this proposal?</strong> <span class="muted small">Required, up to ${REASON_MAX} characters.</span></label>
+        <textarea id="reject-reason" data-reason rows="3" maxlength="${REASON_MAX}" required ${busy ? "disabled" : ""}>${state.reason}</textarea>
+        ${state.reasonMissing ? html`<p class="field-error" role="alert">Enter a reason before rejecting.</p>` : ""}
+        <p class="btn-row"><button type="button" class="btn-danger" data-act="reject-confirm" ${busy ? "disabled" : ""}>Confirm reject</button><button type="button" class="btn-secondary" data-act="cancel" ${busy ? "disabled" : ""}>Cancel</button></p>
+        ${busy ? html`<p class="muted" role="status">Rejecting...</p>` : ""}`;
+    default:
+      return html`${state.error ? errorBlock(state.error) : ""}
+        <p class="btn-row"><button type="button" data-act="accept">Accept</button><button type="button" class="btn-secondary" data-act="reject">Reject</button></p>`;
+  }
+}
+
+/** The action area of a pending proposal's page; {@link wireDetailActions} brings it to life. */
+export function detailActions(nextId) {
+  return html`<section class="actions" data-actions aria-label="Decide this proposal">${detailView({ mode: "idle" }, nextId)}</section>`;
+}
+
+/**
+ * Attach the Accept / Reject controls inside `root`. `onDecided(status)` runs after the server confirms, so the page can
+ * show the new status.
+ */
+export function wireDetailActions(root, { id, nextId, onDecided }) {
+  const region = root.querySelector("[data-actions]");
+  if (!region) return;
+  let state = { mode: "idle", reason: "" };
+  const draw = (focus) => {
+    mount(region, detailView(state, nextId));
+    region.querySelector(focus)?.focus();
+  };
+
+  const run = async (kind, path, body) => {
+    state = { ...state, mode: "busy", kind, error: null };
+    draw();
+    try {
+      const result = await post(path, body);
+      state = { mode: "done", kind, result, commit: result.commit ?? null, reason: state.reason };
+      draw("[role=status]");
+      onDecided?.(kind === "accept" ? "accepted" : "rejected");
+    } catch (error) {
+      state = { mode: kind === "reject" ? "reject" : "idle", reason: state.reason, error };
+      draw("[role=alert]");
+    }
+  };
+
+  region.addEventListener("input", (event) => {
+    if (!event.target.matches("[data-reason]")) return;
+    state.reason = event.target.value;
+    if (state.reasonMissing && state.reason.trim() !== "") {
+      state.reasonMissing = false;
+      region.querySelector(".field-error")?.remove();
+    }
+  });
+  region.addEventListener("click", (event) => {
+    const button = event.target.closest("button[data-act]");
+    if (!button || button.disabled || state.mode === "busy") return;
+    const base = `/api/proposals/${encodeURIComponent(id)}`;
+    switch (button.dataset.act) {
+      case "accept":
+        state = { mode: "confirm-accept", reason: state.reason };
+        draw("[data-act=accept-confirm]");
+        break;
+      case "accept-confirm":
+        run("accept", `${base}/accept`, {});
+        break;
+      case "reject":
+        state = { mode: "reject", reason: state.reason };
+        draw("[data-reason]");
+        break;
+      case "reject-confirm": {
+        const reason = state.reason.trim();
+        if (reason === "" || reason.length > REASON_MAX) {
+          state = { ...state, mode: "reject", reasonMissing: true };
+          draw("[data-reason]");
+          break;
+        }
+        run("reject", `${base}/reject`, { reason });
+        break;
+      }
+      case "cancel":
+        state = { mode: "idle", reason: state.reason };
+        draw();
+        break;
+    }
+  });
+}
+
+// ---- the pending list --------------------------------------------------------
+
+function batchView(state, count) {
+  switch (state.mode) {
+    case "confirm":
+      return html`<span>Accept ${state.ids.length} ${state.ids.length === 1 ? "proposal" : "proposals"}? They are written and committed together.</span>
+        <span class="btn-row"><button type="button" data-act="batch-confirm">Confirm accept</button><button type="button" class="btn-secondary" data-act="batch-cancel">Cancel</button></span>`;
+    case "busy":
+      return html`<span role="status">Accepting ${state.ids.length}...</span>
+        <span class="btn-row"><button type="button" disabled>Accept selected</button></span>`;
+    case "results": {
+      const { data } = state;
+      return html`<div class="batch-results" role="status" tabindex="-1">
+          <p class="state-title">${data.accepted} accepted${data.failed > 0 ? html`, ${data.failed} failed` : ""}</p>
+          <p class="small">${commitLine(data.commit)}</p>
+          <ul class="plain">${data.results.map((r) => {
+            const label = state.refs[r.id] ?? r.ref ?? r.id;
+            return r.ok
+              ? html`<li>${badge("accepted", "ok")} <span class="mono wrap">${label}</span></li>`
+              : html`<li>${badge("failed", "fail")} <span class="mono wrap">${label}</span> <span class="small">${describeError(new ApiError(0, r.code, r.error)).text || r.error}</span> <code class="small muted">${r.code}</code></li>`;
+          })}</ul>
+        </div>
+        <span class="btn-row"><button type="button" class="btn-secondary" data-act="batch-dismiss">Dismiss</button></span>`;
+    }
+    case "error":
+      return html`${errorBlock(state.error)}<span class="btn-row"><button type="button" class="btn-secondary" data-act="batch-dismiss">Dismiss</button></span>`;
+    default:
+      return count === 0
+        ? html``
+        : html`<span class="num">${count} selected</span>
+          <span class="btn-row"><button type="button" data-act="batch-start">Accept selected</button><button type="button" class="btn-secondary" data-act="batch-clear">Clear</button></span>`;
+  }
+}
+
+/**
+ * Attach selection and the batch bar inside `root`. `reload()` resolves to fresh list markup, shown after a batch so the
+ * accepted rows are gone while the per-id results stay in the bar.
+ */
+export function wireBatch(root, { reload }) {
+  const page = root.querySelector("[data-proposal-list]");
+  if (!page) return;
+  const list = page.querySelector("[data-list]");
+  const bar = page.querySelector("[data-batch-bar]");
+  let state = { mode: "idle" };
+
+  const boxes = () => [...list.querySelectorAll("input[data-select]")];
+  const chosen = () => boxes().filter((box) => box.checked);
+  const draw = (focus) => {
+    mount(bar, batchView(state, chosen().length));
+    bar.hidden = bar.childElementCount === 0;
+    bar.querySelector(focus)?.focus();
+  };
+  const syncGroups = () => {
+    for (const section of list.querySelectorAll("section[data-group]")) {
+      const group = section.querySelector("input[data-select-group]");
+      const rows = [...section.querySelectorAll("input[data-select]")];
+      const on = rows.filter((box) => box.checked).length;
+      group.checked = rows.length > 0 && on === rows.length;
+      group.indeterminate = on > 0 && on < rows.length;
+    }
+  };
+
+  page.addEventListener("change", (event) => {
+    const target = event.target;
+    if (target.matches("input[data-select-group]")) {
+      for (const box of target.closest("section[data-group]").querySelectorAll("input[data-select]")) {
+        box.checked = target.checked;
+      }
+    } else if (!target.matches("input[data-select]")) {
+      return;
+    }
+    syncGroups();
+    if (state.mode === "idle") draw();
+  });
+
+  page.addEventListener("click", async (event) => {
+    const button = event.target.closest("button[data-act]");
+    if (!button || button.disabled || state.mode === "busy") return;
+    switch (button.dataset.act) {
+      case "batch-start": {
+        const picked = chosen();
+        state = {
+          mode: "confirm",
+          ids: picked.map((box) => box.value),
+          refs: Object.fromEntries(picked.map((box) => [box.value, box.dataset.ref])),
+        };
+        draw("[data-act=batch-confirm]");
+        break;
+      }
+      case "batch-clear":
+        for (const box of chosen()) box.checked = false;
+        syncGroups();
+        draw();
+        break;
+      case "batch-cancel":
+      case "batch-dismiss":
+        state = { mode: "idle" };
+        draw();
+        break;
+      case "batch-confirm": {
+        const { ids, refs } = state;
+        state = { mode: "busy", ids, refs };
+        draw();
+        try {
+          const data = await post("/api/proposals/accept", { ids });
+          state = { mode: "results", data, refs };
+        } catch (error) {
+          state = { mode: "error", error };
+        }
+        try {
+          mount(list, await reload());
+        } catch {
+          // The results stay visible; the list refreshes on the next visit.
+        }
+        draw(".batch-results, [role=alert]");
+        break;
+      }
+    }
+  });
+}

package/dist/assets/ui/proposals.js

@@ -0,0 +1,219 @@
+// Proposals: the pending queue grouped by source, recent decisions, and a detail view with the diff.
+
+import { diffSection } from "./diff-view.js";
+import {
+  api,
+  assetHref,
+  badge,
+  definitionList,
+  emptyState,
+  fmtDateTime,
+  html,
+  mount,
+  pageHeader,
+  pretty,
+  proposalHref,
+  tableWrap,
+  when,
+} from "./lib.js";
+import { detailActions, wireBatch, wireDetailActions } from "./proposal-actions.js";
+
+function listHref(status, source) {
+  const params = new URLSearchParams();
+  if (status !== "pending") params.set("status", status);
+  if (source) params.set("source", source);
+  const q = params.toString();
+  return `#/proposals${q ? `?${q}` : ""}`;
+}
+
+function gate(decision) {
+  if (!decision) return html`<span class="muted">-</span>`;
+  const kind = decision.outcome === "auto-rejected" ? "fail" : decision.outcome === "deferred" ? "warn" : "info";
+  return html`${badge(decision.outcome, kind)}${decision.reason ? html` <span class="muted small">${decision.reason}</span>` : ""}`;
+}
+
+function selectCell(p) {
+  return html`<td class="select"><input type="checkbox" data-select value="${p.id}" data-ref="${p.ref}" aria-label="Select ${p.ref}"></td>`;
+}
+
+function refCell(p) {
+  return html`<a class="mono wrap" href="${proposalHref(p.id)}">${p.ref}</a>${p.isRetire && p.retirement ? html`<div class="small muted">retires in favour of <span class="mono">${p.retirement.successorRef}</span></div>` : ""}`;
+}
+
+function sourceChips(counts, active, status) {
+  const total = Object.values(counts).reduce((a, b) => a + b, 0);
+  const chip = (label, source, n) =>
+    html`<a class="chip ${(active ?? "") === source ? "active" : ""}" href="${listHref(status, source)}" ${(active ?? "") === source ? html`aria-current="true"` : ""}>${label} <span class="num">${n}</span></a>`;
+  return html`<div class="chips">${chip("All", "", total)}${Object.entries(counts)
+    .sort()
+    .map(([s, n]) => chip(s, s, n))}</div>`;
+}
+
+function pendingView(data, source) {
+  const shown = data.proposals.filter((p) => !source || p.source === source);
+  if (data.totalCount === 0)
+    return emptyState(
+      "No pending proposals.",
+      "The queue is empty. Proposals appear here when akm improve stages a change for review.",
+    );
+  const groups = new Map();
+  for (const p of shown) groups.set(p.source, [...(groups.get(p.source) ?? []), p]);
+  return html`${sourceChips(data.bySource, source, "pending")}
+    ${data.totalCount > data.proposals.length ? html`<p class="muted">Showing the first ${data.proposals.length} of ${data.totalCount}.</p>` : ""}
+    ${
+      shown.length === 0
+        ? emptyState("Nothing pending from this source.")
+        : [...groups].map(
+            ([name, items]) =>
+              html`<section data-group="${name}"><h2>${name} <span class="muted num">${items.length}</span></h2>
+                <label class="select-group"><input type="checkbox" data-select-group> select all in this group</label>${tableWrap(
+                  html`<table><thead><tr><th class="select"><span class="sr-only">Select</span></th><th>Asset</th><th>Waiting</th><th>Gate decision</th><th class="r">Confidence</th></tr></thead><tbody>${items.map(
+                    (p) =>
+                      html`<tr>${selectCell(p)}<td>${refCell(p)}</td><td>${when(p.waitingSince)}</td><td>${gate(p.gateDecision)}</td><td class="r num">${typeof p.confidence === "number" ? p.confidence.toFixed(2) : "-"}</td></tr>`,
+                  )}</tbody></table>`,
+                )}</section>`,
+          )
+    }`;
+}
+
+function outcomeBadge(status) {
+  return badge(
+    status,
+    status === "accepted" ? "ok" : status === "rejected" ? "fail" : status === "pending" ? "info" : "warn",
+  );
+}
+
+function recentView(data, source) {
+  const counts = {};
+  for (const p of data.proposals) counts[p.source] = (counts[p.source] ?? 0) + 1;
+  const shown = data.proposals.filter((p) => !source || p.source === source);
+  if (data.totalCount === 0)
+    return emptyState("No decided proposals yet.", "Accepted, rejected and reverted proposals are listed here.");
+  return html`${sourceChips(counts, source, "recent")}
+    ${
+      shown.length === 0
+        ? emptyState("Nothing decided from this source.")
+        : tableWrap(
+            html`<table><thead><tr><th>Decided</th><th>Outcome</th><th>Source</th><th>Asset</th><th>Reason</th></tr></thead><tbody>${shown.map(
+              (p) =>
+                html`<tr><td>${when(p.review?.decidedAt ?? p.updatedAt)}</td><td>${outcomeBadge(p.status)}</td><td class="mono">${p.source}</td><td>${refCell(p)}</td><td class="wrap">${p.review?.reason ?? p.gateDecision?.reason ?? html`<span class="muted">-</span>`}</td></tr>`,
+            )}</tbody></table>`,
+          )
+    }`;
+}
+
+const PENDING_LIMIT = 200;
+
+export async function renderList(ctx) {
+  const status = ctx.query.get("status") === "recent" ? "recent" : "pending";
+  const source = ctx.query.get("source") ?? "";
+  const data = await api("/api/proposals", { status, limit: PENDING_LIMIT });
+  const tab = (name, label) =>
+    html`<a class="tab ${status === name ? "active" : ""}" href="${listHref(name, "")}" ${status === name ? html`aria-current="page"` : ""}>${label}</a>`;
+  const head = html`${pageHeader("Proposals", "Changes akm improve has staged for review.")}
+    <nav class="tabs" aria-label="Proposal lists">${tab("pending", "Pending")}${tab("recent", "Recent")}</nav>`;
+  if (status === "recent") return html`${head}${recentView(data, source)}`;
+  ctx.after.push((root) =>
+    wireBatch(root, {
+      reload: async () => pendingView(await api("/api/proposals", { status: "pending", limit: PENDING_LIMIT }), source),
+    }),
+  );
+  return html`${head}<div data-proposal-list><div data-list>${pendingView(data, source)}</div><div class="batch-bar" data-batch-bar hidden></div></div>`;
+}
+
+// ---- detail ----------------------------------------------------------------
+
+function retirementBlock(r) {
+  const list = (items) =>
+    items && items.length > 0
+      ? html`<ul>${items.map((i) => html`<li>${i}</li>`)}</ul>`
+      : html`<span class="muted">nothing</span>`;
+  return html`<section><h2>Retirement</h2><div class="card">${definitionList([
+    ["Retires", html`<a class="mono wrap" href="${assetHref(r.retiredRef)}">${r.retiredRef}</a>`],
+    ["Successor", html`<a class="mono wrap" href="${assetHref(r.successorRef)}">${r.successorRef}</a>`],
+    ["Reason", r.reason],
+    ["Judge", html`${badge(r.judgeLabel, "info")} ${r.judgeReason}`],
+    ["Similarity", typeof r.cosine === "number" ? html`<span class="num">${r.cosine.toFixed(2)}</span> cosine` : ""],
+    ["Only in retired", list(r.onlyInRetired)],
+    ["Only in successor", list(r.onlyInSuccessor)],
+    [
+      "Continuity risk",
+      r.continuityRisk
+        ? html`${badge("flagged", "warn")} <pre class="code">${pretty(r.continuityRisk)}</pre>`
+        : html`<span class="muted">none flagged</span>`,
+    ],
+  ])}</div></section>`;
+}
+
+function statusBadges(p, status) {
+  return html`${outcomeBadge(status)}${badge(p.source, "info")}${p.isRetire ? badge("retire", "warn") : ""}`;
+}
+
+/** The pending proposal after `id` in the pending list's order (else the first other one); `null` when none is waiting. */
+async function nextPendingId(id) {
+  try {
+    const { proposals } = await api("/api/proposals", { status: "pending", limit: PENDING_LIMIT });
+    const at = proposals.findIndex((p) => p.id === id);
+    return (proposals[at + 1] ?? proposals.find((p) => p.id !== id))?.id ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export async function renderDetail(ctx) {
+  const data = await api(`/api/proposals/${encodeURIComponent(ctx.param)}`);
+  const p = data.proposal;
+  const findings = data.validation?.findings ?? [];
+  const pending = p.status === "pending";
+  const nextId = pending ? await nextPendingId(p.id) : null;
+  const diff = data.diff ? diffSection(data.diff) : null;
+  if (diff?.wire) ctx.after.push((root) => diff.wire(root));
+  if (pending) {
+    ctx.after.push((root) =>
+      wireDetailActions(root, {
+        id: p.id,
+        nextId,
+        onDecided: (status) => {
+          const target = root.querySelector("[data-status]");
+          if (target) mount(target, statusBadges(p, status));
+        },
+      }),
+    );
+  }
+  return html`<p class="crumbs"><a href="#/proposals">Proposals</a> / <span class="mono">${p.id.slice(0, 8)}</span></p>
+    ${pageHeader(html`<span class="mono wrap">${p.ref}</span>`)}
+    <div class="badges" data-status>${statusBadges(p, p.status)}</div>
+    ${pending ? detailActions(nextId) : ""}
+    <section><div class="card">${definitionList([
+      ["Id", html`<span class="mono">${p.id}</span>`],
+      ["Created", html`${when(p.createdAt)} <span class="muted small">${fmtDateTime(p.createdAt)}</span>`],
+      ["Waiting since", when(p.waitingSince)],
+      ["Confidence", typeof p.confidence === "number" ? p.confidence.toFixed(2) : ""],
+      ["Source run", p.sourceRun ? html`<span class="mono">${p.sourceRun}</span>` : ""],
+      [
+        "Target",
+        p.proposedTarget
+          ? html`<span class="mono wrap">${p.proposedTarget.root}</span> <span class="muted">(${p.proposedTarget.source})</span>`
+          : "",
+      ],
+      ["Gate decision", p.gateDecision ? gate(p.gateDecision) : ""],
+      [
+        "Review",
+        p.review ? html`${outcomeBadge(p.review.outcome)} ${p.review.reason ?? ""} ${when(p.review.decidedAt)}` : "",
+      ],
+      [
+        "Changes",
+        p.changes?.length > 0
+          ? html`<ul class="plain">${p.changes.map((c) => html`<li>${badge(c.op, "neutral")} <span class="mono wrap">${c.path}</span></li>`)}</ul>`
+          : "",
+      ],
+    ])}</div></section>
+    ${p.retirement ? retirementBlock(p.retirement) : ""}
+    ${findings.length > 0 ? html`<section><h2>Validation</h2><ul class="plain">${findings.map((f) => html`<li>${badge(f.severity ?? "info", f.severity === "error" ? "fail" : "warn")} <span class="mono small">${f.kind}</span> ${f.message}</li>`)}</ul></section>` : ""}
+    <section><h2>Diff</h2>${
+      diff
+        ? html`<p class="muted small">${data.diff.isNew ? "New asset. " : ""}Target <span class="mono wrap">${data.diff.targetPath ?? ""}</span></p>${diff.markup}`
+        : emptyState("No diff available.", data.diffError ?? "")
+    }</section>
+    <p><a href="${assetHref(p.ref)}">View the asset as it is now</a></p>`;
+}

package/dist/assets/ui/search.js

@@ -0,0 +1,62 @@
+// Search: query box with type and bundle filters; results link to the asset view.
+
+import { api, assetHref, badge, emptyState, html, pageHeader } from "./lib.js";
+
+const RESULT_LIMIT = 50;
+
+function options(values, selected, allLabel) {
+  return html`<option value="">${allLabel}</option>${values.map((v) => html`<option value="${v}" ${v === selected ? html`selected` : ""}>${v}</option>`)}`;
+}
+
+function hit(h) {
+  return html`<li class="hit">
+    <div class="hit-head"><a class="mono wrap" href="${assetHref(h.ref)}">${h.ref}</a>${badge(h.type, "info")}${h.origin ? html`<span class="muted small">${h.origin}</span>` : ""}${typeof h.score === "number" ? html`<span class="num muted small" title="Ranking score">score ${h.score.toFixed(3)}</span>` : ""}</div>
+    ${h.description ? html`<p>${h.description}</p>` : ""}
+    ${Array.isArray(h.tags) && h.tags.length > 0 ? html`<div class="tags">${h.tags.map((t) => html`<span class="tag">${t}</span>`)}</div>` : ""}
+    ${Array.isArray(h.whyMatched) && h.whyMatched.length > 0 ? html`<p class="muted small">Matched: ${h.whyMatched.join(", ")}</p>` : ""}
+  </li>`;
+}
+
+export async function render(ctx) {
+  const q = ctx.query.get("q") ?? "";
+  const type = ctx.query.get("type") ?? "";
+  const bundle = ctx.query.get("bundle") ?? "";
+  const [result, bundles] = await Promise.all([
+    api("/api/search", { q, type, bundle, limit: RESULT_LIMIT }),
+    api("/api/bundles").catch(() => null),
+  ]);
+  const types = new Set(Object.keys(bundles?.index?.byType ?? {}));
+  for (const h of result.hits) types.add(h.type);
+  if (type) types.add(type);
+  const bundleNames = (bundles?.bundles ?? []).map((b) => b.name);
+
+  ctx.after.push((root) => {
+    const form = root.querySelector("form.search-form");
+    const go = () => {
+      const params = new URLSearchParams();
+      for (const [key, value] of new FormData(form)) if (value) params.set(key, String(value));
+      const next = `#/search${params.size > 0 ? `?${params}` : ""}`;
+      if (location.hash === next) window.dispatchEvent(new HashChangeEvent("hashchange"));
+      else location.hash = next;
+    };
+    form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      go();
+    });
+    for (const select of form.querySelectorAll("select")) select.addEventListener("change", go);
+  });
+
+  return html`${pageHeader("Search", "Search your bundles. Browsing here is not counted as usage.")}
+    <form class="search-form" role="search">
+      <input type="search" name="q" value="${q}" placeholder="Search assets (empty lists everything)" aria-label="Query" autofocus>
+      <select name="type" aria-label="Type">${options([...types].sort(), type, "All types")}</select>
+      <select name="bundle" aria-label="Bundle">${options(bundleNames, bundle, "All bundles")}</select>
+      <button type="submit">Search</button>
+    </form>
+    ${(result.warnings ?? []).map((w) => html`<div class="notice notice-warn">${w}</div>`)}
+    ${
+      result.hits.length === 0
+        ? emptyState(q ? `No assets match "${q}".` : "No assets found.", result.tip ?? "")
+        : html`<p class="muted">${result.hits.length} ${result.hits.length === 1 ? "result" : "results"}${result.hits.length === RESULT_LIMIT ? ` (the first ${RESULT_LIMIT})` : ""}, ${result.searchMode ?? "search"} mode${result.timing ? `, ${result.timing.totalMs} ms` : ""}.</p><ul class="hits">${result.hits.map(hit)}</ul>`
+    }`;
+}