@firedrill-tools/trolley 0.1.1

package/firedrill/tools/trolley/app/site/batch-actions.js

@@ -0,0 +1,139 @@
+// Batch mutations: add/edit/remove payment (recipient search picker), generate quote, review summary, process, delete.
+import { app, go, refreshNow } from "./app.js";
+import { btn, call, confirmDialog, describe, el, field, human, input, money, newKey, openModal, select, showFieldError, toast } from "./ui.js";
+
+const CURRENCIES = ["USD", "CAD", "EUR", "GBP", "AUD", "MXN"].map((c) => [c, c]);
+
+async function run(operation, args, key, success, reload) {
+  try {
+    await call(operation, args, key);
+    toast(success);
+  } catch (error) {
+    toast(describe(error), { error: true, timeout: 8000 });
+  }
+  reload();
+}
+
+export function openPaymentForm(batch, payment, reload) {
+  let recipient = payment ? payment.recipient : undefined;
+  const chosen = el("div", { class: "method-sub", text: recipient ? `Selected: ${recipient.name} (${recipient.email ?? recipient.id})` : "No recipient selected" });
+  const results = el("div", { class: "picker-list", attrs: { role: "listbox", "aria-label": "Matching recipients" } });
+  const query = input("recipientSearch", "", { type: "search", autocomplete: "off", placeholder: "Type a name, email or reference ID" });
+  let timer;
+  let seq = 0;
+  const search = async () => {
+    const mine = (seq += 1);
+    const text = query.value.trim();
+    try {
+      const value = await call("recipients.list", { pageSize: 8, status: "active", ...(text ? { search: text } : {}) });
+      if (mine !== seq) return;
+      results.replaceChildren(...(value.recipients.length ? value.recipients.map((r) => el("button", { attrs: { type: "button", role: "option", "aria-selected": String(recipient?.id === r.id) }, on: { click: () => { recipient = r; chosen.textContent = `Selected: ${r.name} (${r.email ?? r.id})`; void search(); } } }, [el("strong", { text: r.name }), el("span", { class: "method-sub", text: `${r.email ?? ""} · ${human(r.payoutMethod ?? "")} ${r.primaryCurrency ?? ""}` })]))
+        : [el("div", { class: "state", text: "No active recipients match." })]));
+      if (value.meta.records > value.recipients.length) results.append(el("div", { class: "menu-note", text: `Showing ${value.recipients.length} of ${value.meta.records}; refine the search.` }));
+    } catch (error) {
+      if (mine === seq) results.replaceChildren(el("div", { class: "form-error", text: describe(error) }));
+    }
+  };
+  query.addEventListener("input", () => { clearTimeout(timer); timer = setTimeout(search, 250); });
+  const form = el("form", { class: "form-grid", attrs: { novalidate: true } }, [
+    payment ? null : el("div", { class: "field-full", attrs: { "data-field": "recipient" } }, [field("Recipient", query, { full: true }), results, chosen, el("div", { class: "field-error" })]),
+    field("Amount", input("amount", payment?.sourceAmount ?? "", { inputmode: "decimal", placeholder: "0.00" })),
+    field("Currency", select("currency", CURRENCIES, payment?.sourceCurrency ?? batch.currency)),
+    field("Memo", input("memo", payment?.memo ?? ""), { full: true }),
+    field("External ID", input("externalId", payment?.externalId ?? "")),
+    field("Category", select("category", [["", "None"], ...["services", "rent", "royalties", "royalties_film", "prizes", "education", "refunds"].map((c) => [c, human(c)])], payment?.category ?? "")),
+    el("label", { class: "field-full method-sub" }, [el("input", { attrs: { type: "checkbox", name: "coverFees", checked: payment?.coverFees ?? false } }), el("span", { text: " Merchant covers the fees" })]),
+  ]);
+  const formError = el("div", { class: "form-error", attrs: { role: "alert" } });
+  const save = btn(payment ? "Save payment" : "Add payment", "primary");
+  const key = newKey();
+  app.editing += 1;
+  const modal = openModal({ title: payment ? "Edit payment" : "Add payment", body: [form, formError], wide: true, actions: [btn("Cancel", "secondary", { onClick: () => modal.close() }), save], onClose: () => { app.editing -= 1; } });
+  if (!payment) void search();
+  save.addEventListener("click", async () => {
+    const d = new FormData(form);
+    const args = { batchId: batch.id, amount: String(d.get("amount")).trim(), currency: d.get("currency"), coverFees: d.get("coverFees") === "on" };
+    for (const name of ["memo", "externalId"]) if (String(d.get(name)).trim()) args[name] = String(d.get(name)).trim();
+    if (d.get("category")) args.category = d.get("category");
+    if (payment) args.paymentId = payment.id;
+    else if (recipient) args.recipient = { id: recipient.id };
+    save.disabled = true;
+    formError.textContent = "";
+    try {
+      await call(payment ? "payments.update" : "payments.create", args, key);
+      modal.close();
+      toast(payment ? "Payment updated." : "Payment added to the batch.");
+      reload();
+    } catch (error) {
+      if (!showFieldError(form, error)) formError.textContent = describe(error);
+      save.disabled = false;
+    }
+  });
+}
+
+export async function removePayment(batch, payment, reload) {
+  if (await confirmDialog("Remove payment?", `The ${money(payment.sourceAmount, payment.sourceCurrency)} payment to ${payment.recipient?.name ?? "this recipient"} will be removed from the batch.`, "Remove", { danger: true })) {
+    await run("payments.delete", { batchId: batch.id, paymentId: payment.id }, newKey(), "Payment removed.", reload);
+  }
+}
+
+export async function generateQuote(batch, reload) {
+  await run("batches.generate_quote", { batchId: batch.id }, newKey(), "Quote generated. Process the batch before it expires.", reload);
+  await refreshNow();
+}
+
+export async function reviewSummary(batch) {
+  const body = el("div", {}, el("div", { class: "skeleton" }));
+  openModal({ title: "Batch review", body, wide: true });
+  try {
+    const { batchSummary } = await call("batches.summary", { batchId: batch.id });
+    const rows = Object.entries(batchSummary.detail);
+    body.replaceChildren(rows.length === 0 ? el("p", { text: "This batch has no payments." }) : el("div", { class: "table-wrap" }, el("table", { class: "table" }, [
+      el("thead", {}, el("tr", {}, ["Payout method", "Payments", "Sending", "Fees", "Merchant fees", "Debit"].map((h, i) => el("th", { class: i ? "num" : "", text: h, attrs: { scope: "col" } })))),
+      el("tbody", {}, rows.map(([method, s]) => el("tr", {}, [el("td", { text: human(method) }), el("td", { class: "num", text: String(s.count) }), el("td", { class: "num", text: money(s.sendingAmount, batch.currency) }), el("td", { class: "num", text: money(s.totalFees, batch.currency) }), el("td", { class: "num", text: money(s.merchantFees, batch.currency) }), el("td", { class: "num", text: money(s.debitAmount, batch.currency) })]))),
+    ])));
+  } catch (error) {
+    body.replaceChildren(el("p", { class: "form-error", text: describe(error) }));
+  }
+}
+
+export async function processBatch(batch, reload) {
+  let debit = "—";
+  let balance = "—";
+  try {
+    const [{ batchSummary }, balances] = await Promise.all([call("batches.summary", { batchId: batch.id }), call("balances.list", { kind: "paymentrails" })]);
+    const cents = Object.values(batchSummary.detail).reduce((sum, s) => sum + Math.round(Number(s.debitAmount) * 100), 0);
+    debit = money((cents / 100).toFixed(2), batch.currency);
+    const funding = balances.balances.find((b) => b.currency === batch.currency);
+    balance = funding ? money(funding.amount, funding.currency) : `no ${batch.currency} balance`;
+  } catch (error) {
+    toast(describe(error), { error: true });
+  }
+  const message = el("div", {}, [
+    el("p", { text: `You are about to send ${batch.totalPayments} payments from "${batch.description || batch.id}".` }),
+    el("dl", { class: "dl" }, [el("dt", { text: "Total debit" }), el("dd", { text: debit }), el("dt", { text: "Available balance" }), el("dd", { text: balance })]),
+    el("p", { class: "method-sub", text: "Synthetic processing: balances and payment statuses change in this world only; no money moves." }),
+  ]);
+  if (!(await confirmDialog("Process batch?", message, "Process batch"))) return;
+  const key = newKey();
+  try {
+    await call("batches.start_processing", { batchId: batch.id }, key);
+    toast("Batch sent for processing.");
+  } catch (error) {
+    const unknown = error.is?.("INTERNAL_SERVER_ERROR") || error.is?.("PARTNER_INTEGRATION_ERROR");
+    toast(unknown ? "The result is unknown. Refresh before retrying." : describe(error), { error: true, timeout: 10000 });
+  }
+  reload();
+}
+
+export async function deleteBatch(batch) {
+  if (!(await confirmDialog("Delete batch?", `"${batch.description || batch.id}" and its ${batch.totalPayments} payments will be deleted.`, "Delete", { danger: true }))) return;
+  try {
+    await call("batches.delete", { batchId: batch.id }, newKey());
+    toast("Batch deleted.");
+    go("payments");
+  } catch (error) {
+    toast(describe(error), { error: true });
+    go("payments", batch.id);
+  }
+}

