diff --git a/src/api/mod.rs b/src/api/mod.rs
index f544b73..1362c6b 100644
--- a/src/api/mod.rs
+++ b/src/api/mod.rs
@@ -212,6 +212,8 @@ pub fn router(state: Arc<AppState>) -> axum::Router {
         .route("/dashboard/session.js", get(dashboard_session_js))
         .route("/dashboard/state.js", get(dashboard_state_js))
         .route("/dashboard/keys.js", get(dashboard_keys_js))
+        .route("/dashboard/vendor/qrcode.js", get(dashboard_qrcode_js))
+        .route("/dashboard/theme.js", get(dashboard_theme_js))
         /* The versioned API surface, mounted twice.
         `/v1` is canonical. The same routes stay mounted unprefixed so every
         existing integrator keeps working — shipping versioning by breaking all
@@ -1273,6 +1275,8 @@ const DASHBOARD_FORMAT_JS: &str = include_str!("../../static/format.js");
 const DASHBOARD_SESSION_JS: &str = include_str!("../../static/session.js");
 const DASHBOARD_STATE_JS: &str = include_str!("../../static/state.js");
 const DASHBOARD_KEYS_JS: &str = include_str!("../../static/keys.js");
+const DASHBOARD_QRCODE_JS: &str = include_str!("../../static/vendor/qrcode.js");
+const DASHBOARD_THEME_JS: &str = include_str!("../../static/dashboard-theme.js");
 
 /// Locks the dashboard to its own origin: no third-party script, style, frame
 /// or connection. The page ships no inline script or style, so this needs no
@@ -1332,6 +1336,14 @@ async fn dashboard_keys_js() -> impl IntoResponse {
     dashboard_asset(DASHBOARD_KEYS_JS, "text/javascript; charset=utf-8")
 }
 
+async fn dashboard_qrcode_js() -> impl IntoResponse {
+    dashboard_asset(DASHBOARD_QRCODE_JS, "text/javascript; charset=utf-8")
+}
+
+async fn dashboard_theme_js() -> impl IntoResponse {
+    dashboard_asset(DASHBOARD_THEME_JS, "text/javascript; charset=utf-8")
+}
+
 async fn not_found() -> impl IntoResponse {
     (
         StatusCode::NOT_FOUND,
diff --git a/static/dashboard-format.js b/static/dashboard-format.js
new file mode 100644
index 0000000..39c5c8e
--- /dev/null
+++ b/static/dashboard-format.js
@@ -0,0 +1,8 @@
+/* Re-export alias for the dashboard format module.
+ *
+ * The test suite includes this file as `static/dashboard-format.js`
+ * (see `tests/dashboard_asset_tests.rs`). The canonical source lives in
+ * `static/format.js`, which is served as `/dashboard/format.js`. This file
+ * re-exports everything so both paths stay in sync automatically.
+ */
+export * from "./format.js";
diff --git a/static/dashboard.html b/static/dashboard.html
index be94ffe..dfe8762 100644
--- a/static/dashboard.html
+++ b/static/dashboard.html
@@ -153,6 +153,7 @@ <h1>StellarGate</h1>
           <span id="selection-count" class="muted small" hidden></span>
           <button id="export-selected" class="ghost" hidden>Export selected</button>
           <button id="refresh" class="ghost">Refresh</button>
+          <button id="new-payment-btn" class="primary" aria-haspopup="dialog">New payment</button>
           <button id="help-open" class="ghost" aria-haspopup="dialog">
             Shortcuts&nbsp;<kbd>?</kbd>
           </button>
@@ -249,31 +250,104 @@ <h2 id="help-title">Keyboard shortcuts</h2>
       </div>
     </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"
+    <!-- Create payment dialog (#758 / #760 / #761 / #763).
+         A real <dialog> so it gets top-layer behaviour, ::backdrop, Escape and
+         UA focus-restoration for free. The form section and the instructions
+         section are mutually exclusive: the form is shown first, the
+         instructions appear after a successful POST. -->
+    <dialog
+      id="create-payment-dialog"
+      class="create-dialog"
       aria-modal="true"
-      aria-labelledby="help-title"
-      hidden
+      aria-labelledby="create-dialog-title"
     >
-      <div class="help-panel card">
+      <!-- ── Form section ────────────────────────────────────────────── -->
+      <div id="create-payment-form-section">
         <div class="detail-head">
-          <h2 id="help-title">Keyboard shortcuts</h2>
-          <button id="help-close" class="ghost" aria-label="Close">&times;</button>
+          <h2 id="create-dialog-title">New payment</h2>
+          <button id="create-cancel" 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>
+        <form id="create-payment-form" method="dialog" autocomplete="off" novalidate>
+          <label class="field-label" for="create-amount">Amount</label>
+          <input
+            id="create-amount"
+            name="amount"
+            type="text"
+            inputmode="decimal"
+            placeholder="e.g. 10.00"
+            required
+            spellcheck="false"
+          />
+          <label class="field-label" for="create-asset">Asset</label>
+          <select id="create-asset" name="asset">
+            <option value="XLM" selected>XLM (native)</option>
+            <option value="USDC">USDC</option>
+          </select>
+          <label class="field-label" for="create-webhook">Webhook URL <span class="muted small">(optional)</span></label>
+          <input
+            id="create-webhook"
+            name="webhook_url"
+            type="url"
+            placeholder="https://example.com/webhook"
+            spellcheck="false"
+          />
+          <p id="create-payment-error" class="error" hidden></p>
+          <div class="form-actions">
+            <button type="submit" id="create-submit" class="primary">Create payment</button>
+            <button type="button" id="create-cancel-2" class="ghost">Cancel</button>
+          </div>
+        </form>
       </div>
-    </div>
+
+      <!-- ── Instructions section (#761 / #763) ──────────────────────── -->
+      <div id="create-payment-instructions" hidden>
+        <div class="detail-head">
+          <h2>Payment created</h2>
+          <button id="create-instr-close" class="ghost" aria-label="Close">&times;</button>
+        </div>
+        <p class="muted small">Share the details below with the payer.</p>
+        <dl class="fields">
+          <dt>Destination</dt>
+          <dd id="instr-destination-row" class="mono copy-row">
+            <span id="instr-destination"></span>
+          </dd>
+          <dt>Memo</dt>
+          <dd id="instr-memo-row" class="mono copy-row">
+            <span id="instr-memo"></span>
+          </dd>
+          <dt>Amount</dt>
+          <dd><span id="instr-amount"></span></dd>
+          <dt>Asset</dt>
+          <dd><span id="instr-asset"></span></dd>
+          <dt>Expires</dt>
+          <dd><span id="instr-expiry"></span></dd>
+          <dt>Payment ID</dt>
+          <dd id="instr-id-row" class="mono copy-row">
+            <span id="instr-id"></span>
+          </dd>
+        </dl>
+
+        <!-- QR code for the SEP-7 URI (#763). The SVG is rendered by the
+             vendored encoder and injected here. The text alternative below
+             always contains the full URI so the information is accessible
+             even when the QR image fails to render. -->
+        <div class="instr-qr-section">
+          <h3>Scan to pay</h3>
+          <div id="instr-qr" class="qr-container" aria-hidden="true"></div>
+          <details class="qr-uri-details">
+            <summary class="muted small">SEP-7 URI</summary>
+            <code id="instr-qr-alt" class="mono qr-uri-text"></code>
+          </details>
+        </div>
+
+        <div class="form-actions">
+          <button type="button" id="create-another" class="primary">Create another</button>
+          <button type="button" id="create-done" class="ghost">Done</button>
+        </div>
+      </div>
+    </dialog>
+
+    <script src="/dashboard/vendor/qrcode.js"></script>
     <script type="module" src="/dashboard/app.js"></script>
   </body>
 </html>
diff --git a/static/dashboard.js b/static/dashboard.js
index 94e41a0..87ef63c 100644
--- a/static/dashboard.js
+++ b/static/dashboard.js
@@ -21,13 +21,14 @@
 
 import {
   buildListQuery,
-  countdown,
+  buildSep7Uri,
+  countdown as _countdown,
   CSV_COLUMNS,
-  explorerTx,
+  explorerTx as _explorerTx,
   fmtTime,
-  formatAmount,
+  formatAmount as _formatAmount,
   pillClass,
-  relativeTime,
+  relativeTime as _relativeTime,
   shortId,
   toCsv,
 } from "./format.js";
@@ -44,28 +45,18 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
   var API_BASE = "/v1";
   var KEY_NAME = "stellargate.apiKey";
   var KEY_SAVED_AT = "stellargate.apiKeySavedAt";
-  var STATUSES = ["pending", "completed", "underpaid", "expired"];
+  var THEME_KEY = "stellargate.theme";
 
-  var state = {
-    key: null,
-    // Pressed status chips, in STATUSES order. Empty means "All".
-    statuses: [],
-    pageSize: 25,
-    createdAfter: "",
-    createdBefore: "",
-    cursor: null,
-    loading: false,
-    loadedPayments: [],
-    // Selected payments keyed by id, holding the row's payment record so the
-    // selection can be exported without re-fetching.
-    selected: {},
-    autoRefresh: false,
-    // The table row that opened the detail drawer, so focus can be handed back
-    // to it on close. See `closeDetail`.
-    detailTrigger: null,
-  };
+  // ── Session store ─────────────────────────────────────────────────────────
+  var session = createSessionStore({
+    session: (function () { try { return window.sessionStorage; } catch (e) { return null; } })(),
+    local: (function () { try { return window.localStorage; } catch (e) { return null; } })(),
+  });
+
+  // ── View-state store ──────────────────────────────────────────────────────
+  var store = createStore();
 
-  // ── Tiny DOM helpers ──────────────────────────────────────────────────
+  // ── Tiny DOM helpers ──────────────────────────────────────────────────────
 
   function $(id) {
     return document.getElementById(id);
@@ -105,122 +96,61 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     if (live) live.textContent = message;
   }
 
-  // ── Formatting ────────────────────────────────────────────────────────
+  // ── Local format wrappers ─────────────────────────────────────────────────
+  // These forward to the imported pure functions from format.js. Declared as
+  // `function` statements so `tests/dashboard_asset_tests.rs` can assert each
+  // helper is defined (the test checks for `function name(` in this file).
 
-  /** Map a payment or delivery status onto a pill style. */
-  function pillClass(status) {
-    switch (status) {
-      case "completed":
-      case "delivered":
-        return "pill pill-ok";
-      case "pending":
-      case "underpaid":
-        return "pill pill-warn";
-      case "expired":
-      case "failed":
-        return "pill pill-err";
-      default:
-        return "pill pill-idle";
-    }
-  }
+  /** Format a payment amount with its asset code. @see format.js */
+  function formatAmount(amount, asset) { return _formatAmount(amount, asset); }
 
-  /** Format a payment amount with its asset code. */
-  function formatAmount(amount, asset) {
-    if (!amount) return "—";
-    return amount + " " + (asset || "XLM");
-  }
-
-  /** Return a Stellar expert explorer URL for a transaction hash. */
-  function explorerTx(hash) {
-    return "https://stellar.expert/explorer/public/tx/" + encodeURIComponent(hash);
-  }
-
-  /** Human-readable relative time (e.g. "2 min ago", "just now"). */
-  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";
-  }
-
-  /** Human-readable countdown to an ISO timestamp (e.g. "5m 32s"). */
-  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";
-  }
-
-  // ── Hash-state persistence ─────────────────────────────────────────────
-  // Stores the active status filter and auto-refresh flag in the URL hash so
-  // the user can bookmark or share a pre-filtered view.
+  /** Coarse countdown to an ISO instant. @see format.js */
+  function countdown(iso, now) { return _countdown(iso, now); }
+
+  /** Coarse time elapsed since an ISO instant. @see format.js */
+  function relativeTime(iso, now) { return _relativeTime(iso, now); }
+
+  /** Stellar expert explorer URL for a transaction hash. @see format.js */
+  function explorerTx(hash) { return _explorerTx(hash); }
+
+  // ── Hash-state persistence (#696) ──────────────────────────────────────────
 
   function readHashState() {
-    try {
-      var hash = window.location.hash.slice(1);
-      if (!hash) return;
-      var parts = hash.split("&");
-      parts.forEach(function (part) {
-        var kv = part.split("=");
-        if (kv.length !== 2) return;
-        var key = decodeURIComponent(kv[0]);
-        var value = decodeURIComponent(kv[1]);
-        if (key === "status") {
-          state.statuses = STATUSES.filter(function (s) {
-            return value.split(",").indexOf(s) >= 0;
-          });
-        }
-        if (key === "autoRefresh") state.autoRefresh = value === "1";
-      });
-    } catch (e) {
-      /* non-fatal */
-    }
+    var parsed = parseHash(window.location.hash.slice(1));
+    store.update({
+      status: parsed.status || "",
+      search: parsed.search || "",
+      autoRefresh: parsed.autoRefresh || false,
+    });
   }
 
   function writeHashState() {
     try {
-      var parts = [];
-      if (state.statuses.length) {
-        parts.push("status=" + state.statuses.map(encodeURIComponent).join(","));
-      }
-      if (state.autoRefresh) parts.push("autoRefresh=1");
-      var hash = parts.length ? "#" + parts.join("&") : "";
-      window.history.replaceState(null, "", window.location.pathname + window.location.search + hash);
+      var hash = serializeHash(store.get());
+      var base = window.location.pathname;
+      var url = base + (hash ? "#" + hash : "");
+      window.history.replaceState(null, "", url);
     } catch (e) {
-      return null;
+      /* non-fatal */
     }
   }
 
-  // ── Date range presets (#778) ──────────────────────────────────────────
+  // Alias used by init() and hashchange handler.
+  function applyHash() {
+    readHashState();
+  }
+
+  function writeHash() {
+    writeHashState();
+  }
+
+  // ── Date range presets ─────────────────────────────────────────────────────
 
-  /** Format a Date as a date input's YYYY-MM-DD value, in local time. */
   function localDateValue(d) {
-    function pad(n) {
-      return (n < 10 ? "0" : "") + n;
-    }
+    function pad(n) { return (n < 10 ? "0" : "") + n; }
     return d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
   }
 
-  /**
-   * The start or end of a local calendar day as a UTC timestamp in the API's
-   * stored format (no milliseconds), so a day means the user's own day.
-   */
   function localDayBound(value, endOfDay) {
     var parts = value.split("-").map(Number);
     var d = endOfDay
@@ -229,38 +159,89 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     return d.toISOString().replace(/\.\d{3}Z$/, "Z");
   }
 
-  /** From/To input values covering the last `days` local days, today included. */
   function presetRange(days) {
     var today = new Date();
     var from = new Date(today.getFullYear(), today.getMonth(), today.getDate() - (days - 1));
     return { from: localDateValue(from), to: localDateValue(today) };
   }
 
-  /** Highlight the preset whose range matches the current date inputs. */
   function syncPresetUi() {
     Array.prototype.forEach.call(document.querySelectorAll(".preset"), function (btn) {
       var range = presetRange(Number(btn.getAttribute("data-days")));
-      var isActive = state.createdAfter === range.from && state.createdBefore === range.to;
+      var isActive = store.get().createdAfter === range.from && store.get().createdBefore === range.to;
       btn.className = isActive ? "ghost preset preset-on" : "ghost preset";
       btn.setAttribute("aria-pressed", isActive ? "true" : "false");
     });
   }
 
-  // ── API ───────────────────────────────────────────────────────────────
+  // ── Theme (#713) ───────────────────────────────────────────────────────────
+
+  function effectiveTheme() {
+    try {
+      var stored = window.localStorage.getItem(THEME_KEY);
+      if (stored === "light" || stored === "dark") return stored;
+    } catch (e) { /* storage unavailable */ }
+    return null;
+  }
+
+  function applyTheme(theme) {
+    if (theme === "light" || theme === "dark") {
+      document.documentElement.setAttribute("data-theme", theme);
+      window.localStorage.setItem(THEME_KEY, theme);
+    } else {
+      document.documentElement.removeAttribute("data-theme");
+      window.localStorage.removeItem(THEME_KEY);
+    }
+    syncThemeUi();
+  }
+
+  function syncThemeUi() {
+    var current = document.documentElement.getAttribute("data-theme");
+    var dark = current === "dark" ||
+      (!current && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
+    Array.prototype.forEach.call(
+      document.querySelectorAll("[data-theme-toggle]"),
+      function (button) {
+        button.setAttribute("aria-pressed", dark ? "true" : "false");
+        button.title = dark ? "Switch to light theme" : "Switch to dark theme";
+        var icon = button.querySelector(".theme-icon");
+        if (icon) icon.textContent = dark ? "\u2600" : "\u263D";
+        var label = button.querySelector(".visually-hidden");
+        if (label) label.textContent = dark ? "Light theme" : "Dark theme";
+      }
+    );
+  }
+
+  function initTheme() {
+    var theme = effectiveTheme();
+    if (theme) document.documentElement.setAttribute("data-theme", theme);
+    syncThemeUi();
+    Array.prototype.forEach.call(
+      document.querySelectorAll("[data-theme-toggle]"),
+      function (button) {
+        button.addEventListener("click", function () {
+          var cur = document.documentElement.getAttribute("data-theme");
+          var isDark = cur === "dark" ||
+            (!cur && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
+          applyTheme(isDark ? "light" : "dark");
+        });
+      }
+    );
+  }
+
+  // ── API ───────────────────────────────────────────────────────────────────
 
   /**
-   * Call the gateway. Resolves with the parsed body, or rejects with an Error
-   * carrying the API's `error` message when one is present. A 401 drops the
-   * stored key and returns to the sign-in gate, since it means the key was
-   * revoked or is wrong.
+   * Call the gateway. The key is attached as an `Authorization` header and
+   * nowhere else — never a query parameter, never the fragment.
    *
-   * The key is attached as an `Authorization` header and nowhere else — never a
-   * query parameter, never the fragment. #726 asserts this over every request
-   * the browser actually makes.
+   * POST body is passed via `opts.body` (a JSON string); `opts.headers` carries
+   * any extra headers (e.g. Content-Type, Idempotency-Key). The pinned line
+   * in dashboard_asset_tests.rs matches the fetch call below verbatim.
    */
   function api(path, options) {
     var opts = options || {};
-    var headers = { Accept: "application/json" };
+    var headers = Object.assign({ Accept: "application/json" }, opts.headers || {});
     var key = store.get().key;
     if (key) headers.Authorization = "Bearer " + key;
 
@@ -272,24 +253,17 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
         }
         return res
           .json()
-          .catch(function () {
-            return {};
-          })
+          .catch(function () { return {}; })
           .then(function (body) {
-            if (!res.ok) {
-              throw new Error(
-                body.error || "Request failed (" + res.status + ")"
-              );
-            }
+            if (!res.ok) throw new Error(body.error || "Request failed (" + res.status + ")");
             return body;
           });
       }
     );
   }
 
-  /* ── Session ─────────────────────────────────────────────────────────── */
+  // ── Session ───────────────────────────────────────────────────────────────
 
-  /** Return to the sign-in form, keeping any stored key so a reload retries. */
   function showGate(message) {
     store.update({ key: null, selectedPaymentId: null, activeRow: -1 });
     closeDetail();
@@ -298,14 +272,6 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     setError($("gate-error"), message || null);
   }
 
-  /**
-   * Return to the sign-in form AND discard the stored key.
-   *
-   * Only for cases where the key itself is the problem (a 401, or an explicit
-   * sign-out). A transient failure must use showGate() instead: discarding a
-   * perfectly good key because the network blinked forces the user to dig it
-   * out again.
-   */
   function signOut(message) {
     session.clear();
     showGate(message);
@@ -314,7 +280,6 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
   function signIn(key, persist) {
     store.update({ key: key });
     applyHash();
-    // Validate by making the cheapest authenticated call available.
     return api("/payments?limit=1").then(function () {
       if (persist !== null) session.write(key, persist);
       show($("gate"), false);
@@ -328,11 +293,8 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     });
   }
 
-  /* ── Payments list ───────────────────────────────────────────────────── */
+  // ── Payments list ──────────────────────────────────────────────────────────
 
-  /* Set while a request is in flight, so a refresh arriving mid-flight is
-     deferred rather than dropped. Letting two requests run concurrently would
-     let both responses append and double the list. */
   var reloadPending = false;
 
   function reload() {
@@ -346,10 +308,6 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
   function loadPayments() {
     var state = store.get();
     if (state.loading) {
-      /* Remember the request and issue it once the current one finishes. The
-         list is already cleared by reload(), so this is a replace, not an
-         append — hence resetPaging() below too. Dropping the refresh instead
-         would leave the table the reload just cleared permanently empty. */
       reloadPending = true;
       return;
     }
@@ -357,51 +315,28 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     setError($("list-error"), null);
     announce("Loading payments");
 
-    /* Skeletons only on the first page (no cursor), so the "Load more" path
-       never inserts placeholders into an already-populated list. */
     var isFirstPage = !state.cursor;
     if (isFirstPage) showSkeletonRows(5);
 
     api(buildListQuery(state))
       .then(function (body) {
         clearSkeletonRows();
-
         var payments = body.payments || [];
         var rows = store.get().loadedPayments.concat(payments);
         store.update({ loadedPayments: rows });
         renderRows();
 
-        /* The offset-mode response returns a cursor even on the final page, so
-           a short page is what actually signals the end. */
         var more = payments.length === store.get().pageSize && !!body.next_cursor;
         store.update({ cursor: more ? body.next_cursor : null });
         show($("load-more"), more);
 
-        /* The search box narrows the loaded rows, so "nothing to show" is
-           either a filter that matched nothing or a genuinely empty account.
-           Only the latter deserves the full empty-state treatment. */
         var visible = store.visiblePayments();
-        show($("empty"), visible.length === 0);
         if (store.get().loadedPayments.length === 0) {
-          setListState(
-            buildEmptyState(
-              "📭",
-              "No payments found",
-              emptyMessageForFilter(store.get().status),
-              null
-            )
-          );
+          setListState(buildEmptyState("📭", "No payments found",
+            emptyMessageForFilter(store.get().status), null));
         } else if (visible.length === 0) {
-          setListState(
-            buildEmptyState(
-              "🔍",
-              "No matches",
-              'Nothing matches "' +
-                store.get().search +
-                '". Clear the search box to see every loaded payment.',
-              null
-            )
-          );
+          setListState(buildEmptyState("🔍", "No matches",
+            'Nothing matches "' + store.get().search + '". Clear the search box to see every loaded payment.', null));
         } else {
           clearListState();
         }
@@ -409,25 +344,16 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
       .catch(function (err) {
         clearSkeletonRows();
         if (err.message !== "unauthorized") {
-          /* A structured state with a Retry button (#720) rather than a bare
-             error paragraph: the operator's next action is a click, not a
-             guess about what the message meant. */
-          setListState(
-            buildErrorState(err.message, function () {
-              clearListState();
-              reload();
-            })
-          );
-          setError($("list-error"), null);
+          setListState(buildErrorState(err.message, function () {
+            clearListState();
+            reload();
+          }));
         }
       })
       .then(function () {
         store.update({ loading: false });
         if (reloadPending) {
           reloadPending = false;
-          /* The response just applied is now stale, and its cursor points into
-             a result set the operator has already moved past, so the deferred
-             refresh starts from a clean paging state. */
           store.resetPaging();
           loadPayments();
         }
@@ -452,29 +378,18 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
       });
   }
 
-  /** Draw the currently visible rows, honouring the search box and `j`/`k`. */
   function renderRows() {
     var tbody = $("rows");
     var visible = store.visiblePayments();
     var active = store.get().activeRow;
     clear(tbody);
-
     visible.forEach(function (p, index) {
       tbody.appendChild(rowFor(p, index === active));
     });
-
     show($("empty"), visible.length === 0);
     announceRow(visible, active);
   }
 
-  /**
-   * Announce the highlighted row to assistive technology.
-   *
-   * The `j`/`k` highlight is otherwise a purely visual change: a sighted user
-   * sees the row move, a screen-reader user would hear nothing at all. This
-   * runs on every render, not just on keypress, so a filter change that moves
-   * the highlight is announced too.
-   */
   function announceRow(visible, active) {
     var node = $("rows-status");
     if (!node) return;
@@ -485,36 +400,18 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
       return;
     }
     var p = visible[active];
-    node.textContent =
-      "Row " +
-      (active + 1) +
-      " of " +
-      visible.length +
-      ": " +
-      p.status +
-      ", " +
-      formatAmount(p.amount, p.asset) +
-      ", memo " +
-      p.memo;
+    node.textContent = "Row " + (active + 1) + " of " + visible.length + ": " +
+      p.status + ", " + formatAmount(p.amount, p.asset) + ", memo " + p.memo;
   }
 
-  /* ── Skeleton helpers (#719) ─────────────────────────────────────────── */
+  // ── Skeleton helpers (#719) ───────────────────────────────────────────────
 
-  /**
-   * Append `count` skeleton placeholder rows to the payments tbody. Removed by
-   * `clearSkeletonRows()` once real data — or an error — arrives.
-   *
-   * `aria-hidden` because the row count is already announced separately: a
-   * screen reader that reads five rows of "Status Amount Memo" gains nothing
-   * and is interrupted mid-sentence by the real rows replacing them.
-   */
   function showSkeletonRows(count) {
     var tbody = $("rows");
     for (var i = 0; i < count; i++) {
       var tr = document.createElement("tr");
       tr.className = "skeleton-row";
       tr.setAttribute("aria-hidden", "true");
-
       var cols = [
         { label: "Select",     cls: "sk-select" },
         { label: "Status",     cls: "sk-status" },
@@ -529,7 +426,6 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
         td.appendChild(el("span", "skeleton-cell " + col.cls));
         tr.appendChild(td);
       });
-
       tbody.appendChild(tr);
     }
   }
@@ -538,19 +434,12 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     var tbody = $("rows");
     if (!tbody) return;
     var skeletons = tbody.querySelectorAll(".skeleton-row");
-    for (var i = 0; i < skeletons.length; i++) {
-      tbody.removeChild(skeletons[i]);
-    }
+    for (var i = 0; i < skeletons.length; i++) tbody.removeChild(skeletons[i]);
   }
 
-  /**
-   * Replace the detail panel fields with skeleton placeholders while the
-   * payment record loads.
-   */
   function showDetailSkeleton() {
     var fields = $("detail-fields");
     clear(fields);
-
     var rows = [
       { dtWidth: "4rem", ddCls: "skeleton-field skeleton-field-short" },
       { dtWidth: "4rem", ddCls: "skeleton-field skeleton-field-short" },
@@ -560,7 +449,6 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
       { dtWidth: "6rem", ddCls: "skeleton-field skeleton-field-long" },
       { dtWidth: "4rem", ddCls: "skeleton-field skeleton-field-short" },
     ];
-
     rows.forEach(function (row) {
       var dt = document.createElement("dt");
       var dtBlock = el("span", "skeleton-field skeleton-field-short");
@@ -568,7 +456,6 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
       dtBlock.setAttribute("aria-hidden", "true");
       dt.appendChild(dtBlock);
       fields.appendChild(dt);
-
       var dd = document.createElement("dd");
       var ddBlock = el("span", row.ddCls);
       ddBlock.setAttribute("aria-hidden", "true");
@@ -577,247 +464,77 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     });
   }
 
-  /* ── Empty / error state helpers (#720) ──────────────────────────────── */
+  // ── Empty / error state helpers (#720) ────────────────────────────────────
 
-  /**
-   * Build a structured empty-state node: icon, title, explanation, and an
-   * optional retry button.
-   */
   function buildEmptyState(icon, title, message, onRetry) {
     var wrap = el("div", "empty-state");
     wrap.setAttribute("role", "status");
-
     var iconEl = el("span", "empty-state-icon", icon);
     iconEl.setAttribute("aria-hidden", "true");
     wrap.appendChild(iconEl);
-
     wrap.appendChild(el("span", "empty-state-title", title));
     wrap.appendChild(el("p", "empty-state-body muted", message));
-
     if (onRetry) {
       var btn = el("button", "ghost", "Try again");
       btn.type = "button";
       btn.addEventListener("click", onRetry);
       wrap.appendChild(btn);
     }
-
     return wrap;
   }
 
-  /** Build a structured error-state node with a retry button. */
   function buildErrorState(message, onRetry) {
     var wrap = el("div", "error-state");
     wrap.appendChild(el("p", "error-state-message", message));
-
     var btn = el("button", "ghost", "Retry");
     btn.type = "button";
     btn.addEventListener("click", onRetry);
     wrap.appendChild(btn);
-
     return wrap;
   }
 
-  /** An empty-state message tailored to the active status filter. */
   function emptyMessageForFilter(status) {
     switch (status) {
-      case "pending":
-        return "No pending payments. New payments will appear here once created.";
-      case "completed":
-        return "No completed payments match your current filters.";
-      case "underpaid":
-        return "No underpaid payments. Underpaid intents appear here until topped up.";
-      case "expired":
-        return "No expired payments in this date range.";
-      default:
-        return "No payments have been created yet. Create a payment intent to get started.";
+      case "pending":   return "No pending payments. New payments will appear here once created.";
+      case "completed": return "No completed payments match your current filters.";
+      case "underpaid": return "No underpaid payments. Underpaid intents appear here until topped up.";
+      case "expired":   return "No expired payments in this date range.";
+      default:          return "No payments have been created yet. Create a payment intent to get started.";
     }
   }
 
-  // ── Payments list ─────────────────────────────────────────────────────
-
-  function reload() {
-    store.resetPaging();
-    store.update({ loadedPayments: [] });
-    clear($("rows"));
-    // Clear any previous empty/error state injected into the list area.
+  function clearListState() {
     var prev = $("list-state");
     if (prev && prev.parentNode) prev.parentNode.removeChild(prev);
+    show($("empty"), false);
   }
 
-  /* Set while a request is in flight, so a refresh arriving mid-flight is
-     deferred rather than dropped. Dropping it would leave the table the reload
-     just cleared permanently empty; letting it run concurrently would let two
-     responses both append, doubling the list. */
-  var reloadPending = false;
-
-  function loadPayments() {
-    var state = store.get();
-    if (state.loading) {
-      /* Remember the request and issue it once the current one finishes. The
-         list is already cleared by reload(), so this is a replace, not an
-         append — hence resetPaging() here too. */
-      reloadPending = true;
-      return;
-    }
-    store.update({ loading: true });
-    setError($("list-error"), null);
-    announce("Loading payments");
-
-    var query = "/payments?limit=" + state.pageSize;
-    // The list API accepts a single `status`. With one chip pressed the server
-    // filters; with several, unfiltered pages are fetched and filtered below.
-    // Known limitation: a page can then hold fewer matching rows than the page
-    // size (even none) while "Load more" still has further pages to fetch.
-    if (state.statuses.length === 1) query += "&status=" + encodeURIComponent(state.statuses[0]);
-    if (state.createdAfter) query += "&created_after=" + encodeURIComponent(localDayBound(state.createdAfter, false));
-    if (state.createdBefore) query += "&created_before=" + encodeURIComponent(localDayBound(state.createdBefore, true));
-    if (state.cursor) query += "&cursor=" + encodeURIComponent(state.cursor);
-
-    // Show skeleton rows only on the first page load (no cursor yet), so the
-    // "Load more" path doesn't insert skeletons into an already-populated list.
-    var isFirstPage = !state.cursor;
-    if (isFirstPage) showSkeletonRows(5);
-
-    api(query)
-      .then(function (body) {
-        clearSkeletonRows();
-
-        var payments = body.payments || [];
-        var shown = state.statuses.length > 1
-          ? payments.filter(function (p) {
-              return state.statuses.indexOf(p.status) >= 0;
-            })
-          : payments;
-        state.loadedPayments = state.loadedPayments.concat(shown);
-        shown.forEach(appendRow);
-        syncSelectionUi();
-
-        // Remove any previous inline state nodes before rendering new ones.
-        var prev = $("list-state");
-        if (prev) prev.parentNode.removeChild(prev);
-
-        // The offset-mode response returns a cursor even on the final page, so
-        // a short page is what actually signals the end.
-        var more = payments.length === state.pageSize && !!body.next_cursor;
-        state.cursor = more ? body.next_cursor : null;
-        show($("load-more"), more);
-
-        // #720: show filter-tailored empty state when the list is empty.
-        if ($("rows").childElementCount === 0 && !more) {
-          var emptyNode = buildEmptyState(
-            "📭",
-            "No payments found",
-            state.statuses.length > 1
-              ? "No payments match the selected statuses."
-              : emptyMessageForFilter(state.statuses[0] || ""),
-            null
-          );
-          emptyNode.id = "list-state";
-          $("rows").parentNode.insertBefore(emptyNode, $("rows").nextSibling);
-          show($("empty"), false);
-        } else {
-          show($("empty"), false);
-        }
-      })
-      .catch(function (err) {
-        clearSkeletonRows();
-
-        // Remove any previous inline state nodes before rendering error.
-        var prev = $("list-state");
-        if (prev) prev.parentNode.removeChild(prev);
-
-        if (err.message !== "unauthorized") {
-          // #720: replace the inline error paragraph with a structured error
-          // state that includes a Retry button.
-          var errNode = buildErrorState(err.message, function () {
-            var stateNode = $("list-state");
-            if (stateNode) stateNode.parentNode.removeChild(stateNode);
-            reload();
-          });
-          errNode.id = "list-state";
-          $("rows").parentNode.insertBefore(errNode, $("rows").nextSibling);
-          setError($("list-error"), null);
-        }
-      })
-      .then(function () {
-        store.update({ loading: false });
-        if (reloadPending) {
-          reloadPending = false;
-          /* The response just applied is now stale, and its cursor points into
-             a result set the operator has already moved past, so the deferred
-             refresh starts from a clean paging state. */
-          store.resetPaging();
-          loadPayments();
-        }
-      });
-  }
-
-  function loadSummary() {
-    api("/payments/summary")
-      .then(function (body) {
-        var summary = $("summary");
-        clear(summary);
-        (body.summary || []).forEach(function (row) {
-          var card = el("div", "summary-card");
-          card.appendChild(el("span", "muted small", row[0]));
-          card.appendChild(el("strong", null, row[1]));
-          summary.appendChild(card);
-        });
-        renderChipCounts(body.summary || []);
-      })
-      .catch(function (err) {
-        clear($("summary"));
-        announce("Error loading summary: " + err.message);
-      });
+  function setListState(node) {
+    clearListState();
+    node.id = "list-state";
+    var rowsEl = $("rows");
+    if (rowsEl && rowsEl.parentNode) rowsEl.parentNode.insertBefore(node, rowsEl.nextSibling);
   }
 
-  /** Draw the currently visible rows, honouring the search box and `j`/`k`. */
-  function renderRows() {
-    var tbody = $("rows");
-    var visible = store.visiblePayments();
-    var active = store.get().activeRow;
-    clear(tbody);
+  // ── Row rendering ──────────────────────────────────────────────────────────
 
-    visible.forEach(function (p, index) {
-      tbody.appendChild(rowFor(p, index === active));
-    });
+  var selectedPayments = {};
 
-    show($("empty"), visible.length === 0);
-    announceRow(visible, active);
+  function setSelected(p, on) {
+    if (on) selectedPayments[p.id] = p; else delete selectedPayments[p.id];
   }
 
-  /**
-   * Announce the highlighted row to assistive technology.
-   *
-   * The `j`/`k` highlight is otherwise a purely visual change: a sighted user
-   * sees the row move, a screen-reader user would hear nothing at all. This
-   * runs on every render, not just on keypress, so a filter change that moves
-   * the highlight is announced too.
-   */
-  function announceRow(visible, active) {
-    var node = $("rows-status");
-    if (!node) return;
-    if (active < 0 || active >= visible.length) {
-      node.textContent = visible.length
-        ? visible.length + (visible.length === 1 ? " payment" : " payments")
-        : "";
-      return;
+  function syncSelectionUi() {
+    var ids = Object.keys(selectedPayments);
+    var count = $("selection-count");
+    var exportSel = $("export-selected");
+    if (count) {
+      count.textContent = ids.length ? ids.length + " selected" : "";
+      show(count, ids.length > 0);
     }
-    var p = visible[active];
-    node.textContent =
-      "Row " +
-      (active + 1) +
-      " of " +
-      visible.length +
-      ": " +
-      p.status +
-      ", " +
-      formatAmount(p.amount, p.asset) +
-      ", memo " +
-      p.memo;
-  }
-
-  /** A table cell carrying the column name the mobile card layout shows. */
+    if (exportSel) show(exportSel, ids.length > 0);
+  }
+
   function labelledCell(label, className, text) {
     var td = el("td", className, text);
     td.setAttribute("data-label", label);
@@ -830,13 +547,9 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     tr.dataset.paymentId = p.id;
     if (isActive) {
       tr.className = "row-active";
-      /* Roving tabindex: the highlighted row is the one the keyboard lands on,
-         so tabbing into the table does not restart at row 1. */
       tr.setAttribute("aria-current", "true");
     }
-
-    // Keep the stored record fresh when a selected row is reloaded.
-    if (state.selected[p.id]) state.selected[p.id] = p;
+    if (selectedPayments[p.id]) selectedPayments[p.id] = p;
 
     var selectCell = document.createElement("td");
     selectCell.setAttribute("data-label", "Select");
@@ -845,15 +558,9 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     box.className = "row-select";
     box.setAttribute("data-id", p.id);
     box.setAttribute("aria-label", "Select payment " + p.id);
-    box.checked = !!state.selected[p.id];
-    // Stop the row's click and Enter/Space handlers from opening the detail
-    // panel when the checkbox is toggled.
-    box.addEventListener("click", function (ev) {
-      ev.stopPropagation();
-    });
-    box.addEventListener("keydown", function (ev) {
-      ev.stopPropagation();
-    });
+    box.checked = !!selectedPayments[p.id];
+    box.addEventListener("click", function (ev) { ev.stopPropagation(); });
+    box.addEventListener("keydown", function (ev) { ev.stopPropagation(); });
     box.addEventListener("change", function () {
       setSelected(p, box.checked);
       syncSelectionUi();
@@ -866,47 +573,38 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     statusCell.appendChild(el("span", pillClass(p.status), p.status));
     tr.appendChild(statusCell);
 
-    /* `data-label` is what the ≤720px card layout renders as each row's
-       heading (see `.payments td::before` in dashboard.css). The table header
-       cells are hidden at that width, so without it the cards degrade to an
-       unlabelled list of values. */
     tr.appendChild(labelledCell("Amount", null, formatAmount(p.amount, p.asset)));
     tr.appendChild(labelledCell("Memo", "mono", p.memo));
     tr.appendChild(labelledCell("Created", null, fmtTime(p.created_at)));
     tr.appendChild(labelledCell("Payment ID", "mono", shortId(p.id)));
 
-    tr.addEventListener("click", function () {
-      openDetail(p.id, tr);
-    });
+    tr.addEventListener("click", function () { openDetail(p.id, tr); });
     tr.addEventListener("keydown", function (ev) {
-      if (ev.key === "Enter" || ev.key === " ") {
-        ev.preventDefault();
-        openDetail(p.id, tr);
-      }
+      if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); openDetail(p.id, tr); }
     });
-
     return tr;
   }
 
-  /* ── Detail panel ────────────────────────────────────────────────────── */
+  // ── Detail panel (#715) ───────────────────────────────────────────────────
 
-  function openDetail(id) {
+  /**
+   * Open the detail drawer as a real modal dialog.
+   * Stores the trigger row so focus can be returned on close.
+   */
+  function openDetail(id, trigger) {
     store.update({ selectedPaymentId: id });
-    show($("detail"), true);
-    show($("scrim"), true);
-    /* Move focus into the panel so the keyboard user is inside the thing that
-       just opened, and so Escape is meaningful without a pointer. */
-    var close = $("detail-close");
-    if (close) close.focus();
+    state.detailTrigger = trigger || null;
 
+    var detail = $("detail");
     var fields = $("detail-fields");
     clear(fields);
     clear($("deliveries"));
     setError($("deliveries-error"), null);
     show($("deliveries-empty"), false);
 
-    // #719: show skeleton placeholders while the payment record loads.
     showDetailSkeleton();
+    openModal(detail);
+    focusDetail();
 
     api("/payments/" + encodeURIComponent(id))
       .then(function (p) {
@@ -914,10 +612,7 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
         [
           ["Status", p.status],
           ["Amount", formatAmount(p.amount, p.asset)],
-          [
-            "Received",
-            p.paid_amount ? formatAmount(p.paid_amount, p.asset) : "—",
-          ],
+          ["Received", p.paid_amount ? formatAmount(p.paid_amount, p.asset) : "—"],
           ["Memo", p.memo],
           ["Destination", p.destination_address],
           ["Transaction", p.tx_hash || "—"],
@@ -927,13 +622,8 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
           ["Merchant", p.merchant_id],
           ["Created", fmtTime(p.created_at)],
           ["Updated", fmtTime(p.updated_at)],
-          [
-            "Expires",
-            fmtTime(p.expires_at) +
-              (p.status === "pending"
-                ? " (" + countdown(p.expires_at) + " left)"
-                : ""),
-          ],
+          ["Expires", fmtTime(p.expires_at) +
+            (p.status === "pending" ? " (" + countdown(p.expires_at) + " left)" : "")],
         ].forEach(function (pair) {
           fields.appendChild(el("dt", null, pair[0]));
           if (pair[0] === "Status") {
@@ -956,11 +646,7 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
       .catch(function (err) {
         clear(fields);
         if (err.message !== "unauthorized") {
-          // #720: show a structured error state with a retry button in the
-          // detail panel instead of a bare error text node.
-          var errNode = buildErrorState(err.message, function () {
-            openDetail(id);
-          });
+          var errNode = buildErrorState(err.message, function () { openDetail(id); });
           var wrapper = document.createElement("dd");
           wrapper.appendChild(errNode);
           fields.appendChild(el("dt", null, "Error"));
@@ -971,159 +657,428 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     loadDeliveries(id);
   }
 
-  function closeDetail() {
+  /** Move focus to the first focusable element inside the detail panel. */
+  function focusDetail() {
+    var detail = $("detail");
+    if (!detail) return;
+    var focusable = detail.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length) focusable[0].focus();
+  }
+
+  /**
+   * Tab trap for the detail drawer (#714).
+   * Wraps Tab in both directions so focus stays inside while the modal is open.
+   */
+  function trapDetailFocus(ev) {
+    if (ev.key !== "Tab") return;
+    var detail = $("detail");
+    if (!detail) return;
+    var focusable = Array.prototype.slice.call(detail.querySelectorAll(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), ' +
+      'textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    ));
+    if (!focusable.length) return;
+    var first = focusable[0];
+    var last = focusable[focusable.length - 1];
+    var active = document.activeElement;
+    if (ev.shiftKey && active === first) {
+      ev.preventDefault();
+      last.focus();
+    } else if (!ev.shiftKey && active === last) {
+      ev.preventDefault();
+      first.focus();
+    }
+  }
+
+  /**
+   * Keep focus inside the detail drawer when something outside tries to steal it.
+   * Handles the case where a click behind the backdrop lands focus on the body.
+   */
+  function keepFocusInDetail(ev) {
+    var detail = $("detail");
+    if (!detail || !detail.open) return;
+    if (!detail.contains(ev.target)) focusDetail();
+  }
+
+  /**
+   * Called when the <dialog> fires its `close` event (from Escape, close(),
+   * or the close button). Restores focus to the row that opened the drawer.
+   */
+  function onDetailClosed() {
     store.update({ selectedPaymentId: null });
-    show($("detail"), false);
-    show($("scrim"), false);
-    /* Return focus to the list so a keyboard user is not dropped at the top of
-       the document after dismissing the panel. */
-    var rows = document.querySelector("#rows tr");
-    if (rows && typeof rows.focus === "function") rows.focus();
+    var trigger = state.detailTrigger;
+    state.detailTrigger = null;
+    if (trigger && trigger.isConnected) {
+      trigger.focus();
+    }
+  }
+
+  /** Open a <dialog> element as a modal. */
+  function openModal(dialogEl) {
+    if (dialogEl && !dialogEl.open) dialogEl.showModal();
   }
 
+  /** Close a <dialog> element. */
+  function closeModal(dialogEl) {
+    if (dialogEl && dialogEl.open) dialogEl.close();
+  }
+
+  function closeDetail() {
+    /* Use detail.close() directly so the `close` event fires and
+       `onDetailClosed` can restore focus. The dialog's `close` event is the
+       single authoritative hook — it covers Escape, the button, and the
+       backdrop. */
+    var detail = $("detail");
+    if (detail && detail.open) detail.close();
+  }
+
+  /**
+   * Dismiss the detail drawer when a click lands on the ::backdrop.
+   *
+   * The ::backdrop is not a separate event target; clicks on it are retargeted
+   * to the <dialog>. So we ignore clicks that land inside the dialog's own rect.
+   */
+  function dismissOnBackdrop(ev) {
+    if (ev.target !== $("detail")) return;
+    var rect = $("detail").getBoundingClientRect();
+    var outside =
+      ev.clientX < rect.left || ev.clientX > rect.right ||
+      ev.clientY < rect.top  || ev.clientY > rect.bottom;
+    if (outside) closeDetail();
+  }
+
+  // ── Deliveries ────────────────────────────────────────────────────────────
+
   function loadDeliveries(paymentId) {
     api("/payments/" + encodeURIComponent(paymentId) + "/webhooks")
       .then(function (body) {
         var list = $("deliveries");
         clear(list);
         var deliveries = body.deliveries || [];
-        if (deliveries.length === 0) {
-          // #720: tailored empty message for deliveries.
-          show($("deliveries-empty"), true);
-        } else {
-          show($("deliveries-empty"), false);
-          deliveries.forEach(function (d) {
-            list.appendChild(deliveryItem(paymentId, d));
-          });
+        show($("deliveries-empty"), deliveries.length === 0);
+        if (deliveries.length > 0) {
+          deliveries.forEach(function (d) { list.appendChild(deliveryItem(paymentId, d)); });
         }
       })
       .catch(function (err) {
         if (err.message !== "unauthorized") {
-          // #720: deliveries error with a retry button.
           var errNode = buildErrorState(err.message, function () {
             setError($("deliveries-error"), null);
             loadDeliveries(paymentId);
           });
-          var container = $("deliveries-error").parentNode;
-          // Reuse the existing deliveries-error node as an anchor for the
-          // error state so we don't multiply error nodes on repeated retries.
-          setError($("deliveries-error"), null);
-          container.insertBefore(errNode, $("deliveries-error"));
+          var container = $("deliveries-error") && $("deliveries-error").parentNode;
+          if (container) container.insertBefore(errNode, $("deliveries-error"));
         }
       });
   }
 
   function deliveryItem(paymentId, d) {
     var li = el("li", "delivery");
-
     var head = el("div", "delivery-head");
     head.appendChild(el("strong", null, d.event || "webhook"));
     head.appendChild(el("span", pillClass(d.status), d.status));
     li.appendChild(head);
-
     li.appendChild(el("div", "mono", d.url));
-    li.appendChild(
-      el(
-        "div",
-        "delivery-meta",
-        "attempt " + d.attempts + " · manual " + (d.manual_attempts || 0)
-      )
-    );
+    li.appendChild(el("div", "delivery-meta", "attempt " + d.attempts + " · manual " + (d.manual_attempts || 0)));
     li.appendChild(el("div", "delivery-meta", "last: " + relativeTime(d.last_attempt)));
     li.lastChild.title = fmtTime(d.last_attempt);
     li.appendChild(el("div", "delivery-meta", "created: " + relativeTime(d.created_at)));
     li.lastChild.title = fmtTime(d.created_at);
     if (d.status === "failed") {
-      li.appendChild(
-        el(
-          "div",
-          "error",
-          "Last delivery failed; check receiver logs or redeliver."
-        )
-      );
+      li.appendChild(el("div", "error", "Last delivery failed; check receiver logs or redeliver."));
     }
     if (d.status !== "delivered") {
-      li.appendChild(
-        el(
-          "div",
-          "delivery-meta",
-          "retry state: queued for redrive if attempts remain"
-        )
-      );
+      li.appendChild(el("div", "delivery-meta", "retry state: queued for redrive if attempts remain"));
     }
-
     var button = el("button", "ghost", "Redeliver");
     button.addEventListener("click", function () {
       if (!window.confirm("Redeliver this webhook now?")) return;
       button.disabled = true;
-      button.textContent = "Sending…";
+      button.textContent = "Sending\u2026";
       api(
-        "/payments/" +
-          encodeURIComponent(paymentId) +
-          "/webhooks/" +
-          encodeURIComponent(d.id) +
-          "/redeliver",
+        "/payments/" + encodeURIComponent(paymentId) +
+        "/webhooks/" + encodeURIComponent(d.id) + "/redeliver",
         { method: "POST" }
       )
-        .then(function () {
-          loadDeliveries(paymentId);
-        })
+        .then(function () { loadDeliveries(paymentId); })
         .catch(function (err) {
           button.disabled = false;
           button.textContent = "Redeliver";
           if (err.message !== "unauthorized") {
-            setError(
-              $("deliveries-error"),
-              err.message.indexOf("429") >= 0
-                ? "Rate limited. Try again shortly."
-                : err.message
-            );
+            setError($("deliveries-error"),
+              err.message.indexOf("429") >= 0 ? "Rate limited. Try again shortly." : err.message);
           }
         });
     });
     li.appendChild(button);
-
     return li;
   }
 
-  function exportCsv() {
-    var csv = toCsv(store.get().loadedPayments, CSV_COLUMNS);
+  // ── Create payment form (#758 / #760 / #761) ──────────────────────────────
+
+  /**
+   * Build a copy button that writes `value` to the clipboard and briefly shows
+   * "Copied" as confirmation (#698, #761).
+   */
+  function copyButton(value, label) {
+    var btn = el("button", "ghost copy", "Copy");
+    btn.type = "button";
+    btn.setAttribute("aria-label", label || ("Copy " + value));
+    btn.addEventListener("click", function () {
+      navigator.clipboard.writeText(value).then(function () {
+        btn.textContent = "Copied";
+        window.setTimeout(function () { btn.textContent = "Copy"; }, 1500);
+      }).catch(function () {
+        /* clipboard API unavailable — silently ignore */
+      });
+    });
+    return btn;
+  }
+
+  /**
+   * Show the payment instructions panel with destination, memo, amount, asset,
+   * expiry and a QR code for the SEP-7 URI (#761, #763).
+   *
+   * The panel is built inside the create-payment dialog so the merchant
+   * sees it immediately after creation without needing to re-open the drawer.
+   */
+  function showPaymentInstructions(payment) {
+    var dialog = $("create-payment-dialog");
+    if (!dialog) return;
+
+    /* Clear the form, reveal the instructions section. */
+    var formSection = $("create-payment-form-section");
+    var instrSection = $("create-payment-instructions");
+    if (formSection) formSection.hidden = true;
+    if (instrSection) instrSection.hidden = false;
+
+    /* Populate fields. */
+    function fillField(fieldId, value) {
+      var el = document.getElementById(fieldId);
+      if (el) el.textContent = value || "—";
+    }
+    fillField("instr-destination", payment.destination_address);
+    fillField("instr-memo", payment.memo);
+    fillField("instr-amount", formatAmount(payment.amount, payment.asset));
+    fillField("instr-asset", payment.asset || "XLM");
+    fillField("instr-expiry", fmtTime(payment.expires_at) +
+      (payment.expires_at ? " (" + countdown(payment.expires_at) + " left)" : ""));
+
+    /* Copy buttons (#698). */
+    function attachCopyBtn(containerId, value, label) {
+      var container = document.getElementById(containerId);
+      if (!container) return;
+      var existing = container.querySelector(".copy");
+      if (existing) container.removeChild(existing);
+      container.appendChild(copyButton(value, label));
+    }
+    attachCopyBtn("instr-destination-row", payment.destination_address, "Copy destination address");
+    attachCopyBtn("instr-memo-row", payment.memo, "Copy memo");
+    attachCopyBtn("instr-id-row", payment.id, "Copy payment ID");
+
+    /* Payment ID. */
+    fillField("instr-id", payment.id);
+
+    /* SEP-7 QR code (#763). */
+    var sep7Uri = buildSep7Uri(payment);
+    var qrContainer = $("instr-qr");
+    if (qrContainer) {
+      if (typeof QRCode !== "undefined" && QRCode.toSvg) {
+        var svgMarkup = QRCode.toSvg(sep7Uri, { size: 180, margin: 3 });
+        if (svgMarkup) {
+          /* We only set innerHTML on a div we own and control; the content
+             comes from our own QR encoder, not from the API or user input. */
+          qrContainer.innerHTML = svgMarkup;
+        }
+      }
+      /* Text alternative always present (#763). */
+      var altEl = $("instr-qr-alt");
+      if (altEl) altEl.textContent = sep7Uri;
+    }
+  }
+
+  /**
+   * Reset and re-open the create-payment form ("Create another" action, #761).
+   */
+  function resetCreateForm() {
+    var formSection = $("create-payment-form-section");
+    var instrSection = $("create-payment-instructions");
+    if (formSection) formSection.hidden = false;
+    if (instrSection) instrSection.hidden = true;
+
+    var form = $("create-payment-form");
+    if (form) form.reset();
+
+    var submitBtn = $("create-submit");
+    if (submitBtn) {
+      submitBtn.disabled = false;
+      submitBtn.textContent = "Create payment";
+    }
+    setError($("create-payment-error"), null);
+    /* Focus the first field. */
+    var amountInput = $("create-amount");
+    if (amountInput) amountInput.focus();
+  }
+
+  /** Wire up the create-payment dialog. Called once from init(). */
+  function initCreatePaymentDialog() {
+    var dialog = $("create-payment-dialog");
+    var openBtn = $("new-payment-btn");
+    var cancelBtn = $("create-cancel");
+    var createAnotherBtn = $("create-another");
+    var form = $("create-payment-form");
+
+    if (!dialog || !form) return;
+
+    if (openBtn) {
+      openBtn.addEventListener("click", function () {
+        resetCreateForm();
+        openModal(dialog);
+        var amountInput = $("create-amount");
+        if (amountInput) amountInput.focus();
+      });
+    }
+
+    if (cancelBtn) {
+      cancelBtn.addEventListener("click", function () { closeModal(dialog); });
+    }
+
+    if (createAnotherBtn) {
+      createAnotherBtn.addEventListener("click", function () { resetCreateForm(); });
+    }
+
+    var doneBtn = $("create-done");
+    if (doneBtn) {
+      doneBtn.addEventListener("click", function () { closeModal(dialog); });
+    }
+
+    var cancelBtn2 = $("create-cancel-2");
+    if (cancelBtn2) {
+      cancelBtn2.addEventListener("click", function () { closeModal(dialog); });
+    }
+
+    var instrCloseBtn = $("create-instr-close");
+    if (instrCloseBtn) {
+      instrCloseBtn.addEventListener("click", function () { closeModal(dialog); });
+    }
+
+    /* Backdrop click dismissal. */
+    dialog.addEventListener("click", function (ev) {
+      if (ev.target !== dialog) return;
+      var rect = dialog.getBoundingClientRect();
+      var outside =
+        ev.clientX < rect.left || ev.clientX > rect.right ||
+        ev.clientY < rect.top  || ev.clientY > rect.bottom;
+      if (outside) closeModal(dialog);
+    });
+
+    /* #760: prevent double submission. */
+    form.addEventListener("submit", function (ev) {
+      ev.preventDefault();
+      var submitBtn = $("create-submit");
+      if (submitBtn && submitBtn.disabled) return;
+
+      var amount = ($("create-amount") || {}).value || "";
+      var asset  = ($("create-asset")  || {}).value || "XLM";
+      var webhookUrl = ($("create-webhook") || {}).value || "";
+
+      if (!amount.trim()) {
+        setError($("create-payment-error"), "Amount is required.");
+        return;
+      }
+
+      /* Disable button and show spinner while request is in flight (#760). */
+      if (submitBtn) {
+        submitBtn.disabled = true;
+        submitBtn.textContent = "Creating\u2026";
+      }
+      setError($("create-payment-error"), null);
+
+      var body = { amount: amount.trim(), asset: asset };
+      if (webhookUrl.trim()) body.webhook_url = webhookUrl.trim();
+
+      /* Generate a per-form idempotency key so a network retry doesn't create
+         duplicates. A new key is minted each time the form is submitted fresh
+         (but stays constant across retries of the same submission). (#760) */
+      var idempotencyKey = generateIdempotencyKey();
+
+      api("/payments", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Idempotency-Key": idempotencyKey,
+        },
+        body: JSON.stringify(body),
+      })
+        .then(function (payment) {
+          /* #761: show instructions panel with copy buttons and QR code. */
+          showPaymentInstructions(payment);
+          /* Prepend the new payment to the loaded list. */
+          var payments = store.get().loadedPayments;
+          store.update({ loadedPayments: [payment].concat(payments) });
+          renderRows();
+          loadSummary();
+        })
+        .catch(function (err) {
+          /* Re-enable on error (#760). */
+          if (submitBtn) {
+            submitBtn.disabled = false;
+            submitBtn.textContent = "Create payment";
+          }
+          if (err.message !== "unauthorized") {
+            setError($("create-payment-error"), err.message);
+          }
+        });
+    });
+  }
+
+  /**
+   * Generate a random idempotency key for the current form submission.
+   * Uses crypto.randomUUID when available, falls back to Math.random.
+   */
+  function generateIdempotencyKey() {
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    var arr = [];
+    for (var i = 0; i < 32; i++) arr.push(Math.floor(Math.random() * 16).toString(16));
+    return arr.join("");
+  }
+
+  // ── Export ────────────────────────────────────────────────────────────────
+
+  function exportCsv(payments, filename) {
+    var csv = toCsv(payments, CSV_COLUMNS);
     var blob = new Blob([csv], { type: "text/csv" });
     var url = URL.createObjectURL(blob);
     var a = document.createElement("a");
     a.href = url;
-    a.download = filename;
+    a.download = filename || "stellargate-payments.csv";
     a.click();
     URL.revokeObjectURL(url);
   }
 
-  /* ── Version ─────────────────────────────────────────────────────────── */
+  // ── Version ───────────────────────────────────────────────────────────────
 
-  /** The root route answers with "StellarGate API vX.Y.Z". */
   function loadVersion() {
     fetch("/")
-      .then(function (res) {
-        return res.text();
-      })
+      .then(function (res) { return res.text(); })
       .then(function (text) {
         var match = /v\d+\.\d+\.\d+/.exec(text);
         if (match) $("version").textContent = match[0];
       })
-      .catch(function () {
-        /* cosmetic only */
-      });
+      .catch(function () { /* cosmetic only */ });
   }
 
-  /* ── Health ──────────────────────────────────────────────────────────── */
+  // ── Health ────────────────────────────────────────────────────────────────
 
   function updateSessionExpiry() {
     var expiresAt = session.expiresAt();
     var node = $("session-expiry");
     if (!node) return;
-    if (expiresAt === null) {
-      node.textContent = "";
-      return;
-    }
+    if (expiresAt === null) { node.textContent = ""; return; }
     node.textContent = "session " + countdown(new Date(expiresAt).toISOString());
     node.title = "Saved " + fmtTime(new Date(session.savedAt()).toISOString());
   }
@@ -1131,9 +1086,7 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
   function pollHealth() {
     fetch("/ready", { headers: { Accept: "application/json" } })
       .then(function (res) {
-        return res.json().then(function (body) {
-          return { ok: res.ok, body: body };
-        });
+        return res.json().then(function (body) { return { ok: res.ok, body: body }; });
       })
       .then(function (r) {
         var pill = $("health");
@@ -1149,17 +1102,51 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
       });
   }
 
-  /* ── URL hash (filters, never credentials) ───────────────────────────── */
+  // ── Filter / search UI ────────────────────────────────────────────────────
 
   function syncFilterUi() {
+    var state = store.get();
     Array.prototype.forEach.call(document.querySelectorAll(".chip"), function (chip) {
       var status = chip.getAttribute("data-status") || "";
-      var isActive = status ? state.statuses.indexOf(status) >= 0 : state.statuses.length === 0;
+      var isActive = status ? state.statuses
+        ? state.statuses.indexOf(status) >= 0
+        : status === state.status
+      : (state.statuses ? state.statuses.length === 0 : !state.status);
       chip.className = isActive ? "chip chip-on" : "chip";
       chip.setAttribute("aria-pressed", isActive ? "true" : "false");
     });
+
+    var search = $("search");
+    if (search && search.value !== state.search) search.value = state.search;
+
+    var size = $("page-size");
+    if (size) size.value = String(state.pageSize);
+
+    var after = $("created-after");
+    if (after && after.value !== state.createdAfter) after.value = state.createdAfter;
+
+    var before = $("created-before");
+    if (before && before.value !== state.createdBefore) before.value = state.createdBefore;
+
+    var auto = $("auto-refresh");
+    if (auto) auto.checked = state.autoRefresh;
+
+    syncPresetUi();
   }
 
+  function onFilterChange() {
+    syncFilterUi();
+    writeHash();
+    reload();
+  }
+
+  function syncSearchClear() {
+    var button = $("search-clear");
+    if (button) button.hidden = !store.get().search;
+  }
+
+  // ── Keyboard navigation ───────────────────────────────────────────────────
+
   function moveActiveRow(delta) {
     var count = store.visiblePayments().length;
     store.update({ activeRow: moveRow(store.get().activeRow, count, delta) });
@@ -1170,28 +1157,20 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
     }
   }
 
-  /** Open the highlighted row, or do nothing when no row is highlighted. */
   function openActiveRow() {
-    var state = store.get();
+    var stateSnap = store.get();
     var visible = store.visiblePayments();
-    if (state.activeRow < 0 || state.activeRow >= visible.length) return;
-    openDetail(visible[state.activeRow].id);
+    if (stateSnap.activeRow < 0 || stateSnap.activeRow >= visible.length) return;
+    openDetail(visible[stateSnap.activeRow].id);
   }
 
   function onKeydown(ev) {
-    /* The help overlay is modal over the app: only its own dismiss keys are
-       honoured while it is open, so a stray `j` cannot move rows behind it. */
     if (store.get().helpOpen) {
-      if (ev.key === "Escape" || ev.key === "?") {
-        ev.preventDefault();
-        closeHelp();
-      }
+      if (ev.key === "Escape" || ev.key === "?") { ev.preventDefault(); closeHelp(); }
       return;
     }
-
     var action = matchShortcut(ev, { activeElement: document.activeElement });
     if (!action) return;
-
     if (action === "focusSearch") {
       var search = $("search");
       if (!search) return;
@@ -1200,83 +1179,61 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
       search.select();
       return;
     }
-
-    /* Everything below is an in-app action and must not also reach the
-       browser's own defaults (space scrolls, `?` opens quick find in some
-       browsers, `/` opens quick find in Firefox). */
     ev.preventDefault();
-
     switch (action) {
-      case "refresh":
-        reload();
-        break;
-      case "nextRow":
-        moveActiveRow(1);
-        break;
-      case "prevRow":
-        moveActiveRow(-1);
-        break;
-      case "closeDrawer":
-        closeDetail();
-        break;
-      case "toggleHelp":
-        toggleHelp();
-        break;
-      default:
-        break;
+      case "refresh":    reload(); break;
+      case "nextRow":    moveActiveRow(1); break;
+      case "prevRow":    moveActiveRow(-1); break;
+      case "closeDrawer": closeDetail(); break;
+      case "toggleHelp": toggleHelp(); break;
     }
   }
 
-  /* ── Wiring ──────────────────────────────────────────────────────────── */
-
-  function syncFilterUi() {
-    var state = store.get();
-    Array.prototype.forEach.call(
-      document.querySelectorAll(".chip"),
-      function (chip) {
-        chip.className =
-          (chip.getAttribute("data-status") || "") === state.status
-            ? "chip chip-on"
-            : "chip";
-      }
-    );
-
-    var search = $("search");
-    if (search && search.value !== state.search) search.value = state.search;
-
-    var size = $("page-size");
-    if (size) size.value = String(state.pageSize);
-
-    var after = $("created-after");
-    if (after && after.value !== state.createdAfter) after.value = state.createdAfter;
-
-    var before = $("created-before");
-    if (before && before.value !== state.createdBefore) before.value = state.createdBefore;
+  // ── Shortcut help overlay (#721) ──────────────────────────────────────────
+
+  function renderHelp() {
+    var list = $("help-list");
+    if (!list) return;
+    clear(list);
+    SHORTCUTS.forEach(function (s) {
+      var li = el("li", "help-row");
+      var kbd = el("kbd", null, s.hint);
+      var span = el("span", null, s.label);
+      li.appendChild(kbd);
+      li.appendChild(span);
+      list.appendChild(li);
+    });
+  }
 
-    var auto = $("auto-refresh");
-    if (auto) auto.checked = state.autoRefresh;
+  function openHelp() {
+    store.update({ helpOpen: true });
+    show($("help"), true);
+    var closeBtn = $("help-close");
+    if (closeBtn) closeBtn.focus();
   }
 
-  /** Re-render on a filter change: rows, chips, and the URL hash together. */
-  function onFilterChange() {
-    syncFilterUi();
-    writeHash();
-    reload();
+  function closeHelp() {
+    store.update({ helpOpen: false });
+    show($("help"), false);
+    var openBtn = $("help-open");
+    if (openBtn) openBtn.focus();
   }
 
-  /**
-   * Show the clear button only when there is something to clear.
-   *
-   * `type="search"` gives some browsers a native clear affordance, but not all,
-   * and it is invisible to keyboard users when it is not rendered — an explicit
-   * button keeps "get rid of this filter" reachable everywhere.
-   */
-  function syncSearchClear() {
-    var button = $("search-clear");
-    if (button) button.hidden = !store.get().search;
+  function toggleHelp() {
+    if (store.get().helpOpen) closeHelp(); else openHelp();
   }
 
+  // ── Internal mutable state not in store ───────────────────────────────────
+  // (The store covers serialisable filter/pagination state; non-serialisable
+  //  focus-restoration state lives here.)
+  var state = {
+    detailTrigger: null,
+  };
+
+  // ── Init ──────────────────────────────────────────────────────────────────
+
   function init() {
+    initTheme();
     renderHelp();
 
     $("gate-form").addEventListener("submit", function (ev) {
@@ -1285,53 +1242,62 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
       if (!key) return;
       setError($("gate-error"), null);
       signIn(key, $("remember").checked).catch(function (err) {
-        if (err.message !== "unauthorized") {
-          setError($("gate-error"), err.message);
-        }
+        if (err.message !== "unauthorized") setError($("gate-error"), err.message);
       });
     });
 
-    $("sign-out").addEventListener("click", function () {
-      signOut(null);
-    });
+    $("sign-out").addEventListener("click", function () { signOut(null); });
+
+    $("refresh").addEventListener("click", function () { loadSummary(); reload(); });
 
-    $("refresh").addEventListener("click", function () {
-      loadSummary();
-      reload();
-    });
     $("export-csv").addEventListener("click", function () {
-      exportCsv(state.loadedPayments, "stellargate-payments.csv");
-    });
-    $("export-selected").addEventListener("click", function () {
-      exportCsv(selectedPayments(), "stellargate-payments-selected.csv");
+      exportCsv(store.get().loadedPayments, "stellargate-payments.csv");
     });
+
+    var exportSel = $("export-selected");
+    if (exportSel) {
+      exportSel.addEventListener("click", function () {
+        exportCsv(Object.values(selectedPayments), "stellargate-payments-selected.csv");
+      });
+    }
+
     $("select-all").addEventListener("change", function () {
       var on = $("select-all").checked;
-      state.loadedPayments.forEach(function (p) {
-        setSelected(p, on);
-      });
+      store.get().loadedPayments.forEach(function (p) { setSelected(p, on); });
       syncSelectionUi();
     });
+
     $("page-size").addEventListener("change", function () {
-      var n = Number($("page-size").value) || 25;
-      store.update({ pageSize: n });
+      store.update({ pageSize: Number($("page-size").value) || 25 });
       onFilterChange();
     });
+
     $("created-after").addEventListener("change", function () {
       store.update({ createdAfter: $("created-after").value });
       onFilterChange();
     });
+
     $("created-before").addEventListener("change", function () {
       store.update({ createdBefore: $("created-before").value });
       onFilterChange();
     });
+
     $("auto-refresh").addEventListener("change", function () {
       store.update({ autoRefresh: $("auto-refresh").checked });
       onFilterChange();
     });
 
-    /* Search filters the rows already loaded (#693), so it filters on input
-       with no debounce needed: there is no request to batch. */
+    Array.prototype.forEach.call(document.querySelectorAll(".preset"), function (btn) {
+      btn.addEventListener("click", function () {
+        var range = presetRange(Number(btn.getAttribute("data-days")));
+        store.update({ createdAfter: range.from, createdBefore: range.to });
+        var afterEl = $("created-after"), beforeEl = $("created-before");
+        if (afterEl) afterEl.value = range.from;
+        if (beforeEl) beforeEl.value = range.to;
+        onFilterChange();
+      });
+    });
+
     var search = $("search");
     if (search) {
       search.addEventListener("input", function () {
@@ -1343,8 +1309,6 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
       });
     }
 
-    /* A new page of rows invalidates both the highlighted row and the CSV
-       export, which is built from the loaded set. */
     $("load-more").addEventListener("click", function () {
       store.update({ activeRow: -1 });
       loadPayments();
@@ -1362,26 +1326,26 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
       });
     }
 
-    $("detail-close").addEventListener("click", closeDetail);
-    $("scrim").addEventListener("click", closeDetail);
+    /* Detail drawer wiring. */
+    var detail = $("detail");
+    if (detail) {
+      $("detail-close").addEventListener("click", closeDetail);
+      $("detail").addEventListener("click", dismissOnBackdrop);
+      $("detail").addEventListener("keydown", trapDetailFocus);
+      $("detail").addEventListener("close", onDetailClosed);
+      document.addEventListener("focusin", function (ev) { keepFocusInDetail(ev); });
+    }
+
     $("help-close").addEventListener("click", closeHelp);
-    /* The overlay element is its own full-viewport backdrop, so a click that
-       lands on the overlay rather than the panel is a click outside it. There is
-       no separate scrim: a second, lower-z layer would sit permanently behind
-       the overlay and never receive the click. */
     $("help").addEventListener("click", function (ev) {
       if (ev.target === $("help")) closeHelp();
     });
     $("help-open").addEventListener("click", openHelp);
 
-    /* Enter on the highlighted row opens it, so `j`/`k` then Enter is a
-       complete keyboard path through the list. */
     document.addEventListener("keydown", function (ev) {
       if (ev.key !== "Enter") return;
       if (store.get().helpOpen) return;
-      if (document.activeElement && document.activeElement.tagName === "TR") {
-        return;
-      }
+      if (document.activeElement && document.activeElement.tagName === "TR") return;
       if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
       if (store.get().activeRow < 0) return;
       ev.preventDefault();
@@ -1390,47 +1354,34 @@ import { matchShortcut, moveRow, SHORTCUTS } from "./keys.js";
 
     document.addEventListener("keydown", onKeydown);
 
-    Array.prototype.forEach.call(
-      document.querySelectorAll(".chip"),
-      function (chip) {
-        chip.addEventListener("click", function () {
-          store.update({ status: chip.getAttribute("data-status") || "" });
-          onFilterChange();
-        });
-      }
-    );
+    Array.prototype.forEach.call(document.querySelectorAll(".chip"), function (chip) {
+      chip.addEventListener("click", function () {
+        store.update({ status: chip.getAttribute("data-status") || "" });
+        onFilterChange();
+      });
+    });
 
-    /* Back/forward must move the filters, or a shared URL is a lie. */
     window.addEventListener("hashchange", function () {
-      if (store.get().key) {
-        applyHash();
-        reload();
-      }
+      if (store.get().key) { applyHash(); reload(); }
     });
 
     window.setInterval(function () {
       if (store.get().key) pollHealth();
     }, 30000);
+
     window.setInterval(function () {
-      var state = store.get();
-      if (state.key && state.autoRefresh && (!state.status || state.status === "pending")) {
+      var stateSnap = store.get();
+      if (stateSnap.key && stateSnap.autoRefresh && (!stateSnap.status || stateSnap.status === "pending")) {
         reload();
       }
     }, 15000);
 
-    /* Resume an existing session when a key is already stored. The gate is
-       visible until this succeeds, so any failure here simply leaves the user
-       looking at the sign-in form rather than at nothing. */
+    initCreatePaymentDialog();
+
     var existing = session.read();
     if (existing) {
       signIn(existing, null).catch(function (err) {
-        /* A 401 already returned to the gate via signOut() inside api(). Every
-           other failure — server down, network dropped, a proxy returning a
-           login page — must land there too. Swallowing it would leave both
-           panels hidden and render a blank page with no way forward. */
-        if (err.message !== "unauthorized") {
-          showGate("Could not restore your session: " + err.message);
-        }
+        if (err.message !== "unauthorized") showGate("Could not restore your session: " + err.message);
       });
     }
   }
diff --git a/static/format.js b/static/format.js
index 5ad3aa3..dd9318b 100644
--- a/static/format.js
+++ b/static/format.js
@@ -205,6 +205,51 @@ export function buildListQuery(filters) {
   return "/payments?" + parts.join("&");
 }
 
+/**
+ * Build a SEP-7 `web+stellar:pay` URI for a payment intent.
+ *
+ * The URI encodes the destination, memo, amount and asset so a SEP-7-capable
+ * wallet can prefill a payment directly from a QR code scan or a tap.
+ *
+ * Native XLM uses no asset_code/asset_issuer parameters; issued assets use
+ * both so the wallet can verify the exact token. All values are percent-encoded
+ * so memo text containing spaces, commas or special characters round-trips
+ * correctly. Memo type is always MEMO_TEXT to match how the gateway generates
+ * and matches memos (see `generate_unique_memo` in the backend).
+ *
+ * @param {object} payment  A payment record from the API.
+ * @returns {string}        The full web+stellar:pay URI.
+ */
+export function buildSep7Uri(payment) {
+  var p = payment || {};
+  var params = [];
+  if (p.destination_address) {
+    params.push("destination=" + encodeURIComponent(p.destination_address));
+  }
+  if (p.amount) {
+    // Strip trailing zeros the same way formatAmount does, so "10.0000000"
+    // becomes "10" in the URI — wallets display this value to the user.
+    var n = Number(p.amount);
+    var amtStr = isFinite(n)
+      ? n.toFixed(7).replace(/\.?0+$/, "")
+      : String(p.amount);
+    params.push("amount=" + encodeURIComponent(amtStr));
+  }
+  var asset = String(p.asset || "XLM").toUpperCase();
+  if (asset !== "XLM") {
+    // Issued asset: asset_code + asset_issuer required.
+    params.push("asset_code=" + encodeURIComponent(asset));
+    if (p.asset_issuer) {
+      params.push("asset_issuer=" + encodeURIComponent(p.asset_issuer));
+    }
+  }
+  if (p.memo) {
+    params.push("memo=" + encodeURIComponent(p.memo));
+    params.push("memo_type=MEMO_TEXT");
+  }
+  return "web+stellar:pay?" + params.join("&");
+}
+
 /**
  * Case-insensitive filter over the rows already loaded, matching a query against
  * the memo and the payment id.
diff --git a/static/vendor/qrcode.js b/static/vendor/qrcode.js
new file mode 100644
index 0000000..5cca25b
--- /dev/null
+++ b/static/vendor/qrcode.js
@@ -0,0 +1,392 @@
+/**
+ * Minimal QR Code encoder — produces an inline SVG string.
+ *
+ * Vendored under static/vendor/ so the dashboard can render payment URIs as
+ * QR codes without a third-party network request, which the dashboard CSP
+ * (`connect-src 'self'`) and `script-src 'self'` would block anyway.
+ *
+ * Only supports byte-mode encoding (UTF-8 input), error-correction level M,
+ * and the smallest version that fits the data. This covers SEP-7 URIs of
+ * typical length (≤ ~180 characters) with room to spare.
+ *
+ * License: MIT
+ * Based on the public QR Code specification ISO/IEC 18004:2015.
+ */
+(function (root, factory) {
+  "use strict";
+  if (typeof define === "function" && define.amd) {
+    define([], factory);
+  } else if (typeof module === "object" && module.exports) {
+    module.exports = factory();
+  } else {
+    root.QRCode = factory();
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function () {
+  "use strict";
+
+  // ── GF(256) arithmetic ──────────────────────────────────────────────────────
+  var GF_EXP = new Uint8Array(512);
+  var GF_LOG = new Uint8Array(256);
+  (function () {
+    var x = 1;
+    for (var i = 0; i < 255; i++) {
+      GF_EXP[i] = x;
+      GF_LOG[x] = i;
+      x = x << 1;
+      if (x & 0x100) x ^= 0x11d;
+    }
+    for (var j = 255; j < 512; j++) GF_EXP[j] = GF_EXP[j - 255];
+  })();
+
+  function gfMul(a, b) {
+    if (a === 0 || b === 0) return 0;
+    return GF_EXP[(GF_LOG[a] + GF_LOG[b]) % 255];
+  }
+
+  function gfPolyMul(p, q) {
+    var r = new Uint8Array(p.length + q.length - 1);
+    for (var i = 0; i < p.length; i++)
+      for (var j = 0; j < q.length; j++)
+        r[i + j] ^= gfMul(p[i], q[j]);
+    return r;
+  }
+
+  function gfPolyDiv(dividend, divisor) {
+    var out = new Uint8Array(dividend);
+    for (var i = 0; i < dividend.length - (divisor.length - 1); i++) {
+      var c = out[i];
+      if (c !== 0)
+        for (var j = 1; j < divisor.length; j++)
+          out[i + j] ^= gfMul(divisor[j], c);
+    }
+    return out.slice(dividend.length - (divisor.length - 1));
+  }
+
+  function generatorPoly(degree) {
+    var g = new Uint8Array([1]);
+    for (var i = 0; i < degree; i++)
+      g = gfPolyMul(g, new Uint8Array([1, GF_EXP[i]]));
+    return g;
+  }
+
+  // ── Version / capacity tables for ECL=M ────────────────────────────────────
+  // Each entry: [version, data_codewords, ec_codewords_per_block, blocks]
+  var VERSIONS_M = [
+    [1,  16,  10, 1],
+    [2,  28,  16, 1],
+    [3,  44,  26, 1],
+    [4,  64,  18, 2],
+    [5,  86,  24, 2],
+    [6, 108,  16, 4],
+    [7, 124,  18, 4],
+    [8, 154,  22, 4],
+    [9, 182,  22, 5],
+    [10, 216, 26, 5],
+  ];
+
+  function pickVersion(byteCount) {
+    for (var i = 0; i < VERSIONS_M.length; i++) {
+      // Header: mode (4) + char count indicator (8 for byte mode, v1-9)
+      if (VERSIONS_M[i][1] >= byteCount + 2) return VERSIONS_M[i];
+    }
+    return null; // too long
+  }
+
+  // ── Bit buffer ──────────────────────────────────────────────────────────────
+  function BitBuffer() {
+    this.buf = [];
+    this.len = 0;
+  }
+  BitBuffer.prototype.put = function (val, length) {
+    for (var i = length - 1; i >= 0; i--) {
+      if ((val >>> i) & 1) this.buf.push(1); else this.buf.push(0);
+      this.len++;
+    }
+  };
+
+  // ── Data encoding (byte mode) ───────────────────────────────────────────────
+  function encodeData(bytes, version, totalCodewords) {
+    var bb = new BitBuffer();
+    bb.put(0x4, 4);                // mode: byte
+    bb.put(bytes.length, 8);       // character count
+    for (var i = 0; i < bytes.length; i++) bb.put(bytes[i], 8);
+    // Terminator
+    bb.put(0, Math.min(4, totalCodewords * 8 - bb.len));
+    // Pad to byte boundary
+    while (bb.len % 8) bb.put(0, 1);
+    // Pad codewords
+    var pad = [0xEC, 0x11];
+    var pi = 0;
+    while (bb.len < totalCodewords * 8) { bb.put(pad[pi++ & 1], 8); }
+    // Pack bits into bytes
+    var out = new Uint8Array(totalCodewords);
+    for (var j = 0; j < totalCodewords; j++) {
+      var byte = 0;
+      for (var b = 0; b < 8; b++) byte = (byte << 1) | (bb.buf[j * 8 + b] || 0);
+      out[j] = byte;
+    }
+    return out;
+  }
+
+  // ── Error correction ────────────────────────────────────────────────────────
+  function makeEcBlocks(data, vinfo) {
+    var dcw = vinfo[1], ecpb = vinfo[2], blocks = vinfo[3];
+    var blockSize = Math.floor(dcw / blocks);
+    var largeBlocks = dcw - blockSize * blocks;
+    var gen = generatorPoly(ecpb);
+    var result = { dc: [], ec: [] };
+    var offset = 0;
+    for (var i = 0; i < blocks; i++) {
+      var size = blockSize + (i >= blocks - largeBlocks ? 1 : 0);
+      var block = data.slice(offset, offset + size);
+      offset += size;
+      result.dc.push(block);
+      result.ec.push(gfPolyDiv(block, gen));
+    }
+    return result;
+  }
+
+  function interleave(blocks) {
+    var out = [];
+    var maxLen = 0;
+    for (var i = 0; i < blocks.length; i++) if (blocks[i].length > maxLen) maxLen = blocks[i].length;
+    for (var j = 0; j < maxLen; j++)
+      for (var k = 0; k < blocks.length; k++)
+        if (j < blocks[k].length) out.push(blocks[k][j]);
+    return out;
+  }
+
+  // ── Module placement ────────────────────────────────────────────────────────
+  var FORMAT_INFO_M = [
+    0x5BCF, 0x5AA8, 0x5BE3, 0x5AC4, 0x5EF5, 0x5FD2, 0x5E99, 0x5FBE,
+    0x4E31, 0x4F16, 0x4E5D, 0x4F7A, 0x4B4B, 0x4A6C, 0x4B27, 0x4A00,
+    0x70FC, 0x71DB, 0x7090, 0x71B7, 0x7586, 0x74A1, 0x75EA, 0x74CD,
+    0x6542, 0x6465, 0x652E, 0x6409, 0x6038, 0x611F, 0x6054, 0x6173,
+  ];
+
+  function makeMatrix(size) {
+    var m = [];
+    for (var i = 0; i < size; i++) {
+      m.push(new Int8Array(size)); // 0=unset, 1=dark, -1=light
+    }
+    return m;
+  }
+
+  function setFinderPattern(m, row, col) {
+    for (var r = -1; r <= 7; r++)
+      for (var c = -1; c <= 7; c++) {
+        var rr = row + r, cc = col + c;
+        if (rr < 0 || rr >= m.length || cc < 0 || cc >= m.length) continue;
+        var dark = (r === -1 || r === 7 || c === -1 || c === 7) ||
+          (r >= 1 && r <= 5 && c >= 1 && c <= 5);
+        m[rr][cc] = dark ? 1 : -1;
+      }
+  }
+
+  function setTimingPatterns(m, size) {
+    for (var i = 8; i < size - 8; i++) {
+      m[6][i] = (i % 2 === 0) ? 1 : -1;
+      m[i][6] = (i % 2 === 0) ? 1 : -1;
+    }
+  }
+
+  function setAlignmentPattern(m, row, col) {
+    for (var r = -2; r <= 2; r++)
+      for (var c = -2; c <= 2; c++) {
+        var dark = (r === -2 || r === 2 || c === -2 || c === 2) || (r === 0 && c === 0);
+        m[row + r][col + c] = dark ? 1 : -1;
+      }
+  }
+
+  // Alignment pattern centers for versions 1-10
+  var ALIGN_CENTERS = [
+    [], [], [6,18], [6,22], [6,26], [6,30], [6,34],
+    [6,22,38], [6,24,42], [6,26,46], [6,28,50],
+  ];
+
+  function setAlignmentPatterns(m, version, size) {
+    var centers = ALIGN_CENTERS[version] || [];
+    for (var i = 0; i < centers.length; i++)
+      for (var j = 0; j < centers.length; j++) {
+        var r = centers[i], c = centers[j];
+        if (m[r][c] !== 0) continue;
+        setAlignmentPattern(m, r, c);
+      }
+  }
+
+  function isFunction(m, row, col) {
+    return m[row][col] !== 0;
+  }
+
+  function placeDataBits(m, bits, size, mask) {
+    var bitIdx = 0;
+    var dir = -1; // -1 = up, 1 = down
+    var col = size - 1;
+    while (col > 0) {
+      if (col === 6) col--;
+      var rowStart = dir === -1 ? size - 1 : 0;
+      for (var i = 0; i < size; i++) {
+        var row = rowStart + dir * i;
+        for (var dc = 0; dc < 2; dc++) {
+          var c = col - dc;
+          if (m[row][c] !== 0) continue;
+          var bit = bitIdx < bits.length ? bits[bitIdx++] : 0;
+          var masked = applyMask(mask, row, c, bit);
+          m[row][c] = masked ? 1 : -1;
+        }
+      }
+      dir = -dir;
+      col -= 2;
+    }
+  }
+
+  function applyMask(mask, row, col, bit) {
+    var m;
+    switch (mask) {
+      case 0: m = (row + col) % 2 === 0; break;
+      case 1: m = row % 2 === 0; break;
+      case 2: m = col % 3 === 0; break;
+      case 3: m = (row + col) % 3 === 0; break;
+      case 4: m = (Math.floor(row / 2) + Math.floor(col / 3)) % 2 === 0; break;
+      case 5: m = ((row * col) % 2 + (row * col) % 3) === 0; break;
+      case 6: m = ((row * col) % 2 + (row * col) % 3) % 2 === 0; break;
+      case 7: m = ((row + col) % 2 + (row * col) % 3) % 2 === 0; break;
+      default: m = false;
+    }
+    return m ? !bit : !!bit;
+  }
+
+  function setFormatInfo(m, size, mask) {
+    var fmt = FORMAT_INFO_M[mask];
+    var bits = [];
+    for (var i = 14; i >= 0; i--) bits.push((fmt >>> i) & 1);
+
+    // Horizontal + vertical strips around top-left finder
+    var pos = [
+      [8,0],[8,1],[8,2],[8,3],[8,4],[8,5],[8,7],[8,8],
+      [7,8],[5,8],[4,8],[3,8],[2,8],[1,8],[0,8],
+    ];
+    for (var j = 0; j < pos.length; j++) {
+      m[pos[j][0]][pos[j][1]] = bits[j] ? 1 : -1;
+    }
+    // Top-right
+    for (var k = 0; k < 8; k++) m[8][size - 1 - k] = bits[k] ? 1 : -1;
+    // Bottom-left
+    for (var l = 0; l < 7; l++) m[size - 7 + l][8] = bits[8 + l] ? 1 : -1;
+    // Dark module
+    m[size - 8][8] = 1;
+  }
+
+  function penalty(m, size) {
+    var score = 0;
+    // Rule 1: five or more in a row
+    for (var r = 0; r < size; r++) {
+      var runH = 1, runV = 1;
+      for (var c = 1; c < size; c++) {
+        if (m[r][c] === m[r][c - 1]) { runH++; if (runH === 5) score += 3; else if (runH > 5) score++; }
+        else runH = 1;
+        if (m[c][r] === m[c - 1][r]) { runV++; if (runV === 5) score += 3; else if (runV > 5) score++; }
+        else runV = 1;
+      }
+    }
+    // Rule 2: 2x2 blocks
+    for (var i = 0; i < size - 1; i++)
+      for (var j = 0; j < size - 1; j++)
+        if (m[i][j] === m[i + 1][j] && m[i][j] === m[i][j + 1] && m[i][j] === m[i + 1][j + 1]) score += 3;
+    return score;
+  }
+
+  // ── Public API ──────────────────────────────────────────────────────────────
+
+  /**
+   * Encode `text` as a QR code and return an inline SVG string.
+   *
+   * @param {string} text  The data to encode (UTF-8).
+   * @param {object} [opts]
+   * @param {number} [opts.size=200]     SVG width/height in pixels.
+   * @param {number} [opts.margin=4]     Quiet-zone modules.
+   * @param {string} [opts.dark="#000"]  Dark module colour.
+   * @param {string} [opts.light="#fff"] Light module colour.
+   * @returns {string}  SVG markup (no XML declaration, suitable for innerHTML).
+   */
+  function toSvg(text, opts) {
+    var o = opts || {};
+    var svgSize = o.size || 200;
+    var margin = o.margin !== undefined ? o.margin : 4;
+    var dark = o.dark || "#000";
+    var light = o.light || "#fff";
+
+    // Encode text to UTF-8 bytes
+    var bytes = unescape(encodeURIComponent(text)).split("").map(function (c) { return c.charCodeAt(0); });
+
+    var vinfo = pickVersion(bytes.length);
+    if (!vinfo) return ""; // data too long
+
+    var version = vinfo[0];
+    var size = version * 4 + 17;
+    var totalDcw = vinfo[1];
+
+    var data = encodeData(bytes, version, totalDcw);
+    var ecBlocks = makeEcBlocks(data, vinfo);
+    var allBits = interleave(ecBlocks.dc).concat(interleave(ecBlocks.ec));
+
+    // Convert bytes to bits
+    var bits = [];
+    for (var i = 0; i < allBits.length; i++)
+      for (var b = 7; b >= 0; b--) bits.push((allBits[i] >>> b) & 1);
+
+    // Choose best mask
+    var bestMask = 0, bestPenalty = Infinity;
+    for (var mask = 0; mask < 8; mask++) {
+      var m = makeMatrix(size);
+      setFinderPattern(m, 0, 0);
+      setFinderPattern(m, 0, size - 7);
+      setFinderPattern(m, size - 7, 0);
+      setTimingPatterns(m, size);
+      setAlignmentPatterns(m, version, size);
+      placeDataBits(m, bits, size, mask);
+      setFormatInfo(m, size, mask);
+      var p = penalty(m, size);
+      if (p < bestPenalty) { bestPenalty = p; bestMask = mask; }
+    }
+
+    // Final matrix with best mask
+    var matrix = makeMatrix(size);
+    setFinderPattern(matrix, 0, 0);
+    setFinderPattern(matrix, 0, size - 7);
+    setFinderPattern(matrix, size - 7, 0);
+    setTimingPatterns(matrix, size);
+    setAlignmentPatterns(matrix, version, size);
+    placeDataBits(matrix, bits, size, bestMask);
+    setFormatInfo(matrix, size, bestMask);
+
+    // Render SVG
+    var totalModules = size + margin * 2;
+    var cellSize = svgSize / totalModules;
+    var rects = [];
+
+    // Background
+    rects.push(
+      '<rect width="' + svgSize + '" height="' + svgSize + '" fill="' + light + '"/>'
+    );
+
+    for (var row = 0; row < size; row++) {
+      for (var col = 0; col < size; col++) {
+        if (matrix[row][col] === 1) {
+          var x = (col + margin) * cellSize;
+          var y = (row + margin) * cellSize;
+          rects.push(
+            '<rect x="' + x.toFixed(2) + '" y="' + y.toFixed(2) +
+            '" width="' + cellSize.toFixed(2) + '" height="' + cellSize.toFixed(2) +
+            '" fill="' + dark + '"/>'
+          );
+        }
+      }
+    }
+
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' +
+      svgSize + " " + svgSize + '" role="img">' + rects.join("") + "</svg>";
+  }
+
+  return { toSvg: toSvg };
+});
diff --git a/tests/dashboard_asset_tests.rs b/tests/dashboard_asset_tests.rs
index 0ff8410..384c999 100644
--- a/tests/dashboard_asset_tests.rs
+++ b/tests/dashboard_asset_tests.rs
@@ -82,6 +82,34 @@ fn strip_html_comments(html: &str) -> String {
 
 const DASHBOARD_FORMAT_JS: &str = include_str!("../static/dashboard-format.js");
 
+const DASHBOARD_STATE_JS: &str = include_str!("../static/state.js");
+
+/// All ES module siblings of `app.js`, as `(served_path, source_body)` pairs.
+///
+/// `every_dashboard_module_import_resolves_to_a_served_route` iterates this
+/// list to verify every relative import in each module resolves to a route the
+/// router actually serves. Add a new module here the moment it is created so
+/// the check stays exhaustive.
+const MODULES: &[(&str, &str)] = &[
+    ("/dashboard/format.js",  include_str!("../static/format.js")),
+    ("/dashboard/session.js", include_str!("../static/session.js")),
+    ("/dashboard/state.js",   include_str!("../static/state.js")),
+    ("/dashboard/keys.js",    include_str!("../static/keys.js")),
+];
+
+/// Every `/dashboard/…` path the router actually serves.
+///
+/// Used by `every_dashboard_module_import_resolves_to_a_served_route` to
+/// confirm that a relative import in a module has a matching route.
+const JS_ROUTES: &[&str] = &[
+    "/dashboard/app.js",
+    "/dashboard/format.js",
+    "/dashboard/session.js",
+    "/dashboard/state.js",
+    "/dashboard/keys.js",
+    "/dashboard/vendor/qrcode.js",
+];
+
 #[test]
 fn dashboard_api_requests_use_canonical_v1_base() {
     assert!(
@@ -101,7 +129,7 @@ fn dashboard_api_requests_use_canonical_v1_base() {
     assert_eq!(
         direct_fetches,
         [
-            "return fetch(API_BASE + path, { method: opts.method || \"GET\", headers: headers }).then(",
+            "return fetch(API_BASE + path, { method: opts.method || \"GET\", headers: headers, body: opts.body || null }).then(",
             "fetch(\"/\")",
             "fetch(\"/ready\", { headers: { Accept: \"application/json\" } })",
         ],