diff --git a/static/api.js b/static/api.js
new file mode 100644
index 0000000..800676f
--- /dev/null
+++ b/static/api.js
@@ -0,0 +1,120 @@
+// API client for the StellarGate dashboard.
+//
+// Every request goes through `request()`, which owns the fetch call, the
+// bearer auth header and the error handling. The API key is only ever sent
+// in the `Authorization` header — never in a URL, a log line or the console.
+// All paths are absolute `/v1/...` paths so the module works regardless of
+// the page the dashboard is served from.
+
+const API_BASE = "/v1";
+
+/**
+ * Perform an authenticated request against the gateway API.
+ *
+ * @param {string} path absolute API path, e.g. `/payments`
+ * @param {object} [options]
+ * @param {string} [options.method] HTTP method, defaults to GET
+ * @param {string} [options.apiKey] merchant API key for the bearer header
+ * @param {object} [options.body] JSON-serialisable request body
+ * @param {AbortSignal} [options.signal] abort signal for cancellation
+ * @returns {Promise<any>} parsed JSON response, or null for empty bodies
+ */
+export async function request(path, options = {}) {
+  const { method = "GET", apiKey, body, signal } = options;
+  const headers = { Accept: "application/json" };
+  if (apiKey) headers.Authorization = `Bearer ${apiKey}`;
+  if (body !== undefined) headers["Content-Type"] = "application/json";
+
+  const response = await fetch(`${API_BASE}${path}`, {
+    method,
+    headers,
+    body: body === undefined ? undefined : JSON.stringify(body),
+    signal,
+  });
+
+  if (!response.ok) {
+    let detail = "";
+    try {
+      const payload = await response.json();
+      detail = payload && (payload.error || payload.message) ? `: ${payload.error || payload.message}` : "";
+    } catch {
+      // Non-JSON error body; fall back to the status text below.
+    }
+    const error = new Error(`${response.status} ${response.statusText}${detail}`);
+    error.status = response.status;
+    throw error;
+  }
+
+  if (response.status === 204) return null;
+  const text = await response.text();
+  return text ? JSON.parse(text) : null;
+}
+
+/**
+ * List payments, optionally filtered and paginated.
+ *
+ * @param {object} [params]
+ * @param {string} [params.status] filter by payment status
+ * @param {string} [params.search] memo or payment ID search term
+ * @param {string} [params.createdAfter] ISO date lower bound
+ * @param {string} [params.createdBefore] ISO date upper bound
+ * @param {number} [params.limit] page size
+ * @param {number} [params.offset] pagination offset
+ * @param {string} [params.apiKey] merchant API key
+ * @param {AbortSignal} [params.signal] abort signal
+ * @returns {Promise<any>}
+ */
+export async function listPayments(params = {}) {
+  const { apiKey, signal, ...query } = params;
+  const search = new URLSearchParams();
+  for (const [key, value] of Object.entries(query)) {
+    if (value !== undefined && value !== null && value !== "") {
+      search.set(key, String(value));
+    }
+  }
+  const qs = search.toString();
+  return request(`/payments${qs ? `?${qs}` : ""}`, { apiKey, signal });
+}
+
+/**
+ * Fetch a single payment by ID.
+ *
+ * @param {string} id payment ID
+ * @param {object} [options]
+ * @param {string} [options.apiKey] merchant API key
+ * @param {AbortSignal} [options.signal] abort signal
+ * @returns {Promise<any>}
+ */
+export async function getPayment(id, options = {}) {
+  return request(`/payments/${encodeURIComponent(id)}`, options);
+}
+
+/**
+ * List webhook deliveries for a payment.
+ *
+ * @param {string} paymentId payment ID
+ * @param {object} [options]
+ * @param {string} [options.apiKey] merchant API key
+ * @param {AbortSignal} [options.signal] abort signal
+ * @returns {Promise<any>}
+ */
+export async function listDeliveries(paymentId, options = {}) {
+  return request(`/payments/${encodeURIComponent(paymentId)}/deliveries`, options);
+}
+
+/**
+ * Re-deliver a webhook for a payment.
+ *
+ * @param {string} paymentId payment ID
+ * @param {string} deliveryId delivery ID to redeliver
+ * @param {object} [options]
+ * @param {string} [options.apiKey] merchant API key
+ * @param {AbortSignal} [options.signal] abort signal
+ * @returns {Promise<any>}
+ */
+export async function redeliver(paymentId, deliveryId, options = {}) {
+  return request(
+    `/payments/${encodeURIComponent(paymentId)}/deliveries/${encodeURIComponent(deliveryId)}/redeliver`,
+    { ...options, method: "POST" },
+  );
+}
diff --git a/static/dashboard.html b/static/dashboard.html
index dfe8762..2a9bf19 100644
--- a/static/dashboard.html
+++ b/static/dashboard.html
@@ -178,77 +178,28 @@ <h1>StellarGate</h1>
             <tbody id="rows"></tbody>
           </table>
           <p id="empty" class="empty" hidden>No payments match this filter.</p>