package/firedrill/tools/trolley/app/site/components.css

@@ -0,0 +1,149 @@
+.icon-slot { display: inline-flex; }
+.icon-slot svg, .btn svg, .icon-btn svg { width: 18px; height: 18px; }
+.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid #ececec; }
+.card-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
+.card-head h2 { margin: 0; font-size: 18px; font-weight: 500; }
+.card-head .spacer { flex: 1; }
+.card-body { padding: 18px 22px; }
+.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
+.grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }
+@media (max-width: 1100px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
+.stack { display: flex; flex-direction: column; gap: 22px; }
+
+.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-weight: 500; white-space: nowrap; }
+.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
+.btn-primary { background: var(--blue-strong); color: #fff; }
+.btn-primary:hover { background: #0052d6; }
+.btn-dark { background: #181918; color: #fff; text-transform: uppercase; font-size: 12px; letter-spacing: 0.6px; }
+.btn-dark:hover { background: #333; }
+.btn-secondary { background: #fff; border-color: var(--line-2); color: var(--ink); }
+.btn-secondary:hover { background: var(--grey-soft); }
+.btn-danger { background: var(--red); color: #fff; }
+.btn-danger:hover { background: #b93030; }
+.btn-link { background: none; color: var(--blue-strong); padding: 0 6px; }
+.btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.icon-btn { border: 0; background: none; border-radius: 8px; padding: 6px; cursor: pointer; color: var(--muted); display: inline-grid; place-items: center; }
+.icon-btn:hover { background: var(--grey-soft); color: var(--ink); }
+
+.pill { display: inline-block; font-size: 12px; font-weight: 500; border-radius: 6px; padding: 3px 8px; line-height: 1.3; white-space: nowrap; }
+.pill-green { background: var(--green-soft); color: var(--green); }
+.pill-blue { background: var(--blue-soft); color: var(--blue-strong); }
+.pill-amber { background: var(--amber-soft); color: var(--amber); }
+.pill-red { background: var(--red-soft); color: var(--red); }
+.pill-grey { background: var(--grey-soft); color: var(--muted); }
+
+.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
+.toolbar .spacer { flex: 1; }
+.search { position: relative; }
+.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
+.search input { padding-left: 34px; width: 280px; }
+.input { height: 38px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 11px; background: #fff; min-width: 0; }
+textarea.input { height: auto; padding: 9px 11px; }
+.input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 146, 255, 0.18); }
+.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
+.tab { border: 0; background: none; padding: 10px 14px; cursor: pointer; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
+.tab:hover { color: var(--ink); }
+.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blue); }
+
+.table-wrap { overflow-x: auto; }
+table.table { width: 100%; border-collapse: collapse; }
+.table th { text-align: left; font-weight: 500; font-size: 15px; color: var(--ink-2); padding: 16px 20px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+.table th button { border: 0; background: none; padding: 0; cursor: pointer; font-weight: 500; display: inline-flex; gap: 4px; align-items: center; }
+.table td { padding: 14px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
+.table tbody tr:last-child td { border-bottom: 0; }
+.table tbody tr.clickable { cursor: pointer; }
+.table tbody tr.clickable:hover { background: #fafafa; }
+.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.table .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
+.who { display: flex; align-items: center; gap: 12px; min-width: 200px; }
+.face { width: 34px; height: 34px; border-radius: 50%; background: #dfe7f1; color: #37506e; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
+.face.biz { border-radius: 8px; background: #e7e3f5; color: #4a3d7a; }
+.flag { font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
+.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
+.pager { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; flex-wrap: wrap; }
+.pager .spacer { flex: 1; }
+.pager select { height: 30px; }
+
+.state { padding: 48px 24px; text-align: center; color: var(--muted); }
+.state h3 { color: var(--ink); font-weight: 500; margin: 12px 0 6px; font-size: 16px; }
+.state svg { width: 36px; height: 36px; color: var(--line-2); }
+.skeleton { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #eee, #f7f7f7, #eee); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
+@keyframes shimmer { to { background-position: -200% 0; } }
+.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; }
+.banner svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
+.banner-info { background: var(--blue-soft); color: #0a3f78; }
+.banner-warn { background: var(--amber-soft); color: #6b4000; }
+.banner-error { background: var(--red-soft); color: #8a1f1f; }
+
+.kpi { padding: 22px; }
+.kpi-label { color: var(--ink-2); font-size: 17px; font-weight: 500; }
+.kpi-value { font-size: 34px; font-weight: 600; margin-top: 16px; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
+.kpi-sub { color: var(--muted); font-size: 16px; margin-top: 4px; }
+.dl { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; margin: 0; }
+.dl dt { color: var(--muted); }
+.dl dd { margin: 0; overflow-wrap: anywhere; }
+.crumbs { display: flex; gap: 6px; align-items: center; color: var(--muted); margin-bottom: 14px; font-size: 13px; }
+.crumbs a { color: var(--muted); text-decoration: none; }
+.crumbs a:hover { color: var(--blue-strong); }
+.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
+.profile-head .face { width: 56px; height: 56px; font-size: 18px; }
+.profile-head h2 { margin: 0; font-size: 22px; font-weight: 600; }
+.profile-head .spacer { flex: 1; }
+.method { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
+.method:last-child { border-bottom: 0; }
+.method-icon { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; color: #17a38a; }
+.method-main { flex: 1; min-width: 0; }
+.method-title { font-weight: 500; }
+.method-sub { color: var(--muted); font-size: 13px; }
+.choice-row { display: flex; gap: 12px; flex-wrap: wrap; }
+.choice { width: 96px; height: 76px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 500; }
+.choice svg { width: 22px; height: 22px; color: var(--blue-strong); }
+.choice:hover { border-color: var(--line-2); }
+.choice[aria-pressed="true"] { border: 2px solid #17a38a; background: #f2fbf8; }
+.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.summary-strip > div { padding: 18px 22px; border-right: 1px solid var(--line); }
+.summary-strip > div:last-child { border-right: 0; }
+.summary-strip .label { color: var(--muted); font-size: 13px; }
+.summary-strip .value { font-size: 22px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
+@media (max-width: 760px) { .summary-strip { grid-template-columns: 1fr 1fr; } .search input { width: 100%; } .dl { grid-template-columns: 1fr; } }
+
+.overlay { position: fixed; inset: 0; background: rgba(12, 14, 18, 0.45); display: grid; place-items: center; z-index: 60; padding: 16px; }
+.modal { background: #fff; border-radius: 14px; width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); outline: none; }
+.modal-wide { width: min(720px, 100%); }
+.modal-head { display: flex; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
+.modal-head h2 { margin: 0; font-size: 18px; font-weight: 600; flex: 1; }
+.modal-body { padding: 20px 22px; overflow: auto; }
+.modal-body p { margin: 0 0 10px; line-height: 1.5; color: var(--ink-2); }
+.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }
+.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
+.field { display: flex; flex-direction: column; gap: 6px; }
+.field-full { grid-column: 1 / -1; }
+.field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
+.field-hint { font-size: 12px; color: var(--muted); }
+.field-error { font-size: 12px; color: var(--red); min-height: 0; }
+.form-error { color: var(--red); margin-top: 12px; }
+@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
+
+.toast-host { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 80; }
+.toast { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); min-width: 320px; max-width: 560px; }
+.toast-icon { width: 32px; height: 32px; border-radius: 50%; background: #2fa36b; color: #fff; display: grid; place-items: center; flex: none; }
+.toast-icon svg { width: 18px; height: 18px; }
+.toast-error .toast-icon { background: var(--red); }
+.toast-text { flex: 1; line-height: 1.4; }
+.toast-close { border: 0; background: none; cursor: pointer; color: var(--muted); }
+.toast-close svg { width: 16px; height: 16px; }
+.menu { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); padding: 6px; z-index: 70; min-width: 220px; }
+.menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 6px; cursor: pointer; }
+.menu-item:hover { background: var(--grey-soft); }
+.menu-note { padding: 8px 10px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
+.picker-list { border: 1px solid var(--line); border-radius: 8px; max-height: 200px; overflow: auto; margin-top: 6px; }
+.picker-list button { display: flex; width: 100%; gap: 10px; align-items: center; border: 0; background: #fff; padding: 8px 10px; cursor: pointer; text-align: left; }
+.picker-list button:hover, .picker-list button[aria-selected="true"] { background: var(--blue-soft); }
+.spacer-16 { height: 16px; }
+.rail-item .icon-slot svg { width: 24px; height: 24px; }
+.hamburger .icon-slot svg { width: 26px; height: 26px; }
+.bell .icon-slot svg { width: 19px; height: 19px; }
+.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
+.method-icon svg { width: 22px; height: 22px; }
+.method-icon.done { color: #fff; background: #2fa36b; border-color: #2fa36b; border-radius: 50%; }
+.modal-body .dl { margin: 12px 0 14px; }

package/firedrill/tools/trolley/app/site/icons.js

@@ -0,0 +1,50 @@
+// Monochrome interface glyphs drawn for this package (24px grid, solid/rounded like the dashboard's rail icons).
+const NS = "http://www.w3.org/2000/svg";
+const PATHS = {
+  gauge: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm3.9 5.2-2.6 5.9a1.6 1.6 0 1 1-2.2-1.4l4.8-4.5Z",
+  user: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4a3.4 3.4 0 1 1 0 6.8A3.4 3.4 0 0 1 12 6Zm0 14a8 8 0 0 1-6-2.7c.9-2 3.2-3.1 6-3.1s5.1 1.1 6 3.1A8 8 0 0 1 12 20Z",
+  money: "M3 6h18a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm1.5 2v8h15V8h-15ZM12 9.2a2.8 2.8 0 1 1 0 5.6 2.8 2.8 0 0 1 0-5.6Z",
+  receipt: "M5 2h14v20l-2.3-1.5L14.3 22 12 20.5 9.7 22l-2.4-1.5L5 22V2Zm3 5v1.6h8V7H8Zm0 4v1.6h8V11H8Zm0 4v1.6h5V15H8Z",
+  coins: "M12 3c4.4 0 8 1.3 8 3s-3.6 3-8 3-8-1.3-8-3 3.6-3 8-3Zm-8 5.4C5.6 9.6 8.6 10.4 12 10.4s6.4-.8 8-2V11c0 1.7-3.6 3-8 3s-8-1.3-8-3V8.4Zm0 5C5.6 14.6 8.6 15.4 12 15.4s6.4-.8 8-2V16c0 1.7-3.6 3-8 3s-8-1.3-8-3v-2.6Zm0 5c1.6 1.2 4.6 2 8 2s6.4-.8 8-2V19c0 1.7-3.6 3-8 3s-8-1.3-8-3v-.6Z",
+  calculator: "M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm1 2.5V8h10V4.5H7ZM7 10v2h2v-2H7Zm4 0v2h2v-2h-2Zm4 0v2h2v-2h-2ZM7 14v2h2v-2H7Zm4 0v2h2v-2h-2Zm4 0v5h2v-5h-2ZM7 18v2h2v-2H7Zm4 0v2h2v-2h-2Z",
+  chart: "M3 3h2v16h16v2H3V3Zm15.3 3.3 1.4 1.4-5.2 5.2-3-3-3.8 3.8-1.4-1.4 5.2-5.2 3 3 3.8-3.8Z",
+  checkbox: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm0 2v14h14V5H5Zm11.3 3.3 1.4 1.4-7.2 7.2-4.2-4.2 1.4-1.4 2.8 2.8 5.8-5.8Z",
+  code: "M8.7 6.3 10.1 7.7 5.8 12l4.3 4.3-1.4 1.4L3 12l5.7-5.7Zm6.6 0L21 12l-5.7 5.7-1.4-1.4 4.3-4.3-4.3-4.3 1.4-1.4Z",
+  gear: "M13.8 2l.5 2.6c.6.2 1.2.5 1.7.9l2.5-.9 1.8 3.1-2 1.7a7 7 0 0 1 0 1.9l2 1.7-1.8 3.1-2.5-.9c-.5.4-1.1.7-1.7.9l-.5 2.6h-3.6l-.5-2.6a6.5 6.5 0 0 1-1.7-.9l-2.5.9-1.8-3.1 2-1.7a7 7 0 0 1 0-1.9l-2-1.7 1.8-3.1 2.5.9c.5-.4 1.1-.7 1.7-.9l.5-2.6h3.6ZM12 8.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8Z",
+  menu: "M3 5h18v2.2H3V5Zm0 5.9h18v2.2H3v-2.2Zm0 5.9h18V19H3v-2.2Z",
+  bell: "M12 2a1.5 1.5 0 0 1 1.5 1.5v.7A6 6 0 0 1 18 10v4.6l2 2.4v1H4v-1l2-2.4V10a6 6 0 0 1 4.5-5.8v-.7A1.5 1.5 0 0 1 12 2Zm-2.3 17h4.6a2.3 2.3 0 0 1-4.6 0Z",
+  search: "M10.5 3a7.5 7.5 0 0 1 6 12l4.3 4.3-1.5 1.5-4.3-4.3A7.5 7.5 0 1 1 10.5 3Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z",
+  plus: "M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7V4Z",
+  close: "M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6 10.6 12 5 6.4 6.4 5Z",
+  chevronLeft: "M15.4 5.4 14 4l-8 8 8 8 1.4-1.4L8.8 12l6.6-6.6Z",
+  chevronRight: "M8.6 5.4 10 4l8 8-8 8-1.4-1.4 6.6-6.6-6.6-6.6Z",
+  chevronDown: "M5.4 8.6 4 10l8 8 8-8-1.4-1.4L12 15.2 5.4 8.6Z",
+  bank: "M12 2 22 7v2H2V7l10-5Zm-7 9h2.5v7H5v-7Zm5.7 0h2.6v7h-2.6v-7Zm5.8 0H19v7h-2.5v-7ZM2 20h20v2H2v-2Z",
+  paypal: "M7 3h6.5c3.2 0 5 1.6 4.6 4.4-.5 3.4-2.8 5-6 5H9.8L8.9 18H5.2L7 3Zm2.9 3-.6 3.8h1.6c1.4 0 2.3-.7 2.5-2 .2-1.2-.4-1.8-1.7-1.8H9.9ZM18.9 8.6c.9.8 1.2 2 1 3.4-.5 3.3-2.8 4.9-6 4.9h-1.2l-.8 5.1H8.3l.3-2h2l.8-5.1H13c2.9 0 5.3-1.9 5.9-6.3Z",
+  check: "M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7 9.5 16.2Z",
+  mail: "M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1 2.3V17h16V7.3l-8 5.3-8-5.3ZM5.8 7 12 11.1 18.2 7H5.8Z",
+  phone: "M8 2h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm0 3v13h8V5H8Zm3 14.2v1.3h2v-1.3h-2Z",
+  info: "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-1 8.5V17h2v-6.5h-2ZM12 6.6a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z",
+  lock: "M12 2a5 5 0 0 1 5 5v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v3h6V7a3 3 0 0 0-3-3Z",
+  more: "M12 4.5a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6Zm0 5.7a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6Zm0 5.7a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6Z",
+  refresh: "M12 4a8 8 0 0 1 7.4 5H22l-3.5 4.5L15 9h2.2A6 6 0 1 0 18 14h2.1A8 8 0 1 1 12 4Z",
+};
+export function icon(name, cls = "") {
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  if (cls) svg.setAttribute("class", cls);
+  const path = document.createElementNS(NS, "path");
+  path.setAttribute("d", PATHS[name] ?? PATHS.info);
+  path.setAttribute("fill", "currentColor");
+  svg.append(path);
+  return svg;
+}
+export function hydrateIcons(root = document) {
+  for (const slot of root.querySelectorAll("[data-icon]")) {
+    if (slot.firstChild) continue;
+    slot.append(icon(slot.getAttribute("data-icon")));
+    slot.classList.add("icon-slot");
+  }
+}

package/firedrill/tools/trolley/app/site/index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Trolley Dashboard (synthetic)</title>
+    <link rel="icon" type="image/png" href="./assets/trolley-icon.png" />
+    <link rel="stylesheet" href="./base.css" />
+    <link rel="stylesheet" href="./components.css" />
+    <script type="module" src="./app.js"></script>
+  </head>
+  <body>
+    <a class="skip-link" href="#page">Skip to content</a>
+    <div class="shell" id="shell">
+      <aside class="rail" id="rail" aria-label="Main navigation">
+        <a class="rail-brand" href="#/" aria-label="Trolley dashboard home">
+          <img class="rail-tile" src="./assets/trolley-icon.png" alt="Trolley" width="40" height="40" />
+          <img class="rail-wordmark" src="./assets/trolley-logo.svg" alt="" width="90" height="28" />
+        </a>
+        <nav class="rail-nav">
+          <a class="rail-item" href="#/" data-route="dashboard" data-tip="Overview"><span data-icon="gauge"></span><span class="rail-label">Overview</span></a>
+          <a class="rail-item" href="#/recipients" data-route="recipients" data-tip="Recipients"><span data-icon="user"></span><span class="rail-label">Recipients</span></a>
+          <a class="rail-item" href="#/payments" data-route="payments" data-tip="Payments"><span data-icon="money"></span><span class="rail-label">Payments</span></a>
+          <button type="button" class="rail-item" data-not-simulated="Invoices" data-tip="Invoices"><span data-icon="receipt"></span><span class="rail-label">Invoices</span></button>
+          <a class="rail-item" href="#/balances" data-route="balances" data-tip="Balances"><span data-icon="coins"></span><span class="rail-label">Balances</span></a>
+          <button type="button" class="rail-item" data-not-simulated="Tax Center" data-tip="Tax Center"><span data-icon="calculator"></span><span class="rail-label">Tax Center</span></button>
+          <button type="button" class="rail-item" data-not-simulated="Reports" data-tip="Reports"><span data-icon="chart"></span><span class="rail-label">Reports</span></button>
+          <button type="button" class="rail-item" data-not-simulated="Approvals" data-tip="Approvals"><span data-icon="checkbox"></span><span class="rail-label">Approvals</span></button>
+        </nav>
+        <div class="rail-bottom">
+          <button type="button" class="rail-item" data-not-simulated="Developer tools" data-tip="Developers"><span data-icon="code"></span><span class="rail-label">Developers</span></button>
+          <button type="button" class="rail-item" data-not-simulated="Settings" data-tip="Settings"><span data-icon="gear"></span><span class="rail-label">Settings</span></button>
+        </div>
+      </aside>
+      <div class="main">
+        <header class="topbar">
+          <button type="button" class="hamburger" id="menu-toggle" aria-label="Toggle navigation" aria-expanded="false"><span data-icon="menu"></span></button>
+          <h1 class="page-title" id="page-title">Overview</h1>
+          <div class="topbar-right">
+            <button type="button" class="bell" id="bell" aria-label="Notifications (not simulated)" data-not-simulated="Notification feed"><span data-icon="bell"></span></button>
+            <div class="whoami">
+              <span class="whoami-name" id="whoami-name">…</span>
+              <span class="mode-pill" id="mode-pill" title="Synthetic sandbox merchant: no money moves">SANDBOX</span>
+            </div>
+            <button type="button" class="avatar-btn" id="avatar" aria-haspopup="menu" aria-expanded="false" aria-label="Account menu">·</button>
+          </div>
+        </header>
+        <main class="page" id="page" tabindex="-1"></main>
+      </div>
+    </div>
+    <div class="toast-host" id="toasts" aria-live="polite"></div>
+  </body>
+</html>

package/firedrill/tools/trolley/app/site/list.js

@@ -0,0 +1,87 @@
+// Shared list rendering: data table, loading/empty/error/denied states and Trolley's page/pageSize pager.
+import { icon } from "./icons.js";
+import { ToolError, btn, describe, el } from "./ui.js";
+
+export function loadingRows(columns, rows = 5) {
+  return el("tbody", {}, Array.from({ length: rows }, () => el("tr", {}, columns.map(() => el("td", {}, el("div", { class: "skeleton" }))))));
+}
+
+export function stateBlock(glyph, title, message, action) {
+  return el("div", { class: "state" }, [icon(glyph), el("h3", { text: title }), message ? el("div", { text: message }) : null, action ? el("div", { class: "state-action" }, action) : null]);
+}
+
+export function errorBlock(error, retry) {
+  if (error instanceof ToolError && (error.denied || error.is("INVALID_API_KEY"))) {
+    return stateBlock("lock", error.is("INVALID_API_KEY") ? "API key is invalid" : "Access denied", describe(error));
+  }
+  return stateBlock("info", "We couldn't load this", describe(error), retry ? btn("Try again", "secondary", { icon: "refresh", onClick: retry }) : null);
+}
+
+/**
+ * columns: [{ label, key?, sortable?, num?, cell(row) }]
+ * Returns { node, setLoading, setRows, setError }.
+ */
+export function dataTable(columns, { onRowClick, sort, onSort, caption } = {}) {
+  const head = el("thead", {}, el("tr", {}, columns.map((column) => {
+    if (!column.key || !onSort) return el("th", { class: column.num ? "num" : "", text: column.label, attrs: { scope: "col" } });
+    const active = sort?.orderBy === column.key;
+    const arrow = active ? (sort.sortBy === "asc" ? " ↑" : " ↓") : "";
+    return el("th", { class: column.num ? "num" : "", attrs: { scope: "col", "aria-sort": active ? (sort.sortBy === "asc" ? "ascending" : "descending") : undefined } },
+      el("button", { text: `${column.label}${arrow}`, attrs: { type: "button" }, on: { click: () => onSort(column.key) } }));
+  })));
+  const table = el("table", { class: "table" }, [caption ? el("caption", { class: "skip-link", text: caption }) : null, head, loadingRows(columns)]);
+  const wrap = el("div", { class: "table-wrap" }, table);
+  const extra = el("div");
+  const node = el("div", {}, [wrap, extra]);
+  const replaceBody = (body) => { table.tBodies[0]?.remove(); table.append(body); };
+  return {
+    node,
+    setLoading() { extra.replaceChildren(); replaceBody(loadingRows(columns)); },
+    setRows(rows, empty) {
+      extra.replaceChildren();
+      replaceBody(el("tbody", {}, rows.map((row) => {
+        const tr = el("tr", { class: onRowClick ? "clickable" : "" }, columns.map((column) => {
+          const content = column.cell(row);
+          return el("td", { class: column.num ? "num" : "" }, content);
+        }));
+        if (onRowClick) {
+          tr.tabIndex = 0;
+          tr.addEventListener("click", (event) => { if (!event.target.closest("button, a")) onRowClick(row); });
+          tr.addEventListener("keydown", (event) => { if (event.key === "Enter") onRowClick(row); });
+        }
+        return tr;
+      })));
+      if (rows.length === 0 && empty) extra.append(empty);
+    },
+    setError(error, retry) { replaceBody(el("tbody")); extra.replaceChildren(errorBlock(error, retry)); },
+  };
+}
+
+/** Trolley meta: { page, pages, records }. */
+export function pager(meta, pageSize, onChange) {
+  const { page = 1, pages = 0, records = 0 } = meta ?? {};
+  const first = records === 0 ? 0 : (page - 1) * pageSize + 1;
+  const last = Math.min(records, page * pageSize);
+  const sizeSelect = el("select", { class: "input", attrs: { "aria-label": "Rows per page" }, on: { change: (event) => onChange({ page: 1, pageSize: Number(event.target.value) }) } },
+    [10, 25, 50, 100].map((size) => el("option", { text: `${size} per page`, attrs: { value: size, selected: size === pageSize } })));
+  return el("div", { class: "pager" }, [
+    el("span", { text: records === 0 ? "No results" : `Showing ${first}–${last} of ${records}` }),
+    el("span", { class: "spacer" }),
+    sizeSelect,
+    el("span", { text: `Page ${pages === 0 ? 0 : page} of ${pages}` }),
+    el("button", { class: "icon-btn", attrs: { type: "button", "aria-label": "Previous page", disabled: page <= 1 }, on: { click: () => onChange({ page: page - 1, pageSize }) } }, icon("chevronLeft")),
+    el("button", { class: "icon-btn", attrs: { type: "button", "aria-label": "Next page", disabled: page >= pages }, on: { click: () => onChange({ page: page + 1, pageSize }) } }, icon("chevronRight")),
+  ]);
+}
+
+export function searchBox(placeholder, value, onInput) {
+  let timer;
+  const inputNode = el("input", { class: "input", attrs: { type: "search", placeholder, value: value ?? "", "aria-label": placeholder } });
+  inputNode.addEventListener("input", () => { clearTimeout(timer); timer = setTimeout(() => onInput(inputNode.value.trim()), 300); });
+  return el("div", { class: "search" }, [icon("search"), inputNode]);
+}
+
+export function tabs(items, active, onSelect) {
+  return el("div", { class: "tabs", attrs: { role: "tablist" } }, items.map(([value, label]) =>
+    el("button", { class: "tab", text: label, attrs: { type: "button", role: "tab", "aria-selected": value === active ? "true" : "false" }, on: { click: () => onSelect(value) } })));
+}