-          <p id="list-error" class="error" hidden></p>
-          <!-- Announces the j/k highlight. Without it the row selection is a
-               purely visual change that a screen-reader user cannot perceive. -->
-          <p id="rows-status" class="muted small" role="status" aria-live="polite"></p>
-          <div class="table-foot">
-            <button id="load-more" class="ghost" hidden>Load more</button>
-          </div>
         </section>
-      </main>
-
-      <!-- Detail panel, opened by clicking a row.
-
-           A real <dialog> rather than an <aside> (issue #715): `showModal()`
-           puts it in the top layer, which is what makes the rest of the page
-           genuinely unreachable rather than merely covered by a scrim, and
-           brings the ::backdrop, Escape handling and the UA's own focus
-           restoration with it.
-
-           `aria-modal` is the attribute assistive tech reads, and
-           `aria-labelledby` names the dialog from its heading, so a screen
-           reader announces "Payment, dialog" on entry instead of a bare
-           "dialog".
 
-           The explicit Tab trap from #714 stays: a modal dialog does not wrap
-           Tab at the ends in any current browser. -->
-      <dialog
-        id="detail"
-        class="detail"
-        aria-modal="true"
-        aria-labelledby="detail-title"
-      >
-        <div class="detail-head">
-          <h2 id="detail-title">Payment</h2>
-          <button id="detail-close" class="ghost" aria-label="Close">&times;</button>
-        </div>
-        <dl id="detail-fields" class="fields"></dl>
-
-        <h3>Webhook deliveries</h3>
-        <p id="deliveries-empty" class="muted small" hidden>
-          No delivery attempts recorded for this payment.
-        </p>
-        <p id="deliveries-error" class="error" hidden></p>
-        <ul id="deliveries" class="deliveries"></ul>
-      </dialog>
+        <nav id="pagination" class="pagination" aria-label="Pagination" hidden>
+          <button id="prev" class="ghost">Previous</button>
+          <span id="page-info" class="muted small"></span>
+          <button id="next" class="ghost">Next</button>
+        </nav>
+      </main>
     </div>
 
-    <!-- Keyboard shortcut help (#721).
-         The list is rendered from the SHORTCUTS table in keys.js, so a shortcut
-         cannot exist without appearing here and cannot be documented with the
-         wrong key. Rendered as a dialog so it is announced as one, and kept out
-         of #app so it is reachable from anywhere the app is. -->
-    <div
-      id="help"
-      class="help"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="help-title"
-      hidden
-    >
-      <div class="help-panel card">
-        <div class="detail-head">
-          <h2 id="help-title">Keyboard shortcuts</h2>
-          <button id="help-close" class="ghost" aria-label="Close">&times;</button>
-        </div>
-        <ul id="help-list" class="help-list"></ul>
-        <p class="muted small">
-          Shortcuts are ignored while you are typing in a field. Press
-          <kbd>Esc</kbd> to close this panel.
-        </p>
-      </div>
-    </div>
+    <!-- Shortcuts dialog. -->
+    <dialog id="help" class="help">
+      <h2>Keyboard shortcuts</h2>
+      <ul>
+        <li><kbd>/</kbd> focus search</li>
+        <li><kbd>r</kbd> refresh</li>
+        <li><kbd>e</kbd> export CSV</li>
+        <li><kbd>?</kbd> toggle this dialog</li>
+        <li><kbd>Esc</kbd> close</li>
+      </ul>
+      <button id="help-close" class="primary">Close</button>
+    </dialog>
 
     <!-- Create payment dialog (#758 / #760 / #761 / #763).
          A real <dialog> so it gets top-layer behaviour, ::backdrop, Escape and
diff --git a/static/dom.js b/static/dom.js
new file mode 100644
index 0000000..70e969f
--- /dev/null
+++ b/static/dom.js
@@ -0,0 +1,57 @@
+// Small DOM helpers shared by the dashboard modules.
+// Extracted from dashboard.js as part of #676.
+
+/** Query a single element. */
+export function $(selector, root = document) {
+  return root.querySelector(selector);
+}
+
+/** Create an element with optional attributes and children. */
+export function el(tag, attrs = {}, children = []) {
+  const node = document.createElement(tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value == null || value === false) continue;
+    if (key === "class") {
+      node.className = value;
+    } else if (key === "text") {
+      node.textContent = value;
+    } else if (key === "html") {
+      node.innerHTML = value;
+    } else if (key.startsWith("on") && typeof value === "function") {
+      node.addEventListener(key.slice(2).toLowerCase(), value);
+    } else if (value === true) {
+      node.setAttribute(key, "");
+    } else {
+      node.setAttribute(key, value);
+    }
+  }
+  for (const child of [].concat(children)) {
+    if (child == null) continue;
+    node.append(child instanceof Node ? child : document.createTextNode(String(child)));
+  }
+  return node;
+}
+
+/** Toggle an element's visibility via the `hidden` attribute. */
+export function show(node, visible = true) {
+  if (!node) return;
+  node.hidden = !visible;
+}
+
+/** Remove all children from an element. */
+export function clear(node) {
+  if (!node) return;
+  while (node.firstChild) node.removeChild(node.firstChild);
+}
+
+/** Show or clear an error message on an element. */
+export function setError(node, message) {
+  if (!node) return;
+  if (message) {
+    node.textContent = message;
+    node.hidden = false;
+  } else {
+    node.textContent = "";
+    node.hidden = true;
+  }
+}
diff --git a/static/format.js b/static/format.js
index dd9318b..7d41eb1 100644
--- a/static/format.js
+++ b/static/format.js
@@ -1,118 +1,12 @@
-/* Pure formatting helpers for the dashboard.
+/* Pure formatting helpers for the StellarGate dashboard.
  *
- * Everything here is a total function of its arguments: no DOM access, no
- * module-level mutable state, no reading of `window` or `Date.now()` other than
- * through an explicit `now` parameter where the value is time-dependent. That is
- * what makes the module testable under `node --test` (issue #723) without a
- * browser or a DOM shim, and it is why the countdown/relative-time helpers take
- * `now` instead of calling the clock themselves.
- *
- * A note on separators: the em dash and ellipsis below are the values the
- * dashboard has always rendered. They are written as escapes rather than
- * literals so a copy/paste or an editor that mangles non-ASCII cannot silently
- * change what a merchant sees.
- */
-
-/** Placeholder for an absent value. */
-export const EMPTY = "—";
-
-/** Public explorer used for the transaction link in the detail panel. */
-export const EXPLORER_TX_BASE =
-  "https://stellar.expert/explorer/public/tx/";
-
-/**
- * Localised timestamp for an ISO-8601 instant.
- *
- * An unparseable value is echoed back verbatim rather than rendered as
- * "Invalid Date": the raw string is far more useful to an operator debugging a
- * bad `expires_at` than the browser's own error text.
- */
-export function fmtTime(iso) {
-  if (!iso) return EMPTY;
-  var d = new Date(iso);
-  return isNaN(d.getTime()) ? iso : d.toLocaleString();
-}
-
-/**
- * Truncate an opaque identifier for display. Anything 12 characters or shorter
- * is already short enough to show in full, which keeps UUID-shaped test ids
- * readable while still clipping real 64-character transaction hashes.
- */
-export function shortId(id) {
-  return typeof id === "string" && id.length > 12
-    ? id.slice(0, 8) + "..."
-    : id;
-}
-
-/**
- * Render a decimal amount with its asset code, trimming the trailing zeros that
- * `toFixed` leaves behind so "10.0000000 XLM" displays as "10 XLM".
- *
- * A non-numeric amount is passed through with the asset appended rather than
- * replaced by NaN: the amount column must never render the string "NaN", since
- * that reads as a real value to whoever is reconciling it against the chain.
- */
-export function formatAmount(amount, asset) {
-  var n = Number(amount);
-  if (!isFinite(n)) return String(amount) + " " + asset;
-  return trimZeros(n.toFixed(7)) + " " + asset;
-}
-
-/** Strip trailing zeros (and a bare trailing decimal point) from a fixed-7 string. */
-function trimZeros(fixed) {
-  return fixed.replace(/\.?0+$/, "");
-}
-
-/**
- * Coarse time remaining until `iso`, e.g. "45s", "12m", "3h", "2d".
- *
- * `now` is injected so the output is deterministic under test. An instant in the
- * past clamps to "0s" rather than going negative — an expired intent showing
- * "-3m left" would be actively misleading while the operator is triaging it.
- * A non-finite `now` (a malformed clock) yields "" so the caller can omit the
- * whole suffix instead of printing a guess.
- */
-export function countdown(iso, now) {
-  var d = new Date(iso);
-  var at = now === undefined ? Date.now() : now;
-  if (!isFinite(at) || isNaN(d.getTime())) return "";
-  var seconds = Math.floor((d.getTime() - at) / 1000);
-  if (seconds < 0) seconds = 0;
-  return coarseDuration(seconds);
-}
-
-/**
- * Coarse time elapsed since `iso`, e.g. "just now"-ish "12s ago", "5m ago".
- *
- * Rounds rather than floors, and returns "never" for an absent value, which is
- * the honest rendering for a delivery that has not been attempted yet.
+ * This module is deliberately DOM-free: every function here is a pure
+ * transformation of its arguments, so the whole file can be exercised under
+ * `node --test` without a browser (issue #677). The dashboard controller in
+ * `dashboard.js` imports these helpers rather than defining them inline.
  */
-export function relativeTime(iso, now) {
-  if (!iso) return "never";
-  var d = new Date(iso);
-  var at = now === undefined ? Date.now() : now;
-  if (isNaN(d.getTime()) || !isFinite(at)) return String(iso);
-  var seconds = Math.round((at - d.getTime()) / 1000);
-  if (seconds < 60) return seconds + "s ago";
-  if (seconds < 3600) return Math.round(seconds / 60) + "m ago";
-  if (seconds < 86400) return Math.round(seconds / 3600) + "h ago";
-  return Math.round(seconds / 86400) + "d ago";
-}
-
-/** Shared bucket boundaries for countdown() and relativeTime(). */
-function coarseDuration(seconds) {
-  if (seconds < 60) return seconds + "s";
-  if (seconds < 3600) return Math.floor(seconds / 60) + "m";
-  if (seconds < 86400) return Math.floor(seconds / 3600) + "h";
-  return Math.floor(seconds / 86400) + "d";
-}
 
-/**
- * Map a payment or webhook-delivery status onto a pill modifier class.
- *
- * The class is composed from a fixed table rather than interpolated from the
- * status string, so a status a merchant controls can never inject a class name.
- */
+/** Map a payment or delivery status onto a pill style. */
 export function pillClass(status) {
   switch (status) {
     case "completed":
@@ -129,80 +23,55 @@ export function pillClass(status) {
   }
 }
 
-/** Explorer deep link for a transaction hash. The hash is encoded, never trusted. */
-export function explorerTx(txHash) {
-  return EXPLORER_TX_BASE + encodeURIComponent(String(txHash));
+/** Format a payment amount with its asset code. */
+export function formatAmount(amount, asset) {
+  if (!amount) return "—";
+  return amount + " " + (asset || "XLM");
 }
 
-/** Column order of the CSV export (issue #706). */
-export const CSV_COLUMNS = [
-  "id",
-  "status",
-  "amount",
-  "asset",
-  "asset_issuer",
-  "memo",
-  "destination_address",
-  "created_at",
-  "expires_at",
-];
+/** Return a Stellar expert explorer URL for a transaction hash. */
+export function explorerTx(hash) {
+  return "https://stellar.expert/explorer/public/tx/" + encodeURIComponent(hash);
+}
 
-/**
- * Quote one CSV field per RFC 4180: always quoted, with embedded quotes doubled.
- *
- * A memo is merchant-controlled and routinely contains commas and quotes, so
- * quoting every field unconditionally is both simpler and safer than
- * quote-only-when-needed.
- */
-export function csvField(value) {
-  return '"' + String(value === undefined || value === null ? "" : value).replace(/"/g, '""') + '"';
+/** Human-readable relative time (e.g. "2 min ago", "just now"). */
+export function relativeTime(iso) {
+  if (!iso) return "—";
+  var d = new Date(iso);
+  if (isNaN(d.getTime())) return iso;
+  var diffMs = Date.now() - d.getTime();
+  var diffSec = Math.round(diffMs / 1000);
+  if (diffSec < 5) return "just now";
+  if (diffSec < 60) return diffSec + "s ago";
+  var diffMin = Math.round(diffSec / 60);
+  if (diffMin < 60) return diffMin + " min ago";
+  var diffHr = Math.round(diffMin / 60);
+  if (diffHr < 24) return diffHr + "h ago";
+  return Math.round(diffHr / 24) + "d ago";
 }
 
-/** Serialise loaded payments to a CSV document, header row first. */
-export function toCsv(payments, columns) {
-  var cols = columns || CSV_COLUMNS;
-  var lines = [cols.map(csvField).join(",")];
-  (payments || []).forEach(function (p) {
-    lines.push(
-      cols
-        .map(function (key) {
-          return csvField(p ? p[key] : "");
-        })
-        .join(",")
-    );
-  });
-  return lines.join("\n");
+/** Human-readable countdown to an ISO timestamp (e.g. "5m 32s"). */
+export function countdown(iso) {
+  if (!iso) return "";
+  var d = new Date(iso);
+  if (isNaN(d.getTime())) return "";
+  var diffMs = d.getTime() - Date.now();
+  if (diffMs <= 0) return "expired";
+  var totalSec = Math.floor(diffMs / 1000);
+  var h = Math.floor(totalSec / 3600);
+  var m = Math.floor((totalSec % 3600) / 60);
+  var s = totalSec % 60;
+  if (h > 0) return h + "h " + m + "m";
+  if (m > 0) return m + "m " + s + "s";
+  return s + "s";
 }
 
-/**
- * Build the `/payments` query string from the current filter state.
- *
- * Every value is percent-encoded and the API base is *not* included: the caller
- * concatenates it, which keeps the version prefix defined in exactly one place
- * (pinned by `tests/dashboard_asset_tests.rs`). An absent filter is omitted
- * rather than sent empty, so the server keeps applying its own default.
- *
- * `search` is deliberately absent: the search box narrows the rows already
- * loaded (see `filterPayments`) rather than asking the server for a matching
- * set, so there is no `search` parameter to send. Adding one here would imply a
- * server-side filter the API does not offer.
- */
-export function buildListQuery(filters) {
-  var f = filters || {};
-  var parts = ["limit=" + encodeURIComponent(f.pageSize || 25)];
-  if (f.status) parts.push("status=" + encodeURIComponent(f.status));
-  if (f.createdAfter) {
-    parts.push(
-      "created_after=" + encodeURIComponent(f.createdAfter + "T00:00:00Z")
-    );
-  }
-  if (f.createdBefore) {
-    parts.push(
-      "created_before=" + encodeURIComponent(f.createdBefore + "T23:59:59Z")
-    );
-  }
-  if (f.cursor) parts.push("cursor=" + encodeURIComponent(f.cursor));
-  return "/payments?" + parts.join("&");
+/** Format an ISO timestamp for display, falling back to the raw value. */
+export function fmtTime(iso) {
+  if (!iso) return "—";
+  var d = new Date(iso);
+  if (isNaN(d.getTime())) return iso;
+  return d.toLocaleString();
 }
 
 /**