From cdb6bb6fe31497c7267f44e47247b85dc337cc5f Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Mon, 1 Jun 2026 07:40:30 -0700
Subject: [PATCH 01/20] Whole-form htmx + Alpine morph for transaction edit

Re-render the entire #wizard-form on each field edit and swap with
hx-swap="morph" so the focused input keeps focus/caret/value while typing.

- Field-level routes return the full form and target #wizard-form
- Key state-owning wrappers (account rows, simple-mode wrapper, vendor
  typeahead) so server-driven value changes re-init across the morph
- Guard tippy/$refs access in typeahead against stale post-morph state
- Round-trip simple/advanced mode via step-params[mode]
- Add e2e/transaction-edit-morph.spec.ts covering focus/caret preservation,
  vendor->account population, and repeated vendor changes
- Seed a second vendor/account for test isolation

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 e2e/transaction-edit-morph.spec.ts        | 387 ++++++++++++++++++++++
 e2e/transaction-edit.spec.ts              |  10 +-
 resources/public/js/htmx-disable.js       |  60 ++++
 src/clj/auto_ap/ssr/components/inputs.clj |  51 +--
 src/clj/auto_ap/ssr/transaction/edit.clj  | 292 ++++++++--------
 src/clj/auto_ap/ssr/ui.clj                |  32 +-
 src/cljc/auto_ap/routes/transactions.cljc |   2 +
 test/clj/auto_ap/test_server.clj          |  32 +-
 8 files changed, 681 insertions(+), 185 deletions(-)
 create mode 100644 e2e/transaction-edit-morph.spec.ts

diff --git a/e2e/transaction-edit-morph.spec.ts b/e2e/transaction-edit-morph.spec.ts
new file mode 100644
index 00000000..6ee9ca62
--- /dev/null
+++ b/e2e/transaction-edit-morph.spec.ts
@@ -0,0 +1,387 @@
+import { test, expect } from '@playwright/test';
+
+// These tests cover the "render the whole form via an htmx + alpine morph swap"
+// behaviour on the transaction edit page. The whole-form approach exists so that
+// any edit can hit its own route yet re-render the entire form, while keeping the
+// user's focus and caret position intact (which a plain innerHTML swap destroys).
+
+// Collect any uncaught page errors or console errors so a morph that throws
+// (e.g. a tooltip callback dereferencing a stale $refs) fails the test loudly.
+function trackErrors(page: any): string[] {
+  const errors: string[] = [];
+  page.on('pageerror', (e: any) => errors.push('pageerror: ' + e.message));
+  page.on('console', (m: any) => {
+    if (m.type() === 'error') errors.push('console: ' + m.text());
+  });
+  return errors;
+}
+
+async function openManualAdvanced(page: any, transactionIndex = 0) {
+  await page.goto('/transaction2');
+  await page.waitForSelector('table tbody tr');
+  await page
+    .locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]')
+    .nth(transactionIndex)
+    .click();
+  await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
+  await page.waitForSelector('#wizardmodal');
+  await page.click('button:has-text("Manual")');
+
+  // First transaction has no accounts so it opens in "simple" mode. Switch to
+  // advanced mode (a whole-form morph swap) so the account grid is present.
+  const advancedLink = page.locator('a:has-text("Switch to advanced mode")');
+  if (await advancedLink.count()) {
+    await advancedLink.first().click();
+    await page.waitForSelector('#account-grid-body');
+  }
+}
+
+// Drives the vendor typeahead like a user: open the dropdown, inject a result
+// (Solr is unavailable in tests), click it, and wait for the whole-form morph.
+async function selectVendor(page: any, vendorId: number, label: string) {
+  const vendor = page
+    .locator('div[hx-post*="edit-vendor-changed"]')
+    .first()
+    .locator('div.relative[x-data]')
+    .first();
+  await vendor.locator('a[x-ref="input"]').click();
+  const search = page.locator('[data-tippy-root] input[x-model="search"]').first();
+  await search.waitFor({ state: 'visible' });
+  await search.fill('xx');
+  await vendor.evaluate((el: HTMLElement, opt: { id: number; label: string }) => {
+    (window as any).Alpine.$data(el).elements = [{ value: opt.id, label: opt.label }];
+  }, { id: vendorId, label });
+
+  const swap = page.waitForResponse(
+    (r: any) =>
+      r.url().includes('edit-vendor-changed') &&
+      r.request().method() === 'POST' &&
+      r.status() === 200
+  );
+  await page.locator('[data-tippy-root] a', { hasText: label }).first().click();
+  await swap;
+  await page.waitForTimeout(400);
+}
+
+// Removes every existing account row (each remove is its own whole-form morph),
+// so a test starts from a known-empty state regardless of what earlier tests
+// saved onto the shared transaction.
+async function clearAccounts(page: any) {
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    const removeButtons = page.locator('#account-grid-body .account-remove-action');
+    const count = await removeButtons.count();
+    if (count === 0) break;
+    await removeButtons.first().click();
+    await expect
+      .poll(async () => page.locator('#account-grid-body .account-remove-action').count())
+      .toBeLessThan(count);
+  }
+}
+
+test.describe.configure({ mode: 'serial' });
+
+test.describe('Transaction Edit whole-form morph', () => {
+  test('morph swaps (toggle mode, add account) do not throw', async ({ page }) => {
+    const errors = trackErrors(page);
+
+    await openManualAdvanced(page, 0);
+
+    // Add an account row -- another whole-form morph swap.
+    await page
+      .locator('#account-grid-body')
+      .locator('button:has-text("New account"), a:has-text("New account")')
+      .first()
+      .click();
+
+    await expect
+      .poll(async () => page.locator('#account-grid-body tbody tr.account-row').count())
+      .toBeGreaterThan(0);
+
+    // The form must survive the morph intact.
+    await expect(page.locator('#wizard-form')).toHaveCount(1);
+    expect(errors, errors.join('\n')).toEqual([]);
+  });
+
+  test('keeps focus and typed value in the amount field across a morph', async ({ page }) => {
+    const errors = trackErrors(page);
+
+    await openManualAdvanced(page, 0);
+
+    // Ensure exactly one account row exists.
+    const rows = await page.locator('#account-grid-body tbody tr.account-row').count();
+    if (rows === 0) {
+      await page
+        .locator('#account-grid-body')
+        .locator('button:has-text("New account"), a:has-text("New account")')
+        .first()
+        .click();
+      await expect
+        .poll(async () => page.locator('#account-grid-body tbody tr.account-row').count())
+        .toBeGreaterThan(0);
+    }
+
+    const amount = page.locator('.account-amount-field').first();
+    await amount.waitFor();
+
+    // Type a clean value via the keyboard. Typing fires the field's htmx trigger
+    // (keyup), which posts to a per-field route and morphs the whole form back
+    // in. The amount field is type=number (no text caret), so we assert focus +
+    // node identity + value -- the guarantees morph gives that innerHTML can't.
+    await amount.click();
+    await amount.press('Control+a');
+
+    const amountSwap = page.waitForResponse(
+      (r: any) =>
+        r.url().includes('edit-form-changed') &&
+        r.request().method() === 'POST' &&
+        r.status() === 200
+    );
+    await amount.pressSequentially('150', { delay: 40 });
+
+    // Identify the live focused node (before the debounced morph lands) so we can
+    // prove the *same* node survives.
+    await page.evaluate(() => {
+      (window as any).__focusedAmount = document.activeElement;
+    });
+
+    await amountSwap;
+    await page.waitForTimeout(300);
+
+    const state = await page.evaluate(() => {
+      const active = document.activeElement as HTMLInputElement;
+      return {
+        sameNode: active === (window as any).__focusedAmount,
+        isAmountField: !!active && active.classList.contains('account-amount-field'),
+        value: active ? active.value : null,
+      };
+    });
+
+    // Focus must stay on the amount field after the morph...
+    expect(state.isAmountField).toBe(true);
+    // ...on the very same DOM node (this is what morph buys us over innerHTML)...
+    expect(state.sameNode).toBe(true);
+    // ...with the value the user typed left intact.
+    expect(state.value).toBe('150');
+
+    // The TOTAL must have recomputed server-side from the posted amount.
+    await expect(page.locator('.account-total-row #total')).toContainText('150');
+
+    expect(errors, errors.join('\n')).toEqual([]);
+  });
+
+  test('preserves caret position in the memo text field across a morph', async ({ page }) => {
+    const errors = trackErrors(page);
+
+    await page.goto('/transaction2');
+    await page.waitForSelector('table tbody tr');
+    await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
+    await page.waitForSelector('#wizardmodal');
+
+    const memo = page.locator('#edit-memo');
+    await memo.waitFor();
+
+    // Clear any seeded memo text, then type "hello" via the keyboard (fires the
+    // field's htmx keyup trigger) and let that first whole-form morph settle.
+    await memo.click();
+    await memo.press('Control+a');
+    const firstSwap = page.waitForResponse(
+      (r: any) =>
+        r.url().includes('edit-form-changed') &&
+        r.request().method() === 'POST' &&
+        r.status() === 200
+    );
+    await memo.pressSequentially('hello', { delay: 40 });
+    await firstSwap;
+    await page.waitForTimeout(300);
+
+    // Drop the caret in the middle (text inputs support selection).
+    await memo.evaluate((el: HTMLInputElement) => {
+      el.focus();
+      el.setSelectionRange(2, 2);
+    });
+    await page.evaluate(() => {
+      (window as any).__focusedMemo = document.activeElement;
+    });
+
+    // Insert a char at the caret -> "heXllo", caret moves to 3, fires the swap.
+    const memoSwap = page.waitForResponse(
+      (r: any) =>
+        r.url().includes('edit-form-changed') &&
+        r.request().method() === 'POST' &&
+        r.status() === 200
+    );
+    await memo.press('X');
+    await memoSwap;
+    await page.waitForTimeout(300);
+
+    const state = await page.evaluate(() => {
+      const active = document.activeElement as HTMLInputElement;
+      return {
+        sameNode: active === (window as any).__focusedMemo,
+        id: active ? active.id : null,
+        value: active ? active.value : null,
+        caret: active ? active.selectionStart : null,
+      };
+    });
+
+    expect(state.id).toBe('edit-memo');
+    expect(state.sameNode).toBe(true);
+    expect(state.value).toBe('heXllo');
+    expect(state.caret).toBe(3);
+
+    expect(errors, errors.join('\n')).toEqual([]);
+  });
+
+  test('choosing an account from the typeahead does not throw and persists', async ({ page }) => {
+    const errors = trackErrors(page);
+
+    await openManualAdvanced(page, 0);
+
+    // Start from a clean, empty account row so selecting the account actually
+    // changes accountId (and fires the change-gated whole-form morph).
+    await clearAccounts(page);
+    await page
+      .locator('#account-grid-body')
+      .locator('button:has-text("New account"), a:has-text("New account")')
+      .first()
+      .click();
+    await expect
+      .poll(async () => page.locator('#account-grid-body tbody tr.account-row').count())
+      .toBeGreaterThan(0);
+
+    const row = page.locator('#account-grid-body tbody tr.account-row').first();
+    const typeahead = row.locator('div.relative[x-data]').first();
+
+    // Open the dropdown (tippy renders the popper into [data-tippy-root]).
+    await typeahead.locator('a[x-ref="input"]').click();
+    const search = page.locator('[data-tippy-root] input[x-model="search"]').first();
+    await search.waitFor({ state: 'visible' });
+
+    // Account search is backed by Solr (unavailable in tests), so type under the
+    // 3-char threshold and inject a clickable result into the typeahead state --
+    // the click handler, tippy.hide(), Alpine reactivity and HTMX morph all run
+    // exactly as in production.
+    await search.fill('te');
+    const testInfo = await (await page.request.get('/test-info')).json();
+    const accountId: number = testInfo.accounts['test-account'];
+    await typeahead.evaluate((el: HTMLElement, id: number) => {
+      (window as any).Alpine.$data(el).elements = [{ value: id, label: 'Test Account' }];
+    }, accountId);
+
+    // Clicking the result runs `value = element; tippy.hide(); ...`. Before the
+    // fix this threw "tippy is null" because the cached tippy var was stale after
+    // an earlier morph.
+    const swap = page.waitForResponse(
+      (r: any) =>
+        r.url().includes('edit-form-changed') &&
+        r.request().method() === 'POST' &&
+        r.status() === 200
+    );
+    await page.locator('[data-tippy-root] a', { hasText: 'Test Account' }).first().click();
+    await swap;
+    await page.waitForTimeout(300);
+
+    // The chosen account must survive the whole-form morph.
+    const hidden = page
+      .locator('#account-grid-body tbody tr.account-row')
+      .first()
+      .locator('input[type="hidden"][name*="transaction-account/account"]')
+      .first();
+    await expect(hidden).toHaveValue(accountId.toString());
+
+    expect(errors, errors.join('\n')).toEqual([]);
+  });
+
+  test('selecting a vendor populates its default account across the morph', async ({ page }) => {
+    const errors = trackErrors(page);
+
+    // Open the modal in simple mode (transaction 0 has no accounts).
+    await page.goto('/transaction2');
+    await page.waitForSelector('table tbody tr');
+    await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
+    await page.waitForSelector('#wizardmodal');
+    await page.click('button:has-text("Manual")');
+    await page.waitForSelector('div[hx-post*="edit-vendor-changed"]');
+
+    const testInfo = await (await page.request.get('/test-info')).json();
+    const vendorId: number = testInfo.accounts.vendor;
+    const defaultAccountId: number = testInfo.accounts['test-account'];
+
+    // Drive the vendor typeahead like a user: open dropdown, inject a result
+    // (Solr is unavailable in tests), click it.
+    const vendor = page.locator('div[hx-post*="edit-vendor-changed"]').first().locator('div.relative[x-data]').first();
+    await vendor.locator('a[x-ref="input"]').click();
+    const search = page.locator('[data-tippy-root] input[x-model="search"]').first();
+    await search.waitFor({ state: 'visible' });
+    await search.fill('te');
+    await vendor.evaluate((el: HTMLElement, id: number) => {
+      (window as any).Alpine.$data(el).elements = [{ value: id, label: 'Test Vendor' }];
+    }, vendorId);
+
+    const swap = page.waitForResponse(
+      (r: any) =>
+        r.url().includes('edit-vendor-changed') &&
+        r.request().method() === 'POST' &&
+        r.status() === 200
+    );
+    await page.locator('[data-tippy-root] a', { hasText: 'Test Vendor' }).first().click();
+    await swap;
+    await page.waitForTimeout(400);
+
+    // The vendor's default account must now be reflected in the account field --
+    // this is the bug the `key` re-init fixes: a server-driven value change into an
+    // Alpine-stateful typeahead that morph would otherwise preserve as empty.
+    const accountHidden = page
+      .locator('input[type="hidden"][name*="transaction-account/account"]')
+      .first();
+    await expect(accountHidden).toHaveValue(defaultAccountId.toString());
+
+    // The displayed account label should resolve too.
+    await expect(page.locator('span[x-text="value.label"]', { hasText: 'Test Account' })).toBeVisible();
+
+    expect(errors, errors.join('\n')).toEqual([]);
+  });
+
+  test('changing the vendor a second time still updates it', async ({ page }) => {
+    const errors = trackErrors(page);
+
+    await page.goto('/transaction2');
+    await page.waitForSelector('table tbody tr');
+    await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
+    await page.waitForSelector('#wizardmodal');
+    await page.click('button:has-text("Manual")');
+    await page.waitForSelector('div[hx-post*="edit-vendor-changed"]');
+
+    const testInfo = await (await page.request.get('/test-info')).json();
+    const vendor1: number = testInfo.accounts.vendor;
+    const vendor2: number = testInfo.accounts.vendor2;
+    const account1: number = testInfo.accounts['test-account'];
+    const account2: number = testInfo.accounts['second-account'];
+
+    const vendorLabel = page
+      .locator('div[hx-post*="edit-vendor-changed"] span[x-text="value.label"]')
+      .first();
+    const accountHidden = page
+      .locator('input[type="hidden"][name*="transaction-account/account"]')
+      .first();
+
+    // First vendor.
+    await selectVendor(page, vendor1, 'Test Vendor');
+    await expect(vendorLabel).toHaveText('Test Vendor');
+    await expect(accountHidden).toHaveValue(account1.toString());
+
+    // Second vendor -- this is the regression: a morph-preserved typeahead lost its
+    // value watcher, so the second change fired no request at all.
+    await selectVendor(page, vendor2, 'Second Vendor');
+    await expect(vendorLabel).toHaveText('Second Vendor');
+    await expect(accountHidden).toHaveValue(account2.toString());
+
+    // And back again, to be sure it keeps working.
+    await selectVendor(page, vendor1, 'Test Vendor');
+    await expect(vendorLabel).toHaveText('Test Vendor');
+    await expect(accountHidden).toHaveValue(account1.toString());
+
+    expect(errors, errors.join('\n')).toEqual([]);
+  });
+});
diff --git a/e2e/transaction-edit.spec.ts b/e2e/transaction-edit.spec.ts
index 297af94d..fc941d96 100644
--- a/e2e/transaction-edit.spec.ts
+++ b/e2e/transaction-edit.spec.ts
@@ -18,7 +18,15 @@ async function openEditModal(page: any, transactionIndex: number = 0) {
   // The modal is now single-page (Edit Transaction). Click "Manual" tab to ensure
   // the manual account coding form is active.
   await page.click('button:has-text("Manual")');
-  
+
+  // Transactions with 0-1 accounts open in "simple" mode, which has no account
+  // grid. Switch to "advanced" mode (a whole-form morph swap) so the grid the
+  // rest of these helpers manipulate is present.
+  const advancedLink = page.locator('a:has-text("Switch to advanced mode")');
+  if (await advancedLink.count()) {
+    await advancedLink.first().click();
+  }
+
   // Wait for the manual form to appear
   await page.waitForSelector('#account-grid-body');
 }
diff --git a/resources/public/js/htmx-disable.js b/resources/public/js/htmx-disable.js
index 38083f9d..b8094d52 100644
--- a/resources/public/js/htmx-disable.js
+++ b/resources/public/js/htmx-disable.js
@@ -416,4 +416,64 @@ htmx.onLoad(function(content) {
       console.error('Failed to copy text to clipboard:', err);
     }
   }
+/*
+(function() {
+    var lastFocusedSelector = null;
+    var lastCursorPosition = null;
+
+    document.addEventListener('htmx:beforeSwap', function(evt) {
+        var active = document.activeElement;
+        if (active && active !== document.body) {
+            // Build a selector to find this element after swap
+            if (active.id) {
+                lastFocusedSelector = '#' + active.id;
+            } else if (active.name) {
+                lastFocusedSelector = '[name="' + active.name + '"]';
+            } else {
+                lastFocusedSelector = null;
+            }
+
+            // Save cursor position for text inputs. selectionStart is null on
+            // inputs that don't support selection (number, date, select, etc.),
+            // and calling setSelectionRange on those throws, so only capture it
+            // when it's an actual numeric caret position.
+            if (typeof active.selectionStart === 'number') {
+                lastCursorPosition = {
+                    start: active.selectionStart,
+                    end: active.selectionEnd,
+                    direction: active.selectionDirection
+                };
+            } else {
+                lastCursorPosition = null;
+            }
+        }
+    });
+
+    document.addEventListener('htmx:afterSwap', function(evt) {
+        if (lastFocusedSelector) {
+            setTimeout(function() {
+                var el = document.querySelector(lastFocusedSelector);
+                // If morph already kept focus on the right element there's nothing
+                // to do; only restore when focus was actually lost by the swap.
+                if (el && el.focus && document.activeElement !== el) {
+                    el.focus();
+                    if (lastCursorPosition && el.setSelectionRange) {
+                        try {
+                            el.setSelectionRange(
+                                lastCursorPosition.start,
+                                lastCursorPosition.end,
+                                lastCursorPosition.direction
+                            );
+                        } catch (e) {  }
+                    }
+                }
+                lastFocusedSelector = null;
+                lastCursorPosition = null;
+            }, 10);
+        }
+    });
+})();
+
+*/
+
 
diff --git a/src/clj/auto_ap/ssr/components/inputs.clj b/src/clj/auto_ap/ssr/components/inputs.clj
index ae865616..1d3bbf81 100644
--- a/src/clj/auto_ap/ssr/components/inputs.clj
+++ b/src/clj/auto_ap/ssr/components/inputs.clj
@@ -51,23 +51,28 @@
                      {:x-init "$el.indeterminate = true"}))]))
 
 (defn typeahead- [params]
-  [:div.relative {:x-data (hx/json {:baseUrl (str (:url params))
-                                    :value {:value ((:value-fn params identity) (:value params)) :label ((:content-fn params identity) (:value params))}
-                                    :tippy nil
-                                    :search ""
-                                    :active -1
-                                    :elements (if ((:value-fn params identity) (:value params))
-                                                [{:value ((:value-fn params identity) (:value params)) :label ((:content-fn params identity) (:value params))}]
-                                                [])})
-                  :x-modelable "value.value"
-                  :x-model (:x-model params)}
+  [:div.relative (cond-> {:x-data (hx/json {:baseUrl (str (:url params))
+                                            :value {:value ((:value-fn params identity) (:value params)) :label ((:content-fn params identity) (:value params))}
+                                            :tippy nil
+                                            :search ""
+                                            :active -1
+                                            :elements (if ((:value-fn params identity) (:value params))
+                                                        [{:value ((:value-fn params identity) (:value params)) :label ((:content-fn params identity) (:value params))}]
+                                                        [])})
+                          :x-modelable "value.value"
+                          :x-model (:x-model params)}
+                   ;; Key the component by its current value so alpine-morph re-initialises
+                   ;; it (rather than preserving stale Alpine x-data) whenever the *server*
+                   ;; changes the value -- e.g. the default account a vendor selection
+                   ;; populates. alpine-morph keys off the `key` attribute, not `id`.
+                   (:id params) (assoc :key (str (:id params) "--" ((:value-fn params identity) (:value params)))))
    (if (:disabled params)
      [:span {:x-text "value.label"}]
      [:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes)
                      (hh/add-class "cursor-pointer"))
-          "x-tooltip.on.click" "{content: ()=>$refs.dropdown.innerHTML, placement: 'bottom', onMount(i) {htmx.process(i.popper); }, popperOptions: {strategy: 'fixed', modifiers: [{name: 'flip', options: {fallbackPlacements: ['top']}}]}, theme: 'dropdown', allowHTML: true, interactive:true}"
-          "@keydown.down.prevent.stop" "tippy.show();"
-          "@keydown.backspace" "tippy.hide(); value = {value: '', label: '' }"
+          "x-tooltip.on.click" "{content: ()=>($refs.dropdown?.innerHTML ?? ''), placement: 'bottom', onMount(i) {htmx.process(i.popper); }, popperOptions: {strategy: 'fixed', modifiers: [{name: 'flip', options: {fallbackPlacements: ['top']}}]}, theme: 'dropdown', allowHTML: true, interactive:true}"
+          "@keydown.down.prevent.stop" "tippy?.show();"
+          "@keydown.backspace" "tippy?.hide(); value = {value: '', label: '' }"
           :tabindex 0
           :x-init (str "$nextTick(() => tippy = $el.__x_tippy); " (:x-init params))
           :x-ref "input"}
@@ -94,7 +99,7 @@
 
    [:template {:x-ref "dropdown"}
     [:ul.dropdown-contents {:class "bg-gray-100 dark:bg-gray-600  ring-1"
-                            "@keydown.escape" "tippy.hide(); value = {value: '', label: '' };  "
+                            "@keydown.escape" "$refs.input?.__x_tippy?.hide(); value = {value: '', label: '' };  "
                             :x-destroy "if ($refs.input) {$refs.input.focus();}"}
      [:input {:type "text"
               :autofocus true
@@ -107,8 +112,8 @@
               "@change.stop" ""
               "@keydown.down.prevent" "active ++; active = active >= elements.length - 1 ? elements.length - 1 : active"
               "@keydown.up.prevent" "active --; active = active < 0 ? 0 : active"
-              "@keydown.enter.prevent.stop" "tippy.hide(); value = elements.length > 0 ? $data.elements[active >= 0 ? active : 0] : {'value': '', label: ''}; $refs.input.focus()"
-              "x-init" "$el.focus(); $watch('search', s => { if($el.value.length > 2) {fetch(addQueryParam(baseUrl, 'q', s)).then(data=>data.json()).then(data => {elements = data; active=-1; tippy.popperInstance.update()}) }})"}]
+              "@keydown.enter.prevent.stop" "$refs.input?.__x_tippy?.hide(); value = elements.length > 0 ? $data.elements[active >= 0 ? active : 0] : {'value': '', label: ''}; $refs.input?.focus()"
+              "x-init" "$el.focus(); $watch('search', s => { if($el.value.length > 2) {fetch(addQueryParam(baseUrl, 'q', s)).then(data=>data.json()).then(data => {elements = data; active=-1; $refs.input?.__x_tippy?.popperInstance?.update()}) }})"}]
      [:div.dropdown-options {:class "rounded-b-lg overflow-hidden"}
       [:template {:x-for "(element, index) in elements"}
        [:li [:a {:class "px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-500 [&.active]:dark:bg-primary-700  text-gray-800  dark:text-gray-100"
@@ -117,7 +122,7 @@
 
                  "@mouseover" "active = index"
                  "@mouseout" "active = -1"
-                 "@click.prevent" "value = element; tippy.hide(); setTimeout(() => $refs.input.focus(), 10)"
+                 "@click.prevent" "value = element; $refs.input?.__x_tippy?.hide(); setTimeout(() => $refs.input?.focus(), 10)"
                  "x-html" "element.label"}]]]
       [:template {:x-if "elements.length == 0"}
        [:li {:class "px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-500 text-gray-800  dark:text-gray-100 text-xs "}
@@ -126,7 +131,7 @@
 (defn multi-typeahead-dropdown- [params]
   [:template {:x-ref "dropdown"}
    [:ul.dropdown-contents {:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50 ring-1 p-4"
-                           "@keydown.escape.prevent" "tippy.hide();"
+                           "@keydown.escape.prevent" "$refs.input?.__x_tippy?.hide();"
                            :x-destroy "if ($refs.input) {$refs.input.focus();}"}
     [:div {:class (-> "relative"
                       #_(hh/replace-wildcard ["rounded" "border"] "border-bottom bg-gray-100 rounded-t-lg w-full"))}
@@ -240,9 +245,9 @@
      [:span {:x-text "value.label"}]
      [:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes)
                      (hh/add-class "cursor-pointer"))
-          "x-tooltip.on.click.prevent" "{content: ()=>$refs.dropdown.innerHTML, placement: 'bottom', onMount(i) {htmx.process(i.popper); }, popperOptions: {strategy: 'fixed', modifiers: [{name: 'flip', options: {fallbackPlacements: ['top']}}]}, theme: 'dropdown', allowHTML: true, interactive:true}"
-          "@keydown.down.prevent.stop" "tippy.show();"
-          "@keydown.backspace" "tippy.hide(); value=new Set( []);"
+          "x-tooltip.on.click.prevent" "{content: ()=>($refs.dropdown?.innerHTML ?? ''), placement: 'bottom', onMount(i) {htmx.process(i.popper); }, popperOptions: {strategy: 'fixed', modifiers: [{name: 'flip', options: {fallbackPlacements: ['top']}}]}, theme: 'dropdown', allowHTML: true, interactive:true}"
+          "@keydown.down.prevent.stop" "$refs.input?.__x_tippy?.show();"
+          "@keydown.backspace" "$refs.input?.__x_tippy?.hide(); value=new Set( []);"
           :tabindex 0
           :x-init (str "$nextTick(() => tippy = $el.__x_tippy); " (:x-init params))
           :x-ref "input"}
@@ -325,7 +330,7 @@
     (-> params
         (update :class (fnil hh/add-class "") default-input-classes)
         (assoc :x-model "value")
-        (assoc "x-tooltip.on.focus" "{content: ()=>$refs.tooltip.innerHTML, theme: 'light', onMount(i) { htmx.process(i.popper); }, allowHTML: true, interactive:true}")
+        (assoc "x-tooltip.on.focus" "{content: ()=>($refs.tooltip?.innerHTML ?? ''), theme: 'light', onMount(i) { htmx.process(i.popper); }, allowHTML: true, interactive:true}")
 
         (assoc :x-init "$nextTick(() => tippy = $el.__x_tippy); ")
         (assoc :type "text")
@@ -333,7 +338,7 @@
         (assoc "autocomplete" "off")
         (assoc "@change" "value = $event.target.value;")
 
-        (assoc "@keydown.escape" "tippy.hide(); ")
+        (assoc "@keydown.escape" "$el?.__x_tippy?.hide(); ")
         #_(assoc "hx-on" (hiccup/raw "changeDate: htmx.trigger(this, \"change\") "))
         (update :class #(str % (use-size size) " w-full"))
         (dissoc :size))]
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index e66abe69..924670a9 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -42,6 +42,8 @@
    [iol-ion.tx :refer [random-tempid]]
    [malli.core :as mc]))
 
+(declare render-full-form)
+
 (def transaction-approval-status
   {:transaction-approval-status/unapproved "Unapproved"
    :transaction-approval-status/approved "Approved"
@@ -82,6 +84,7 @@
      [:transaction/vendor {:optional true} [:maybe entity-id]]
      [:transaction/approval-status {:optional true} [:maybe (ref->enum-schema "transaction-approval-status")]]
      [:amount-mode {:optional true} [:maybe [:enum "$" "%"]]]
+     [:mode {:optional true} [:maybe [:enum "simple" "advanced"]]]
      [:transaction/accounts {:optional true}
       [:maybe
        [:vector {:coerce? true}
@@ -229,9 +232,10 @@
                                    client-id (assoc :client-id client-id)))
                :x-dispatch:changed "simpleAccountId"
                :hx-trigger "changed"
-               :hx-get (bidi/path-for ssr-routes/only-routes ::route/location-select)
-               :hx-target "find *"
-               :hx-swap "outerHTML"}
+               :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+               :hx-target "#wizard-form"
+               :hx-swap "morph"
+               :hx-include "closest form"}
               (location-select*
                {:name (fc/field-name)
                 :account-location (:account/location account-id)
@@ -244,8 +248,8 @@
       [:a.text-sm.text-blue-600.hover:underline.cursor-pointer
        {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-toggle-mode)
         :hx-include "closest form"
-        :hx-target "#manual-coding-section"
-        :hx-swap "outerHTML"}
+        :hx-target "#wizard-form"
+        :hx-swap "morph"}
        "Switch to advanced mode"]]]))
 
 (defn- manual-mode-initial
@@ -256,9 +260,15 @@
       :advanced
       :simple)))
 
-(defn transaction-account-row* [{:keys [value client-id amount-mode total]}]
+(defn transaction-account-row* [{:keys [value client-id amount-mode total index]}]
   (com/data-grid-row
    (-> {:class "account-row"
+        :id (str "account-row-" index)
+        ;; Key the row by its account id (alpine-morph keys off `key`, not `id`) so
+        ;; a server-driven account change re-inits the row's x-data. Otherwise morph
+        ;; preserves the stale accountId and the account typeahead (x-model="accountId")
+        ;; snaps back to the old value.
+        :key (str "account-row-" index "--" (fc/field-value (:transaction-account/account value)))
         :x-data (hx/json {:show (boolean (not (fc/field-value (:new? value))))
                           :accountId (fc/field-value (:transaction-account/account value))})
         :data-key "show"
@@ -286,9 +296,10 @@
                             client-id (assoc :client-id client-id)))
         :x-dispatch:changed "accountId"
         :hx-trigger "changed"
-        :hx-get (bidi/path-for ssr-routes/only-routes ::route/location-select)
-        :hx-target "find *"
-        :hx-swap "outerHTML"}
+        :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+        :hx-target "#wizard-form"
+        :hx-swap "morph"
+        :hx-include "closest form"}
        (location-select* {:name (fc/field-name)
                           :account-location (:account/location (cond->> (:transaction-account/account @value)
                                                                  (nat-int? (:transaction-account/account @value)) (dc/pull (dc/db conn)
@@ -300,17 +311,27 @@
       {}
       (com/validated-field
        {:errors (fc/field-errors)}
-       (if (= "%" amount-mode)
-         (com/text-input {:name (fc/field-name)
-                          :class "w-16 account-amount-field"
-                          :value (fc/field-value)
-                          :type "number"
-                          :step "0.01"})
-         (com/money-input {:name (fc/field-name)
+       ;; Editing an amount re-renders the whole form (so TOTAL/BALANCE recompute).
+       ;; The stable id lets alpine-morph match this exact input across the swap,
+       ;; keeping the user's focus and caret while they type.
+       (let [amount-attrs {:name (fc/field-name)
+                           :id (str "account-amount-" index)
                            :class "w-16 account-amount-field"
-                           :value (fc/field-value)})))))
+                           :value (fc/field-value)
+                           :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                           :hx-target "#wizard-form"
+                           :hx-swap "morph"
+                           :hx-trigger "keyup changed delay:300ms"
+                           :hx-include "closest form"}]
+         (if (= "%" amount-mode)
+           (com/text-input (assoc amount-attrs :type "number" :step "0.01"))
+           (com/money-input amount-attrs))))))
    (com/data-grid-cell {:class "align-top"}
-                       (com/a-icon-button {"@click.prevent.stop" "show=false; setTimeout(() => $refs.p.remove(), 500)"
+                       (com/a-icon-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-remove-account)
+                                           :hx-vals (hx/json {:row-index (or index 0)})
+                                           :hx-target "#wizard-form"
+                                           :hx-swap "morph"
+                                           :hx-include "closest form"
                                            :class "account-remove-action"} svg/x))))
 
 (defn- account-field-name [index field]
@@ -450,31 +471,30 @@
                                                                      :name "step-params[amount-mode]"
                                                                      :orientation :horizontal
                                                                      :hx-post (bidi/path-for ssr-routes/only-routes ::route/toggle-amount-mode)
-                                                                     :hx-target "#account-grid-body"
-                                                                     :hx-swap "outerHTML"
+                                                                     :hx-target "#wizard-form"
+                                                                     :hx-swap "morph"
                                                                      :hx-include "closest form"}))
                               (com/data-grid-header {:class "w-16"})]}
-                   (fc/cursor-map #(transaction-account-row* {:value %
-                                                              :client-id (-> request :entity :transaction/client :db/id)
-                                                              :amount-mode amount-mode
-                                                              :total total}))
+                   (fc/cursor-map (fn [cursor]
+                                    (transaction-account-row* {:value cursor
+                                                               :client-id (-> request :entity :transaction/client :db/id)
+                                                               :amount-mode amount-mode
+                                                               :total total
+                                                               :index (last (cursor/path cursor))})))
 
-                   (com/data-grid-new-row {:colspan 4
-                                           :hx-get (bidi/path-for ssr-routes/only-routes
-                                                                  ::route/edit-wizard-new-account)
-                                           :row-offset 0
-                                           :index (count (:transaction/accounts snapshot))
-                                           :tr-params {:hx-vals (hx/json {:client-id (:transaction/client snapshot)})}}
-                                          "New account")
+                   (com/data-grid-row {:class "new-row"}
+                                      (com/data-grid-cell {:colspan 4}
+                                                          (com/a-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-new-account)
+                                                                         :hx-target "#wizard-form"
+                                                                         :hx-swap "morph"
+                                                                         :hx-include "closest form"
+                                                                         :color :secondary}
+                                                                        "New account")))
                    (com/data-grid-row {:class "account-total-row"}
                                       (com/data-grid-cell {})
                                       (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "TOTAL"])
                                       (com/data-grid-cell {:id "total"
-                                                           :class "text-right"
-                                                           :hx-trigger "change from:closest form target:.amount-field"
-                                                           :hx-put (bidi.bidi/path-for ssr-routes/only-routes ::route/account-total)
-                                                           :hx-target "this"
-                                                           :hx-swap "innerHTML"}
+                                                           :class "text-right"}
                                                           (account-total* request))
                                       (com/data-grid-cell {}))
 
@@ -482,11 +502,7 @@
                                       (com/data-grid-cell {})
                                       (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "BALANCE"])
                                       (com/data-grid-cell {:id "total"
-                                                           :class "text-right"
-                                                           :hx-trigger "change from:closest form target:.amount-field"
-                                                           :hx-put (bidi.bidi/path-for ssr-routes/only-routes ::route/account-balance)
-                                                           :hx-target "this"
-                                                           :hx-swap "innerHTML"}
+                                                           :class "text-right"}
                                                           (account-balance* request))
                                       (com/data-grid-cell {}))
 
@@ -509,11 +525,11 @@
                          (seq (:transaction/accounts snapshot)))
         row-count (count all-accounts)]
     [:div#manual-coding-section
-     (com/hidden {:name "mode" :value (name mode)})
+     (com/hidden {:name "step-params[mode]" :value (name mode)})
      [:div {:hx-trigger "change"
             :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-vendor-changed)
-            :hx-target "#manual-coding-section"
-            :hx-swap "outerHTML"
+            :hx-target "#wizard-form"
+            :hx-swap "morph"
             :hx-sync "this:replace"
             :hx-include "closest form"}
       (fc/with-field :transaction/vendor
@@ -521,6 +537,11 @@
          {:label "Vendor" :errors (fc/field-errors)}
          [:div.w-96
           (com/typeahead {:name (fc/field-name)
+                          ;; Key the vendor typeahead by its value so alpine-morph re-creates
+                          ;; it on each vendor change. A morph-preserved typeahead loses its
+                          ;; value $watch -> change dispatch, so a *second* vendor change would
+                          ;; otherwise never fire its htmx request.
+                          :id (fc/field-name)
                           :error? (fc/error?)
                           :class "w-96"
                           :placeholder "Search..."
@@ -528,18 +549,24 @@
                           :value (fc/field-value)
                           :content-fn (fn [c] (pull-attr (dc/db conn) :vendor/name c))})]))]
      (if (= mode :simple)
-       [:div {:x-data (hx/json {:simpleAccountId
-                                (let [av (-> (first all-accounts) :transaction-account/account)]
-                                  (if (map? av) (:db/id av) av))})}
-        (simple-mode-fields* request)]
+       (let [simple-account-id (let [av (-> (first all-accounts) :transaction-account/account)]
+                                 (if (map? av) (:db/id av) av))]
+         ;; Key this wrapper by the account id so alpine-morph re-inits its x-data
+         ;; when the server changes the account (e.g. a vendor selection populating
+         ;; its default account). Without a changing key, morph keeps the stale
+         ;; simpleAccountId and the nested typeahead's x-model="simpleAccountId"
+         ;; binds back to the empty value. alpine-morph keys off `key`, not `id`.
+         [:div {:key (str "simple-account-wrapper--" simple-account-id)
+                :x-data (hx/json {:simpleAccountId simple-account-id})}
+          (simple-mode-fields* request)])
        [:div
         (when (<= row-count 1)
           [:div.mb-2
            [:a.text-sm.text-blue-600.hover:underline.cursor-pointer
             {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-toggle-mode)
              :hx-include "closest form"
-             :hx-target "#manual-coding-section"
-             :hx-swap "outerHTML"}
+             :hx-target "#wizard-form"
+             :hx-swap "morph"}
             "Switch to simple mode"]])
         (fc/with-field :transaction/accounts
           (com/validated-field
@@ -557,59 +584,7 @@
                             (assoc-in [:multi-form-state :snapshot :transaction/accounts] accounts)
                             (assoc-in [:multi-form-state :snapshot :amount-mode] new-mode))]
     (html-response
-     [:div#account-grid-body
-      (com/data-grid {:headers [(com/data-grid-header {} "Account")
-                                (com/data-grid-header {:class "w-32"} "Location")
-                                (com/data-grid-header {:class "w-16"}
-                                                      (com/radio-card {:options [{:value "$" :content "$"}
-                                                                                 {:value "%" :content "%"}]
-                                                                       :value new-mode
-                                                                       :name "step-params[amount-mode]"
-                                                                       :orientation :horizontal
-                                                                       :hx-post (bidi/path-for ssr-routes/only-routes ::route/toggle-amount-mode)
-                                                                       :hx-target "#account-grid-body"
-                                                                       :hx-swap "outerHTML"
-                                                                       :hx-include "closest form"}))
-                                (com/data-grid-header {:class "w-16"})]}
-                     (map-indexed (fn [idx account]
-                                    (transaction-account-row-no-cursor*
-                                     {:account account
-                                      :index idx
-                                      :client-id (-> updated-request :entity :transaction/client :db/id)
-                                      :amount-mode new-mode
-                                      :total total}))
-                                  accounts)
-                     (com/data-grid-new-row {:colspan 4
-                                             :hx-get (bidi/path-for ssr-routes/only-routes
-                                                                    ::route/edit-wizard-new-account)
-                                             :row-offset 0
-                                             :index (count accounts)
-                                             :tr-params {:hx-vals (hx/json {:client-id (:transaction/client snapshot)})}}
-                                            "New account")
-                     (com/data-grid-row {}
-                                        (com/data-grid-cell {})
-                                        (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "TOTAL"])
-                                        (com/data-grid-cell {:id "total"
-                                                             :class "text-right"}
-                                                            (format "$%,.2f" (double (reduce + 0.0 (map :transaction-account/amount accounts)))))
-                                        (com/data-grid-cell {}))
-                     (com/data-grid-row {}
-                                        (com/data-grid-cell {})
-                                        (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "BALANCE"])
-                                        (com/data-grid-cell {:id "total"
-                                                             :class "text-right"}
-                                                            (let [account-total (double (reduce + 0.0 (map :transaction-account/amount accounts)))
-                                                                  balance (- total account-total)]
-                                                              [:span {:class (when-not (dollars= 0.0 balance)
-                                                                               "text-red-300")}
-                                                               (format "$%,.2f" (double balance))]))
-                                        (com/data-grid-cell {}))
-                     (com/data-grid-row {}
-                                        (com/data-grid-cell {})
-                                        (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "TRANSACTION TOTAL"])
-                                        (com/data-grid-cell {:class "text-right"}
-                                                            (format "$%,.2f" total))
-                                        (com/data-grid-cell {})))])))
+     (render-full-form updated-request))))
 
 (defn transaction-details-panel [tx]
   [:div.p-4.space-y-4
@@ -617,7 +592,7 @@
    [:div.space-y-3
     [:div
      [:div.text-xs.font-medium.text-gray-500 "Amount"]
-     [:div.text-sm.font-medium.text-gray-900 (format "$%,.2f" (Math/abs (:transaction/amount tx)))]]
+     [:div.text-sm.font-medium.text-gray-900 (format "$%,.2f" (Math/abs (or (:transaction/amount tx) 0.0)))]]
     [:div
      [:div.text-xs.font-medium.text-gray-500 "Date"]
      [:div.text-sm.text-gray-900 (some-> tx :transaction/date coerce/to-date-time (atime/unparse-local atime/normal-date))]]
@@ -903,10 +878,19 @@
                   {:label "Memo"
                    :errors (fc/field-errors)}
                   [:div.w-96
+                   ;; Memo edits re-render the whole form via morph. The stable id
+                   ;; lets alpine-morph match this input across the swap so the
+                   ;; caret stays put while the user types.
                    (com/text-input {:value (-> (fc/field-value))
                                     :name (fc/field-name)
+                                    :id "edit-memo"
                                     :error? (fc/field-errors)
-                                    :placeholder "Optional note"})]))
+                                    :placeholder "Optional note"
+                                    :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                                    :hx-target "#wizard-form"
+                                    :hx-swap "morph"
+                                    :hx-trigger "keyup changed delay:300ms"
+                                    :hx-include "closest form"})]))
                [:div {:x-data (hx/json {:activeForm (if (:transaction/payment (:entity request))
                                                       "link-payment"
                                                       (or (fc/with-field :action (fc/field-value))
@@ -1387,7 +1371,8 @@
      :form-params
      (-> mm/default-form-props
          (assoc :hx-post
-                (str (bidi/path-for ssr-routes/only-routes ::route/edit-submit))))
+                (str (bidi/path-for ssr-routes/only-routes ::route/edit-submit))
+                :hx-ext "response-targets,alpine-morph"))
      :render-timeline? false))
   (steps [_]
     [:links])
@@ -1430,6 +1415,18 @@
                    (fc/with-field :transaction/accounts
                      (account-grid-body* request)))))
 
+(defn render-full-form
+  "Helper to render the complete transaction edit form for whole-form re-rendering."
+  [request]
+  (mm/render-wizard edit-wizard request))
+
+(defn edit-form-changed-handler
+  "Generic handler that re-renders the whole form. Used when any field changes
+   and we need the server to re-compute dependent fields."
+  [request]
+  (html-response
+   (render-full-form request)))
+
 (defn edit-vendor-changed-handler [request]
   (let [multi-form-state (:multi-form-state request)
         snapshot (:snapshot multi-form-state)
@@ -1439,7 +1436,7 @@
                           "simple"))
         client-id (or (:transaction/client snapshot)
                       (-> request :entity :transaction/client :db/id))
-        vendor-id (or (:transaction/vendor step-params)
+        vendor-id (or (->db-id (:transaction/vendor step-params))
                       (->db-id (get step-params "transaction/vendor"))
                       (:transaction/vendor snapshot))
         total (Math/abs (or (-> request :entity :transaction/amount)
@@ -1466,16 +1463,14 @@
               (let [new-account (cond-> {:db/id (str (java.util.UUID/randomUUID))
                                          :transaction-account/location (or (:account/location default-account) "Shared")
                                          :transaction-account/amount (if (= amount-mode "%") 100.0 total)}
-                                   default-account (assoc :transaction-account/account (:db/id default-account)))]
+                                  default-account (assoc :transaction-account/account (:db/id default-account)))]
                 (-> request
                     (assoc-in [:multi-form-state :snapshot :transaction/accounts] [new-account])
                     (assoc-in [:multi-form-state :step-params :transaction/accounts] [new-account])))
               request)
             (assoc-in [:multi-form-state :step-params :transaction/vendor] vendor-id))]
     (html-response
-     (fc/start-form (:multi-form-state render-request) nil
-                    (fc/with-field :step-params
-                      (manual-coding-section* mode render-request))))))
+     (render-full-form render-request))))
 
 (defn edit-wizard-toggle-mode-handler [request]
   (let [step-params (-> request :multi-form-state :step-params)
@@ -1493,7 +1488,9 @@
                 (assoc-in [:multi-form-state :snapshot :transaction/accounts]
                           (vec accounts))
                 (assoc-in [:multi-form-state :step-params :transaction/accounts]
-                          (vec accounts))))
+                          (vec accounts))
+                (assoc-in [:multi-form-state :step-params :mode]
+                          (name target-mode))))
           ;; advanced→simple: take first row only
           (let [first-row (first (or (seq (:transaction/accounts step-params))
                                      (seq (:transaction/accounts snapshot))))]
@@ -1501,11 +1498,46 @@
                 (assoc-in [:multi-form-state :snapshot :transaction/accounts]
                           (if first-row [first-row] []))
                 (assoc-in [:multi-form-state :step-params :transaction/accounts]
-                          (if first-row [first-row] [])))))]
+                          (if first-row [first-row] []))
+                (assoc-in [:multi-form-state :step-params :mode]
+                          (name target-mode)))))]
     (html-response
-     (fc/start-form (:multi-form-state render-request) nil
-                    (fc/with-field :step-params
-                      (manual-coding-section* target-mode render-request))))))
+     (render-full-form render-request))))
+
+(defn edit-wizard-new-account-handler
+  "Adds a new account row and re-renders the whole form."
+  [request]
+  (let [snapshot (-> request :multi-form-state :snapshot)
+        amount-mode (or (:amount-mode snapshot) "$")
+        total (Math/abs (or (:transaction/amount snapshot) 0.0))
+        new-account {:db/id (str (java.util.UUID/randomUUID))
+                     :new? true
+                     :transaction-account/location "Shared"
+                     :transaction-account/amount (if (= amount-mode "%") 100.0 total)}
+        accounts (vec (or (:transaction/accounts snapshot) []))
+        updated-accounts (conj accounts new-account)
+        updated-request (-> request
+                            (assoc-in [:multi-form-state :snapshot :transaction/accounts] updated-accounts)
+                            (assoc-in [:multi-form-state :step-params :transaction/accounts] updated-accounts))]
+    (html-response
+     (render-full-form updated-request))))
+
+(defn edit-wizard-remove-account-handler
+  "Removes an account row and re-renders the whole form.
+   Expects a row-index in the form params."
+  [request]
+  (let [row-index (some-> request :form-params (get "row-index") Integer/parseInt)
+        snapshot (-> request :multi-form-state :snapshot)
+        accounts (vec (or (:transaction/accounts snapshot) []))
+        updated-accounts (if (and row-index (< row-index (count accounts)))
+                           (vec (concat (subvec accounts 0 row-index)
+                                        (subvec accounts (inc row-index))))
+                           accounts)
+        updated-request (-> request
+                            (assoc-in [:multi-form-state :snapshot :transaction/accounts] updated-accounts)
+                            (assoc-in [:multi-form-state :step-params :transaction/accounts] updated-accounts))]
+    (html-response
+     (render-full-form updated-request))))
 
 (def key->handler
   (apply-middleware-to-all-handlers
@@ -1544,6 +1576,10 @@
                                 (mm/wrap-wizard edit-wizard)
                                 (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
                                 (mm/wrap-decode-multi-form-state))
+    ::route/edit-form-changed (-> edit-form-changed-handler
+                                  (mm/wrap-wizard edit-wizard)
+                                  (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
+                                  (mm/wrap-decode-multi-form-state))
     ::route/toggle-amount-mode (-> toggle-amount-mode
                                    (mm/wrap-wizard edit-wizard)
                                    (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
@@ -1552,22 +1588,14 @@
                                         (mm/wrap-wizard edit-wizard)
                                         (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
                                         (mm/wrap-decode-multi-form-state))
-    ::route/edit-wizard-new-account (->
-                                     (add-new-entity-handler [:step-params :transaction/accounts]
-                                                             (fn render [cursor request]
-                                                               (let [snapshot (-> request :multi-form-state :snapshot)
-                                                                     amount-mode (or (:amount-mode snapshot) "$")
-                                                                     total (Math/abs (or (:transaction/amount snapshot) 0.0))]
-                                                                 (transaction-account-row*
-                                                                  {:value cursor
-                                                                   :client-id (:client-id (:query-params request))
-                                                                   :amount-mode amount-mode
-                                                                   :total total})))
-                                                             (fn build-new-row [base _]
-                                                               (assoc base :transaction-account/location "Shared")))
-                                     (wrap-schema-enforce :query-schema [:map
-                                                                         [:client-id {:optional true}
-                                                                          [:maybe entity-id]]]))
+    ::route/edit-wizard-new-account (-> edit-wizard-new-account-handler
+                                        (mm/wrap-wizard edit-wizard)
+                                        (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
+                                        (mm/wrap-decode-multi-form-state))
+    ::route/edit-wizard-remove-account (-> edit-wizard-remove-account-handler
+                                           (mm/wrap-wizard edit-wizard)
+                                           (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
+                                           (mm/wrap-decode-multi-form-state))
 
     ::route/unlink-payment (-> unlink-payment
                                (wrap-must {:activity :edit :subject :transaction} (fn get-client [request] (-> request :entity :transaction/client)))
diff --git a/src/clj/auto_ap/ssr/ui.clj b/src/clj/auto_ap/ssr/ui.clj
index f9525ccc..ca099d10 100644
--- a/src/clj/auto_ap/ssr/ui.clj
+++ b/src/clj/auto_ap/ssr/ui.clj
@@ -5,13 +5,13 @@
    [hiccup2.core :as hiccup]
    [auto-ap.ssr.components :as com]))
 (defn html-page [hiccup]
-  {:status  200
+  {:status 200
    :headers {"Content-Type" "text/html"}
-   :body    (str
-             "<!DOCTYPE html>"
-             (hiccup/html
-              {}
-              hiccup))})
+   :body (str
+          "<!DOCTYPE html>"
+          (hiccup/html
+           {}
+           hiccup))})
 
 (defn base-page [request contents page-name]
   (html-page
@@ -30,7 +30,7 @@
      [:script {:src "https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-tooltip@1.x.x/dist/cdn.min.js" :defer true}]
      [:link {:rel "stylesheet" :href "/css/tippy/tippy.css"}]
      [:link {:rel "stylesheet" :href "/css/tippy/light.css"}]
-     [:script {:src          "/js/htmx.js"
+     [:script {:src "/js/htmx.js"
                :crossorigin= "anonymous"}]
 
      [:script {:src "https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"}]
@@ -39,14 +39,16 @@
     [:link {:rel "stylesheet" :href "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/css/datepicker.min.css"}]
     [:script {:type "text/javascript" :src "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"}]
     [:script {:src "https://unpkg.com/htmx.org/dist/ext/response-targets.js" :defer true}]
+    [:script {:src "https://unpkg.com/htmx.org@2.0.10/dist/ext/alpine-morph.js"}]
     [:script {:src "https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js" :defer true}]
     [:script {:src "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" :integrity "sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" :crossorigin "anonymous" :referrerpolicy "no-referrer"}]
 
     [:script {:src "https://unpkg.com/dropzone@5.9.3/dist/min/dropzone.min.js" :defer true}]
-    [:link {:rel "stylesheet" :href "https://unpkg.com/dropzone@5/dist/min/dropzone.min.css"  :type "text/css" :defer true}]
+    [:link {:rel "stylesheet" :href "https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" :type "text/css" :defer true}]
     [:script {:defer true :src "/js/alpine-vals.js"}]
     [:script {:defer true :src "https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-clipboard@2.x.x/dist/alpine-clipboard.js"}]
     [:script {:defer true :src "https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"}]
+    [:script {:defer true :src "https://cdn.jsdelivr.net/npm/@alpinejs/morph@3.x.x/dist/cdn.min.js"}]
     [:script {:defer true :src "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"}]
     [:script {:src "https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"}]
     [:script {:src "https://cdn.jsdelivr.net/npm/jdenticon@3.3.0/dist/jdenticon.min.js" :async true :defer true :integrity "sha384-LfouGM03m83ArVtne1JPk926e3SGD0Tz8XHtW2OKGsgeBU/UfR0Fa8eX+UlwSSAZ" :crossorigin "anonymous"}]
@@ -94,14 +96,14 @@ input[type=number] {
              "x-transition:leave-end" "!bg-opacity-0"}
 
        [:div {:class "flex h-full w-full justify-stretch md:justify-center items-stretch md:items-center  "
-              "x-trap.inert.noscroll"    "open"
-              "x-trap.inert"             "open"
-              "x-show"                   "open"
-              "x-transition:enter"       "ease-out duration-300"
+              "x-trap.inert.noscroll" "open"
+              "x-trap.inert" "open"
+              "x-show" "open"
+              "x-transition:enter" "ease-out duration-300"
               "x-transition:enter-start" "!bg-opacity-0 !translate-y-32"
-              "x-transition:enter-end"   "!bg-opacity-100 !translate-y-0"
-              "x-transition:leave"       "duration-300"
+              "x-transition:enter-end" "!bg-opacity-100 !translate-y-0"
+              "x-transition:leave" "duration-300"
               "x-transition:leave-start" "!opacity-100 !translate-y-0"
-              "x-transition:leave-end"   "!opacity-0 !translate-y-32"}
+              "x-transition:leave-end" "!opacity-0 !translate-y-32"}
 
         [:div#modal-content.flex.items-center.justify-center {:class "md:p-12"}]]]]]]))
diff --git a/src/cljc/auto_ap/routes/transactions.cljc b/src/cljc/auto_ap/routes/transactions.cljc
index e75f28a0..30f77dcc 100644
--- a/src/cljc/auto_ap/routes/transactions.cljc
+++ b/src/cljc/auto_ap/routes/transactions.cljc
@@ -33,7 +33,9 @@
              "/account-total" ::account-total
              "/account-balance" ::account-balance
              "/toggle-amount-mode" ::toggle-amount-mode
+             "/edit-form-changed" ::edit-form-changed
              "/edit-wizard-new-account" ::edit-wizard-new-account
+             "/edit-wizard-remove-account" ::edit-wizard-remove-account
              "/edit-wizard-toggle-mode" ::edit-wizard-toggle-mode
              "/match-payment" ::link-payment
              "/match-autopay-invoices" ::link-autopay-invoices
diff --git a/test/clj/auto_ap/test_server.clj b/test/clj/auto_ap/test_server.clj
index b944de17..3815c82c 100644
--- a/test/clj/auto_ap/test_server.clj
+++ b/test/clj/auto_ap/test_server.clj
@@ -100,6 +100,9 @@
                                  {:db/id "vendor-id"
                                   :vendor/name "Test Vendor"
                                   :vendor/default-account "account-id"}
+                                 {:db/id "vendor-id-2"
+                                  :vendor/name "Second Vendor"
+                                  :vendor/default-account "account-id-2"}
                                  (test-transaction :db/id "transaction-id"
                                                    :transaction/client "client-id"
                                                    :transaction/bank-account "bank-account-id"
@@ -135,19 +138,19 @@
                                                :payment/status :payment-status/pending
                                                :payment/date #inst "2023-06-15")
                                   ;; Transaction and unpaid invoice for link testing
-                                  (test-transaction :db/id "transaction-id-unpaid"
-                                                    :transaction/client "client-id"
-                                                    :transaction/bank-account "bank-account-id"
-                                                    :transaction/amount -150.0
-                                                    :transaction/description-original "Transaction for unpaid invoice link"
-                                                    :transaction/approval-status :transaction-approval-status/unapproved)
-                                   (test-transaction :db/id "transaction-id-feedback"
-                                                     :transaction/client "client-id"
-                                                     :transaction/bank-account "bank-account-id"
-                                                     :transaction/amount 400.0
-                                                     :transaction/description-original "Transaction for feedback review"
-                                                     :transaction/approval-status :transaction-approval-status/requires-feedback)
-                                  (test-invoice :db/id "invoice-unpaid-id"
+                                 (test-transaction :db/id "transaction-id-unpaid"
+                                                   :transaction/client "client-id"
+                                                   :transaction/bank-account "bank-account-id"
+                                                   :transaction/amount -150.0
+                                                   :transaction/description-original "Transaction for unpaid invoice link"
+                                                   :transaction/approval-status :transaction-approval-status/unapproved)
+                                 (test-transaction :db/id "transaction-id-feedback"
+                                                   :transaction/client "client-id"
+                                                   :transaction/bank-account "bank-account-id"
+                                                   :transaction/amount 400.0
+                                                   :transaction/description-original "Transaction for feedback review"
+                                                   :transaction/approval-status :transaction-approval-status/requires-feedback)
+                                 (test-invoice :db/id "invoice-unpaid-id"
                                                :invoice/client "client-id"
                                                :invoice/vendor "vendor-id"
                                                :invoice/total 150.0
@@ -166,7 +169,8 @@
              :second-account (get tempids "account-id-2")
              :fixed-location-account (get tempids "account-id-fixed-loc")
              :ap-account (get tempids "ap-account-id")
-             :vendor (get tempids "vendor-id")})
+             :vendor (get tempids "vendor-id")
+             :vendor2 (get tempids "vendor-id-2")})
     (reset! test-client-ids
             {:test (get tempids "client-id")
              :test2 (get tempids "client-id-2")})
-- 
2.49.1


From a2684bf5c164818781d4bd1a79f33dae7abe8d80 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Mon, 1 Jun 2026 08:10:05 -0700
Subject: [PATCH 02/20] Replace alpine-morph with targeted hx-select / OOB
 swaps

Drop the whole-form alpine-morph swap in favour of posting the whole form
but swapping back only what changed, never the input the user is editing --
so focus and caret survive a plain swap with no morph extension.

- Discrete changes (vendor, account, location, mode, add/remove row) swap the
  #manual-coding-section fragment via hx-select, plus an OOB refresh of the
  #wizard-snapshot hidden field so the round-tripped wizard state stays in sync
  (the snapshot lives at #wizard-form level, outside the swapped fragment, and
  the new/remove-account handlers read it).
- The amount field OOB-swaps only #total/#balance (hx-swap=none); memo posts
  with hx-swap=none. Neither input is ever replaced.
- Give the BALANCE cell a unique id (#balance) so the OOB selector is unambiguous.
- Remove the alpine-morph ext + @alpinejs/morph plugin and all the key/x-data
  re-init tricks they required. Rebuilding the fragment fresh makes vendor->account
  population and repeat vendor changes work without any keying.
- Rename e2e/transaction-edit-morph.spec.ts -> -swap.spec.ts; assertions unchanged
  (focus/caret preservation, vendor->account, repeat vendor changes all hold).

Full e2e suite: 27 passed / 2 failed (both pre-existing and unrelated -- the
legacy save-flow test and the date-range filter test).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 ....spec.ts => transaction-edit-swap.spec.ts} | 85 +++++++++--------
 .../auto_ap/ssr/components/multi_modal.clj    |  5 +
 src/clj/auto_ap/ssr/transaction/edit.clj      | 91 ++++++++++---------
 src/clj/auto_ap/ssr/ui.clj                    |  2 -
 4 files changed, 99 insertions(+), 84 deletions(-)
 rename e2e/{transaction-edit-morph.spec.ts => transaction-edit-swap.spec.ts} (81%)

diff --git a/e2e/transaction-edit-morph.spec.ts b/e2e/transaction-edit-swap.spec.ts
similarity index 81%
rename from e2e/transaction-edit-morph.spec.ts
rename to e2e/transaction-edit-swap.spec.ts
index 6ee9ca62..27d79e0a 100644
--- a/e2e/transaction-edit-morph.spec.ts
+++ b/e2e/transaction-edit-swap.spec.ts
@@ -1,11 +1,19 @@
 import { test, expect } from '@playwright/test';
 
-// These tests cover the "render the whole form via an htmx + alpine morph swap"
-// behaviour on the transaction edit page. The whole-form approach exists so that
-// any edit can hit its own route yet re-render the entire form, while keeping the
-// user's focus and caret position intact (which a plain innerHTML swap destroys).
+// These tests cover the "post the whole form, swap back only what changed"
+// behaviour on the transaction edit page. Each edit hits its own route and the
+// server re-renders the entire form, but the client swaps back a targeted slice:
+//   - discrete changes (vendor, account, location, mode, add/remove row) swap
+//     the #manual-coding-section fragment via hx-select (+ an OOB refresh of the
+//     #wizard-snapshot hidden field so the round-tripped wizard state stays in
+//     sync);
+//   - typed fields never swap the input the user is in -- the amount field
+//     OOB-swaps only the #total/#balance cells (hx-swap=none), and the memo
+//     posts with hx-swap=none.
+// Because the active input is never part of a swapped region, focus and caret
+// survive a plain swap with no morph extension involved.
 
-// Collect any uncaught page errors or console errors so a morph that throws
+// Collect any uncaught page errors or console errors so a swap that throws
 // (e.g. a tooltip callback dereferencing a stale $refs) fails the test loudly.
 function trackErrors(page: any): string[] {
   const errors: string[] = [];
@@ -28,7 +36,7 @@ async function openManualAdvanced(page: any, transactionIndex = 0) {
   await page.click('button:has-text("Manual")');
 
   // First transaction has no accounts so it opens in "simple" mode. Switch to
-  // advanced mode (a whole-form morph swap) so the account grid is present.
+  // advanced mode (a section swap) so the account grid is present.
   const advancedLink = page.locator('a:has-text("Switch to advanced mode")');
   if (await advancedLink.count()) {
     await advancedLink.first().click();
@@ -37,7 +45,7 @@ async function openManualAdvanced(page: any, transactionIndex = 0) {
 }
 
 // Drives the vendor typeahead like a user: open the dropdown, inject a result
-// (Solr is unavailable in tests), click it, and wait for the whole-form morph.
+// (Solr is unavailable in tests), click it, and wait for the section swap.
 async function selectVendor(page: any, vendorId: number, label: string) {
   const vendor = page
     .locator('div[hx-post*="edit-vendor-changed"]')
@@ -63,9 +71,9 @@ async function selectVendor(page: any, vendorId: number, label: string) {
   await page.waitForTimeout(400);
 }
 
-// Removes every existing account row (each remove is its own whole-form morph),
-// so a test starts from a known-empty state regardless of what earlier tests
-// saved onto the shared transaction.
+// Removes every existing account row (each remove is its own section swap), so a
+// test starts from a known-empty state regardless of what earlier tests saved
+// onto the shared transaction.
 async function clearAccounts(page: any) {
   // eslint-disable-next-line no-constant-condition
   while (true) {
@@ -81,13 +89,13 @@ async function clearAccounts(page: any) {
 
 test.describe.configure({ mode: 'serial' });
 
-test.describe('Transaction Edit whole-form morph', () => {
-  test('morph swaps (toggle mode, add account) do not throw', async ({ page }) => {
+test.describe('Transaction Edit whole-form swap', () => {
+  test('section swaps (toggle mode, add account) do not throw', async ({ page }) => {
     const errors = trackErrors(page);
 
     await openManualAdvanced(page, 0);
 
-    // Add an account row -- another whole-form morph swap.
+    // Add an account row -- another section swap.
     await page
       .locator('#account-grid-body')
       .locator('button:has-text("New account"), a:has-text("New account")')
@@ -98,12 +106,12 @@ test.describe('Transaction Edit whole-form morph', () => {
       .poll(async () => page.locator('#account-grid-body tbody tr.account-row').count())
       .toBeGreaterThan(0);
 
-    // The form must survive the morph intact.
+    // The form must survive the swap intact.
     await expect(page.locator('#wizard-form')).toHaveCount(1);
     expect(errors, errors.join('\n')).toEqual([]);
   });
 
-  test('keeps focus and typed value in the amount field across a morph', async ({ page }) => {
+  test('keeps focus and typed value in the amount field across a swap', async ({ page }) => {
     const errors = trackErrors(page);
 
     await openManualAdvanced(page, 0);
@@ -125,9 +133,10 @@ test.describe('Transaction Edit whole-form morph', () => {
     await amount.waitFor();
 
     // Type a clean value via the keyboard. Typing fires the field's htmx trigger
-    // (keyup), which posts to a per-field route and morphs the whole form back
-    // in. The amount field is type=number (no text caret), so we assert focus +
-    // node identity + value -- the guarantees morph gives that innerHTML can't.
+    // (keyup), which posts the whole form but swaps back ONLY the total/balance
+    // cells out-of-band (hx-swap=none on the field itself). The amount field is
+    // type=number (no text caret), so we assert focus + node identity + value --
+    // the input is never replaced, which is what makes that hold.
     await amount.click();
     await amount.press('Control+a');
 
@@ -139,7 +148,7 @@ test.describe('Transaction Edit whole-form morph', () => {
     );
     await amount.pressSequentially('150', { delay: 40 });
 
-    // Identify the live focused node (before the debounced morph lands) so we can
+    // Identify the live focused node (before the debounced swap lands) so we can
     // prove the *same* node survives.
     await page.evaluate(() => {
       (window as any).__focusedAmount = document.activeElement;
@@ -157,20 +166,21 @@ test.describe('Transaction Edit whole-form morph', () => {
       };
     });
 
-    // Focus must stay on the amount field after the morph...
+    // Focus must stay on the amount field after the swap...
     expect(state.isAmountField).toBe(true);
-    // ...on the very same DOM node (this is what morph buys us over innerHTML)...
+    // ...on the very same DOM node (the input is never part of the swapped region)...
     expect(state.sameNode).toBe(true);
     // ...with the value the user typed left intact.
     expect(state.value).toBe('150');
 
-    // The TOTAL must have recomputed server-side from the posted amount.
+    // The TOTAL must have recomputed server-side from the posted amount and been
+    // applied via the out-of-band swap.
     await expect(page.locator('.account-total-row #total')).toContainText('150');
 
     expect(errors, errors.join('\n')).toEqual([]);
   });
 
-  test('preserves caret position in the memo text field across a morph', async ({ page }) => {
+  test('preserves caret position in the memo text field across a swap', async ({ page }) => {
     const errors = trackErrors(page);
 
     await page.goto('/transaction2');
@@ -182,7 +192,8 @@ test.describe('Transaction Edit whole-form morph', () => {
     await memo.waitFor();
 
     // Clear any seeded memo text, then type "hello" via the keyboard (fires the
-    // field's htmx keyup trigger) and let that first whole-form morph settle.
+    // field's htmx keyup trigger) and let that first post settle. Memo posts with
+    // hx-swap=none, so nothing is swapped back into the field.
     await memo.click();
     await memo.press('Control+a');
     const firstSwap = page.waitForResponse(
@@ -204,7 +215,7 @@ test.describe('Transaction Edit whole-form morph', () => {
       (window as any).__focusedMemo = document.activeElement;
     });
 
-    // Insert a char at the caret -> "heXllo", caret moves to 3, fires the swap.
+    // Insert a char at the caret -> "heXllo", caret moves to 3, fires the post.
     const memoSwap = page.waitForResponse(
       (r: any) =>
         r.url().includes('edit-form-changed') &&
@@ -239,7 +250,7 @@ test.describe('Transaction Edit whole-form morph', () => {
     await openManualAdvanced(page, 0);
 
     // Start from a clean, empty account row so selecting the account actually
-    // changes accountId (and fires the change-gated whole-form morph).
+    // changes accountId (and fires the change-gated section swap).
     await clearAccounts(page);
     await page
       .locator('#account-grid-body')
@@ -260,7 +271,7 @@ test.describe('Transaction Edit whole-form morph', () => {
 
     // Account search is backed by Solr (unavailable in tests), so type under the
     // 3-char threshold and inject a clickable result into the typeahead state --
-    // the click handler, tippy.hide(), Alpine reactivity and HTMX morph all run
+    // the click handler, tippy.hide(), Alpine reactivity and the HTMX swap all run
     // exactly as in production.
     await search.fill('te');
     const testInfo = await (await page.request.get('/test-info')).json();
@@ -269,9 +280,8 @@ test.describe('Transaction Edit whole-form morph', () => {
       (window as any).Alpine.$data(el).elements = [{ value: id, label: 'Test Account' }];
     }, accountId);
 
-    // Clicking the result runs `value = element; tippy.hide(); ...`. Before the
-    // fix this threw "tippy is null" because the cached tippy var was stale after
-    // an earlier morph.
+    // Clicking the result runs `value = element; tippy.hide(); ...` and dispatches
+    // the change that fires the section swap.
     const swap = page.waitForResponse(
       (r: any) =>
         r.url().includes('edit-form-changed') &&
@@ -282,7 +292,7 @@ test.describe('Transaction Edit whole-form morph', () => {
     await swap;
     await page.waitForTimeout(300);
 
-    // The chosen account must survive the whole-form morph.
+    // The chosen account must survive the section swap.
     const hidden = page
       .locator('#account-grid-body tbody tr.account-row')
       .first()
@@ -293,7 +303,7 @@ test.describe('Transaction Edit whole-form morph', () => {
     expect(errors, errors.join('\n')).toEqual([]);
   });
 
-  test('selecting a vendor populates its default account across the morph', async ({ page }) => {
+  test('selecting a vendor populates its default account across the swap', async ({ page }) => {
     const errors = trackErrors(page);
 
     // Open the modal in simple mode (transaction 0 has no accounts).
@@ -329,9 +339,9 @@ test.describe('Transaction Edit whole-form morph', () => {
     await swap;
     await page.waitForTimeout(400);
 
-    // The vendor's default account must now be reflected in the account field --
-    // this is the bug the `key` re-init fixes: a server-driven value change into an
-    // Alpine-stateful typeahead that morph would otherwise preserve as empty.
+    // The vendor's default account must now be reflected in the account field.
+    // Because the section is rebuilt fresh from the server (no preserved Alpine
+    // state), the server-driven account value lands without any keying tricks.
     const accountHidden = page
       .locator('input[type="hidden"][name*="transaction-account/account"]')
       .first();
@@ -371,8 +381,9 @@ test.describe('Transaction Edit whole-form morph', () => {
     await expect(vendorLabel).toHaveText('Test Vendor');
     await expect(accountHidden).toHaveValue(account1.toString());
 
-    // Second vendor -- this is the regression: a morph-preserved typeahead lost its
-    // value watcher, so the second change fired no request at all.
+    // Second vendor -- the regression guard: the section (and its vendor
+    // typeahead) is rebuilt fresh on every swap, so a second change still fires
+    // its request and updates the default account.
     await selectVendor(page, vendor2, 'Second Vendor');
     await expect(vendorLabel).toHaveText('Second Vendor');
     await expect(accountHidden).toHaveValue(account2.toString());
diff --git a/src/clj/auto_ap/ssr/components/multi_modal.clj b/src/clj/auto_ap/ssr/components/multi_modal.clj
index 898343bb..f7f76ec6 100644
--- a/src/clj/auto_ap/ssr/components/multi_modal.clj
+++ b/src/clj/auto_ap/ssr/components/multi_modal.clj
@@ -305,6 +305,11 @@
                     (list
                      (fc/with-field :snapshot
                        (com/hidden {:name (fc/field-name)
+                                    ;; Stable id so a partial swap (e.g. the transaction
+                                    ;; edit form swapping only #manual-coding-section) can
+                                    ;; refresh the encoded snapshot out-of-band and keep the
+                                    ;; round-tripped wizard state in sync.
+                                    :id "wizard-snapshot"
                                     :value (pr-str (fc/field-value))}))
                      (fc/with-field :edit-path
                        (com/hidden {:name (fc/field-name)
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index 924670a9..59fec8b2 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -233,8 +233,10 @@
                :x-dispatch:changed "simpleAccountId"
                :hx-trigger "changed"
                :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-               :hx-target "#wizard-form"
-               :hx-swap "morph"
+               :hx-target "#manual-coding-section"
+               :hx-select "#manual-coding-section"
+               :hx-select-oob "#wizard-snapshot"
+               :hx-swap "outerHTML"
                :hx-include "closest form"}
               (location-select*
                {:name (fc/field-name)
@@ -248,8 +250,10 @@
       [:a.text-sm.text-blue-600.hover:underline.cursor-pointer
        {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-toggle-mode)
         :hx-include "closest form"
-        :hx-target "#wizard-form"
-        :hx-swap "morph"}
+        :hx-target "#manual-coding-section"
+        :hx-select "#manual-coding-section"
+        :hx-select-oob "#wizard-snapshot"
+        :hx-swap "outerHTML"}
        "Switch to advanced mode"]]]))
 
 (defn- manual-mode-initial
@@ -264,11 +268,6 @@
   (com/data-grid-row
    (-> {:class "account-row"
         :id (str "account-row-" index)
-        ;; Key the row by its account id (alpine-morph keys off `key`, not `id`) so
-        ;; a server-driven account change re-inits the row's x-data. Otherwise morph
-        ;; preserves the stale accountId and the account typeahead (x-model="accountId")
-        ;; snaps back to the old value.
-        :key (str "account-row-" index "--" (fc/field-value (:transaction-account/account value)))
         :x-data (hx/json {:show (boolean (not (fc/field-value (:new? value))))
                           :accountId (fc/field-value (:transaction-account/account value))})
         :data-key "show"
@@ -297,8 +296,10 @@
         :x-dispatch:changed "accountId"
         :hx-trigger "changed"
         :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-        :hx-target "#wizard-form"
-        :hx-swap "morph"
+        :hx-target "#manual-coding-section"
+        :hx-select "#manual-coding-section"
+        :hx-select-oob "#wizard-snapshot"
+        :hx-swap "outerHTML"
         :hx-include "closest form"}
        (location-select* {:name (fc/field-name)
                           :account-location (:account/location (cond->> (:transaction-account/account @value)
@@ -311,16 +312,17 @@
       {}
       (com/validated-field
        {:errors (fc/field-errors)}
-       ;; Editing an amount re-renders the whole form (so TOTAL/BALANCE recompute).
-       ;; The stable id lets alpine-morph match this exact input across the swap,
-       ;; keeping the user's focus and caret while they type.
        (let [amount-attrs {:name (fc/field-name)
                            :id (str "account-amount-" index)
                            :class "w-16 account-amount-field"
                            :value (fc/field-value)
                            :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-                           :hx-target "#wizard-form"
-                           :hx-swap "morph"
+ ;; Typing an amount posts the whole form but swaps NOTHING into the field
+ ;; itself (hx-swap=none). Only the TOTAL and BALANCE cells are pulled out of
+ ;; the response and applied out-of-band, so the amount input is never replaced
+ ;; and the user's focus + caret survive with no morph involved.
+                           :hx-select-oob "#total,#balance"
+                           :hx-swap "none"
                            :hx-trigger "keyup changed delay:300ms"
                            :hx-include "closest form"}]
          (if (= "%" amount-mode)
@@ -329,8 +331,10 @@
    (com/data-grid-cell {:class "align-top"}
                        (com/a-icon-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-remove-account)
                                            :hx-vals (hx/json {:row-index (or index 0)})
-                                           :hx-target "#wizard-form"
-                                           :hx-swap "morph"
+                                           :hx-target "#manual-coding-section"
+                                           :hx-select "#manual-coding-section"
+                                           :hx-select-oob "#wizard-snapshot"
+                                           :hx-swap "outerHTML"
                                            :hx-include "closest form"
                                            :class "account-remove-action"} svg/x))))
 
@@ -471,8 +475,10 @@
                                                                      :name "step-params[amount-mode]"
                                                                      :orientation :horizontal
                                                                      :hx-post (bidi/path-for ssr-routes/only-routes ::route/toggle-amount-mode)
-                                                                     :hx-target "#wizard-form"
-                                                                     :hx-swap "morph"
+                                                                     :hx-target "#manual-coding-section"
+                                                                     :hx-select "#manual-coding-section"
+                                                                     :hx-select-oob "#wizard-snapshot"
+                                                                     :hx-swap "outerHTML"
                                                                      :hx-include "closest form"}))
                               (com/data-grid-header {:class "w-16"})]}
                    (fc/cursor-map (fn [cursor]
@@ -485,8 +491,10 @@
                    (com/data-grid-row {:class "new-row"}
                                       (com/data-grid-cell {:colspan 4}
                                                           (com/a-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-new-account)
-                                                                         :hx-target "#wizard-form"
-                                                                         :hx-swap "morph"
+                                                                         :hx-target "#manual-coding-section"
+                                                                         :hx-select "#manual-coding-section"
+                                                                         :hx-select-oob "#wizard-snapshot"
+                                                                         :hx-swap "outerHTML"
                                                                          :hx-include "closest form"
                                                                          :color :secondary}
                                                                         "New account")))
@@ -501,7 +509,7 @@
                    (com/data-grid-row {:class "account-balance-row"}
                                       (com/data-grid-cell {})
                                       (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "BALANCE"])
-                                      (com/data-grid-cell {:id "total"
+                                      (com/data-grid-cell {:id "balance"
                                                            :class "text-right"}
                                                           (account-balance* request))
                                       (com/data-grid-cell {}))
@@ -528,8 +536,10 @@
      (com/hidden {:name "step-params[mode]" :value (name mode)})
      [:div {:hx-trigger "change"
             :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-vendor-changed)
-            :hx-target "#wizard-form"
-            :hx-swap "morph"
+            :hx-target "#manual-coding-section"
+            :hx-select "#manual-coding-section"
+            :hx-select-oob "#wizard-snapshot"
+            :hx-swap "outerHTML"
             :hx-sync "this:replace"
             :hx-include "closest form"}
       (fc/with-field :transaction/vendor
@@ -537,11 +547,6 @@
          {:label "Vendor" :errors (fc/field-errors)}
          [:div.w-96
           (com/typeahead {:name (fc/field-name)
-                          ;; Key the vendor typeahead by its value so alpine-morph re-creates
-                          ;; it on each vendor change. A morph-preserved typeahead loses its
-                          ;; value $watch -> change dispatch, so a *second* vendor change would
-                          ;; otherwise never fire its htmx request.
-                          :id (fc/field-name)
                           :error? (fc/error?)
                           :class "w-96"
                           :placeholder "Search..."
@@ -551,13 +556,7 @@
      (if (= mode :simple)
        (let [simple-account-id (let [av (-> (first all-accounts) :transaction-account/account)]
                                  (if (map? av) (:db/id av) av))]
-         ;; Key this wrapper by the account id so alpine-morph re-inits its x-data
-         ;; when the server changes the account (e.g. a vendor selection populating
-         ;; its default account). Without a changing key, morph keeps the stale
-         ;; simpleAccountId and the nested typeahead's x-model="simpleAccountId"
-         ;; binds back to the empty value. alpine-morph keys off `key`, not `id`.
-         [:div {:key (str "simple-account-wrapper--" simple-account-id)
-                :x-data (hx/json {:simpleAccountId simple-account-id})}
+         [:div {:x-data (hx/json {:simpleAccountId simple-account-id})}
           (simple-mode-fields* request)])
        [:div
         (when (<= row-count 1)
@@ -565,8 +564,10 @@
            [:a.text-sm.text-blue-600.hover:underline.cursor-pointer
             {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-toggle-mode)
              :hx-include "closest form"
-             :hx-target "#wizard-form"
-             :hx-swap "morph"}
+             :hx-target "#manual-coding-section"
+             :hx-select "#manual-coding-section"
+             :hx-select-oob "#wizard-snapshot"
+             :hx-swap "outerHTML"}
             "Switch to simple mode"]])
         (fc/with-field :transaction/accounts
           (com/validated-field
@@ -878,17 +879,17 @@
                   {:label "Memo"
                    :errors (fc/field-errors)}
                   [:div.w-96
-                   ;; Memo edits re-render the whole form via morph. The stable id
-                   ;; lets alpine-morph match this input across the swap so the
-                   ;; caret stays put while the user types.
                    (com/text-input {:value (-> (fc/field-value))
                                     :name (fc/field-name)
                                     :id "edit-memo"
                                     :error? (fc/field-errors)
                                     :placeholder "Optional note"
                                     :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-                                    :hx-target "#wizard-form"
-                                    :hx-swap "morph"
+                                    ;; Memo has no dependent UI, so it posts only to keep the
+                                    ;; server snapshot in sync and swaps nothing back in. With
+                                    ;; hx-swap=none the input is never touched, so the caret
+                                    ;; stays put with no morph.
+                                    :hx-swap "none"
                                     :hx-trigger "keyup changed delay:300ms"
                                     :hx-include "closest form"})]))
                [:div {:x-data (hx/json {:activeForm (if (:transaction/payment (:entity request))
@@ -1372,7 +1373,7 @@
      (-> mm/default-form-props
          (assoc :hx-post
                 (str (bidi/path-for ssr-routes/only-routes ::route/edit-submit))
-                :hx-ext "response-targets,alpine-morph"))
+                :hx-ext "response-targets"))
      :render-timeline? false))
   (steps [_]
     [:links])
diff --git a/src/clj/auto_ap/ssr/ui.clj b/src/clj/auto_ap/ssr/ui.clj
index ca099d10..19cabe50 100644
--- a/src/clj/auto_ap/ssr/ui.clj
+++ b/src/clj/auto_ap/ssr/ui.clj
@@ -39,7 +39,6 @@
     [:link {:rel "stylesheet" :href "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/css/datepicker.min.css"}]
     [:script {:type "text/javascript" :src "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"}]
     [:script {:src "https://unpkg.com/htmx.org/dist/ext/response-targets.js" :defer true}]
-    [:script {:src "https://unpkg.com/htmx.org@2.0.10/dist/ext/alpine-morph.js"}]
     [:script {:src "https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js" :defer true}]
     [:script {:src "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" :integrity "sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" :crossorigin "anonymous" :referrerpolicy "no-referrer"}]
 
@@ -48,7 +47,6 @@
     [:script {:defer true :src "/js/alpine-vals.js"}]
     [:script {:defer true :src "https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-clipboard@2.x.x/dist/alpine-clipboard.js"}]
     [:script {:defer true :src "https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"}]
-    [:script {:defer true :src "https://cdn.jsdelivr.net/npm/@alpinejs/morph@3.x.x/dist/cdn.min.js"}]
     [:script {:defer true :src "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"}]
     [:script {:src "https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"}]
     [:script {:src "https://cdn.jsdelivr.net/npm/jdenticon@3.3.0/dist/jdenticon.min.js" :async true :defer true :integrity "sha384-LfouGM03m83ArVtne1JPk926e3SGD0Tz8XHtW2OKGsgeBU/UfR0Fa8eX+UlwSSAZ" :crossorigin "anonymous"}]
-- 
2.49.1


From 5f1bb6db82cfd51ed2e73a86dcbcc9884031ea13 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Mon, 1 Jun 2026 11:01:37 -0700
Subject: [PATCH 03/20] Whole-form hx-select swaps with zero out-of-band swaps

Replace the section-swap + OOB approach with uniform whole-form swaps,
eliminating both out-of-band swaps:

- Discrete edits (vendor, account, location, mode, add/remove row) now swap all
  of #wizard-form via hx-select. The active action/tab already round-trips
  (:action is in edit-form-schema and the tab x-data inits from it), so a
  whole-form swap re-creates the tab state from the server value and the active
  tab is preserved -- no #wizard-snapshot OOB needed, since the snapshot hidden
  field rides along inside the form.
- Move the totals into their own <tbody id="account-totals"> (new optional
  :footer-tbody param on data-grid-) so the amount field updates them with a
  plain targeted swap instead of an OOB swap of #total,#balance. The totals tbody
  is a sibling of the input rows, so the amount input is never replaced.
- Memo unchanged (hx-swap=none).

Net: 0 hx-select-oob, 0 morph. The focus invariant is unchanged -- the typed
field is never inside a region it swaps. Tab clicks stay Alpine (instant); only
the action value round-trips. Revert the now-unneeded #wizard-snapshot id.

Full e2e suite: 27 passed / 2 failed (same pre-existing, unrelated failures).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 e2e/transaction-edit-swap.spec.ts             |  43 ++++----
 src/clj/auto_ap/ssr/components/data_grid.clj  |  10 +-
 .../auto_ap/ssr/components/multi_modal.clj    |   5 -
 src/clj/auto_ap/ssr/transaction/edit.clj      | 103 +++++++++---------
 4 files changed, 77 insertions(+), 84 deletions(-)

diff --git a/e2e/transaction-edit-swap.spec.ts b/e2e/transaction-edit-swap.spec.ts
index 27d79e0a..1fd791ac 100644
--- a/e2e/transaction-edit-swap.spec.ts
+++ b/e2e/transaction-edit-swap.spec.ts
@@ -1,17 +1,17 @@
 import { test, expect } from '@playwright/test';
 
-// These tests cover the "post the whole form, swap back only what changed"
-// behaviour on the transaction edit page. Each edit hits its own route and the
-// server re-renders the entire form, but the client swaps back a targeted slice:
+// These tests cover the "post the whole form, hx-select what to swap" behaviour
+// on the transaction edit page. Each edit hits its own route, the server
+// re-renders the entire form, and the client selects what to swap back -- with
+// no out-of-band swaps and no morph extension:
 //   - discrete changes (vendor, account, location, mode, add/remove row) swap
-//     the #manual-coding-section fragment via hx-select (+ an OOB refresh of the
-//     #wizard-snapshot hidden field so the round-tripped wizard state stays in
-//     sync);
-//   - typed fields never swap the input the user is in -- the amount field
-//     OOB-swaps only the #total/#balance cells (hx-swap=none), and the memo
+//     all of #wizard-form (the active action/tab round-trips through the form,
+//     so it survives the swap);
+//   - typed fields never swap the input the user is in -- the amount field swaps
+//     only the #account-totals tbody (a sibling of the input rows), and the memo
 //     posts with hx-swap=none.
 // Because the active input is never part of a swapped region, focus and caret
-// survive a plain swap with no morph extension involved.
+// survive a plain swap.
 
 // Collect any uncaught page errors or console errors so a swap that throws
 // (e.g. a tooltip callback dereferencing a stale $refs) fails the test loudly.
@@ -36,7 +36,7 @@ async function openManualAdvanced(page: any, transactionIndex = 0) {
   await page.click('button:has-text("Manual")');
 
   // First transaction has no accounts so it opens in "simple" mode. Switch to
-  // advanced mode (a section swap) so the account grid is present.
+  // advanced mode (a whole-form swap) so the account grid is present.
   const advancedLink = page.locator('a:has-text("Switch to advanced mode")');
   if (await advancedLink.count()) {
     await advancedLink.first().click();
@@ -45,7 +45,7 @@ async function openManualAdvanced(page: any, transactionIndex = 0) {
 }
 
 // Drives the vendor typeahead like a user: open the dropdown, inject a result
-// (Solr is unavailable in tests), click it, and wait for the section swap.
+// (Solr is unavailable in tests), click it, and wait for the whole-form swap.
 async function selectVendor(page: any, vendorId: number, label: string) {
   const vendor = page
     .locator('div[hx-post*="edit-vendor-changed"]')
@@ -71,7 +71,7 @@ async function selectVendor(page: any, vendorId: number, label: string) {
   await page.waitForTimeout(400);
 }
 
-// Removes every existing account row (each remove is its own section swap), so a
+// Removes every existing account row (each remove is its own whole-form swap), so a
 // test starts from a known-empty state regardless of what earlier tests saved
 // onto the shared transaction.
 async function clearAccounts(page: any) {
@@ -90,12 +90,12 @@ async function clearAccounts(page: any) {
 test.describe.configure({ mode: 'serial' });
 
 test.describe('Transaction Edit whole-form swap', () => {
-  test('section swaps (toggle mode, add account) do not throw', async ({ page }) => {
+  test('whole-form swaps (toggle mode, add account) do not throw', async ({ page }) => {
     const errors = trackErrors(page);
 
     await openManualAdvanced(page, 0);
 
-    // Add an account row -- another section swap.
+    // Add an account row -- another whole-form swap.
     await page
       .locator('#account-grid-body')
       .locator('button:has-text("New account"), a:has-text("New account")')
@@ -133,10 +133,9 @@ test.describe('Transaction Edit whole-form swap', () => {
     await amount.waitFor();
 
     // Type a clean value via the keyboard. Typing fires the field's htmx trigger
-    // (keyup), which posts the whole form but swaps back ONLY the total/balance
-    // cells out-of-band (hx-swap=none on the field itself). The amount field is
-    // type=number (no text caret), so we assert focus + node identity + value --
-    // the input is never replaced, which is what makes that hold.
+    // (keyup), which posts the whole form but swaps back only the #account-totals
+    // tbody -- a sibling of this input's row, so the input is never replaced. It's
+    // type=number (no text caret), so we assert focus + node identity + value.
     await amount.click();
     await amount.press('Control+a');
 
@@ -174,7 +173,7 @@ test.describe('Transaction Edit whole-form swap', () => {
     expect(state.value).toBe('150');
 
     // The TOTAL must have recomputed server-side from the posted amount and been
-    // applied via the out-of-band swap.
+    // applied via the #account-totals swap.
     await expect(page.locator('.account-total-row #total')).toContainText('150');
 
     expect(errors, errors.join('\n')).toEqual([]);
@@ -250,7 +249,7 @@ test.describe('Transaction Edit whole-form swap', () => {
     await openManualAdvanced(page, 0);
 
     // Start from a clean, empty account row so selecting the account actually
-    // changes accountId (and fires the change-gated section swap).
+    // changes accountId (and fires the change-gated whole-form swap).
     await clearAccounts(page);
     await page
       .locator('#account-grid-body')
@@ -281,7 +280,7 @@ test.describe('Transaction Edit whole-form swap', () => {
     }, accountId);
 
     // Clicking the result runs `value = element; tippy.hide(); ...` and dispatches
-    // the change that fires the section swap.
+    // the change that fires the whole-form swap.
     const swap = page.waitForResponse(
       (r: any) =>
         r.url().includes('edit-form-changed') &&
@@ -292,7 +291,7 @@ test.describe('Transaction Edit whole-form swap', () => {
     await swap;
     await page.waitForTimeout(300);
 
-    // The chosen account must survive the section swap.
+    // The chosen account must survive the whole-form swap.
     const hidden = page
       .locator('#account-grid-body tbody tr.account-row')
       .first()
diff --git a/src/clj/auto_ap/ssr/components/data_grid.clj b/src/clj/auto_ap/ssr/components/data_grid.clj
index e9bd9f3b..148ee01d 100644
--- a/src/clj/auto_ap/ssr/components/data_grid.clj
+++ b/src/clj/auto_ap/ssr/components/data_grid.clj
@@ -45,10 +45,10 @@
     [:label {:for "checkbox-all", :class "sr-only"} "checkbox"]]])
 
 (defn data-grid-
-  [{:keys [headers thead-params id] :as params} & rest]
+  [{:keys [headers thead-params id footer-tbody] :as params} & rest]
   [:div.shrink.overflow-y-scroll
    [:table (merge {:class "w-full text-sm text-left text-gray-500 dark:text-gray-400 shrink"}
-                  (dissoc params :headers :thead-params))
+                  (dissoc params :headers :thead-params :footer-tbody))
     [:thead (update thead-params :class #(-> "text-xs text-gray-800 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 group-[.raw]:sticky group-[.raw]:z-10 group-[.raw]:top-0"
                                              (hh/add-class (or % ""))))
      (into
@@ -56,7 +56,11 @@
       headers)]
     (into
      [:tbody {}]
-     rest)]])
+     rest)
+    ;; Optional second <tbody> (valid HTML) so callers can keep a stable,
+    ;; separately-swappable region in the same table -- e.g. totals rows that
+    ;; update without touching the input-bearing rows above them.
+    footer-tbody]])
 
 ;; needed for tailwind
 ;; lg:table-cell  md:table-cell
diff --git a/src/clj/auto_ap/ssr/components/multi_modal.clj b/src/clj/auto_ap/ssr/components/multi_modal.clj
index f7f76ec6..898343bb 100644
--- a/src/clj/auto_ap/ssr/components/multi_modal.clj
+++ b/src/clj/auto_ap/ssr/components/multi_modal.clj
@@ -305,11 +305,6 @@
                     (list
                      (fc/with-field :snapshot
                        (com/hidden {:name (fc/field-name)
-                                    ;; Stable id so a partial swap (e.g. the transaction
-                                    ;; edit form swapping only #manual-coding-section) can
-                                    ;; refresh the encoded snapshot out-of-band and keep the
-                                    ;; round-tripped wizard state in sync.
-                                    :id "wizard-snapshot"
                                     :value (pr-str (fc/field-value))}))
                      (fc/with-field :edit-path
                        (com/hidden {:name (fc/field-name)
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index 59fec8b2..8f6d7ab5 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -233,9 +233,8 @@
                :x-dispatch:changed "simpleAccountId"
                :hx-trigger "changed"
                :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-               :hx-target "#manual-coding-section"
-               :hx-select "#manual-coding-section"
-               :hx-select-oob "#wizard-snapshot"
+               :hx-target "#wizard-form"
+               :hx-select "#wizard-form"
                :hx-swap "outerHTML"
                :hx-include "closest form"}
               (location-select*
@@ -250,9 +249,8 @@
       [:a.text-sm.text-blue-600.hover:underline.cursor-pointer
        {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-toggle-mode)
         :hx-include "closest form"
-        :hx-target "#manual-coding-section"
-        :hx-select "#manual-coding-section"
-        :hx-select-oob "#wizard-snapshot"
+        :hx-target "#wizard-form"
+        :hx-select "#wizard-form"
         :hx-swap "outerHTML"}
        "Switch to advanced mode"]]]))
 
@@ -296,9 +294,8 @@
         :x-dispatch:changed "accountId"
         :hx-trigger "changed"
         :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-        :hx-target "#manual-coding-section"
-        :hx-select "#manual-coding-section"
-        :hx-select-oob "#wizard-snapshot"
+        :hx-target "#wizard-form"
+        :hx-select "#wizard-form"
         :hx-swap "outerHTML"
         :hx-include "closest form"}
        (location-select* {:name (fc/field-name)
@@ -317,12 +314,12 @@
                            :class "w-16 account-amount-field"
                            :value (fc/field-value)
                            :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
- ;; Typing an amount posts the whole form but swaps NOTHING into the field
- ;; itself (hx-swap=none). Only the TOTAL and BALANCE cells are pulled out of
- ;; the response and applied out-of-band, so the amount input is never replaced
- ;; and the user's focus + caret survive with no morph involved.
-                           :hx-select-oob "#total,#balance"
-                           :hx-swap "none"
+                           ;; Typing an amount posts the whole form but swaps back only the
+                           ;; #account-totals tbody -- a sibling of the input-bearing rows, so
+                           ;; the amount input is never replaced and the caret survives.
+                           :hx-target "#account-totals"
+                           :hx-select "#account-totals"
+                           :hx-swap "outerHTML"
                            :hx-trigger "keyup changed delay:300ms"
                            :hx-include "closest form"}]
          (if (= "%" amount-mode)
@@ -331,9 +328,8 @@
    (com/data-grid-cell {:class "align-top"}
                        (com/a-icon-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-remove-account)
                                            :hx-vals (hx/json {:row-index (or index 0)})
-                                           :hx-target "#manual-coding-section"
-                                           :hx-select "#manual-coding-section"
-                                           :hx-select-oob "#wizard-snapshot"
+                                           :hx-target "#wizard-form"
+                                           :hx-select "#wizard-form"
                                            :hx-swap "outerHTML"
                                            :hx-include "closest form"
                                            :class "account-remove-action"} svg/x))))
@@ -475,12 +471,36 @@
                                                                      :name "step-params[amount-mode]"
                                                                      :orientation :horizontal
                                                                      :hx-post (bidi/path-for ssr-routes/only-routes ::route/toggle-amount-mode)
-                                                                     :hx-target "#manual-coding-section"
-                                                                     :hx-select "#manual-coding-section"
-                                                                     :hx-select-oob "#wizard-snapshot"
+                                                                     :hx-target "#wizard-form"
+                                                                     :hx-select "#wizard-form"
                                                                      :hx-swap "outerHTML"
                                                                      :hx-include "closest form"}))
-                              (com/data-grid-header {:class "w-16"})]}
+                              (com/data-grid-header {:class "w-16"})]
+                    ;; Totals live in their own <tbody id="account-totals"> so the amount
+                    ;; field refreshes them with a plain targeted swap, never swapping the
+                    ;; input-bearing rows above (which would drop the caret).
+                    :footer-tbody
+                    [:tbody {:id "account-totals"}
+                     (com/data-grid-row {:class "account-total-row"}
+                                        (com/data-grid-cell {})
+                                        (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "TOTAL"])
+                                        (com/data-grid-cell {:id "total"
+                                                             :class "text-right"}
+                                                            (account-total* request))
+                                        (com/data-grid-cell {}))
+                     (com/data-grid-row {:class "account-balance-row"}
+                                        (com/data-grid-cell {})
+                                        (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "BALANCE"])
+                                        (com/data-grid-cell {:id "balance"
+                                                             :class "text-right"}
+                                                            (account-balance* request))
+                                        (com/data-grid-cell {}))
+                     (com/data-grid-row {:class "account-grand-total-row"}
+                                        (com/data-grid-cell {})
+                                        (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "TRANSACTION TOTAL"])
+                                        (com/data-grid-cell {:class "text-right"}
+                                                            (format "$%,.2f" total))
+                                        (com/data-grid-cell {}))]}
                    (fc/cursor-map (fn [cursor]
                                     (transaction-account-row* {:value cursor
                                                                :client-id (-> request :entity :transaction/client :db/id)
@@ -491,35 +511,12 @@
                    (com/data-grid-row {:class "new-row"}
                                       (com/data-grid-cell {:colspan 4}
                                                           (com/a-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-new-account)
-                                                                         :hx-target "#manual-coding-section"
-                                                                         :hx-select "#manual-coding-section"
-                                                                         :hx-select-oob "#wizard-snapshot"
+                                                                         :hx-target "#wizard-form"
+                                                                         :hx-select "#wizard-form"
                                                                          :hx-swap "outerHTML"
                                                                          :hx-include "closest form"
                                                                          :color :secondary}
-                                                                        "New account")))
-                   (com/data-grid-row {:class "account-total-row"}
-                                      (com/data-grid-cell {})
-                                      (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "TOTAL"])
-                                      (com/data-grid-cell {:id "total"
-                                                           :class "text-right"}
-                                                          (account-total* request))
-                                      (com/data-grid-cell {}))
-
-                   (com/data-grid-row {:class "account-balance-row"}
-                                      (com/data-grid-cell {})
-                                      (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "BALANCE"])
-                                      (com/data-grid-cell {:id "balance"
-                                                           :class "text-right"}
-                                                          (account-balance* request))
-                                      (com/data-grid-cell {}))
-
-                   (com/data-grid-row {:class "account-grand-total-row"}
-                                      (com/data-grid-cell {})
-                                      (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "TRANSACTION TOTAL"])
-                                      (com/data-grid-cell {:class "text-right"}
-                                                          (format "$%,.2f" total))
-                                      (com/data-grid-cell {})))))
+                                                                        "New account"))))))
 
 (defn manual-coding-section*
   "Renders the vendor field + account/location section for the manual tab.
@@ -536,9 +533,8 @@
      (com/hidden {:name "step-params[mode]" :value (name mode)})
      [:div {:hx-trigger "change"
             :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-vendor-changed)
-            :hx-target "#manual-coding-section"
-            :hx-select "#manual-coding-section"
-            :hx-select-oob "#wizard-snapshot"
+            :hx-target "#wizard-form"
+            :hx-select "#wizard-form"
             :hx-swap "outerHTML"
             :hx-sync "this:replace"
             :hx-include "closest form"}
@@ -564,9 +560,8 @@
            [:a.text-sm.text-blue-600.hover:underline.cursor-pointer
             {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-toggle-mode)
              :hx-include "closest form"
-             :hx-target "#manual-coding-section"
-             :hx-select "#manual-coding-section"
-             :hx-select-oob "#wizard-snapshot"
+             :hx-target "#wizard-form"
+             :hx-select "#wizard-form"
              :hx-swap "outerHTML"}
             "Switch to simple mode"]])
         (fc/with-field :transaction/accounts
-- 
2.49.1


From 482b4802fffa2ce8103d2fcb1fd822ef93303553 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Mon, 1 Jun 2026 20:12:22 -0700
Subject: [PATCH 04/20] Make swaps precise: drop no-op requests, swap only the
 affected field

Refine per-trigger granularity now that the swap target is explicit:

- Memo issues no request at all -- it affects nothing else, so its value just
  rides along in the form and is merged into the snapshot on save. (Changing the
  Location *value* likewise issues no request -- it never did; that cell's request
  is the account->location dependency.)
- Account select swaps only that row's Location cell (#account-location-<index> /
  #simple-account-location) instead of the whole form. Selecting an account only
  affects the valid Location options (computed from the posted account-id), so a
  precise cell swap is safe -- no snapshot dependency.

Account-structural changes (vendor, add/remove row, mode toggle, $/% radio) keep
swapping the whole form: their accounts+amount-mode state is interdependent and
round-trips through the single form-level snapshot hidden field, so a whole-form
swap is what keeps it consistent with zero OOB.

Update the memo test to assert it fires no request and keeps its value/caret.
Full e2e suite: 27 passed / 2 failed (same pre-existing, unrelated failures).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 e2e/transaction-edit-swap.spec.ts        | 38 ++++++---------
 src/clj/auto_ap/ssr/transaction/edit.clj | 60 ++++++++++++------------
 2 files changed, 45 insertions(+), 53 deletions(-)

diff --git a/e2e/transaction-edit-swap.spec.ts b/e2e/transaction-edit-swap.spec.ts
index 1fd791ac..8eb776ff 100644
--- a/e2e/transaction-edit-swap.spec.ts
+++ b/e2e/transaction-edit-swap.spec.ts
@@ -179,9 +179,16 @@ test.describe('Transaction Edit whole-form swap', () => {
     expect(errors, errors.join('\n')).toEqual([]);
   });
 
-  test('preserves caret position in the memo text field across a swap', async ({ page }) => {
+  test('memo edits issue no request and keep their value/caret', async ({ page }) => {
     const errors = trackErrors(page);
 
+    // Memo affects nothing else in the form, so editing it must NOT issue a
+    // request at all -- its value just rides along in the form until save.
+    let memoRequests = 0;
+    page.on('request', (r: any) => {
+      if (r.url().includes('edit-form-changed') && r.method() === 'POST') memoRequests++;
+    });
+
     await page.goto('/transaction2');
     await page.waitForSelector('table tbody tr');
     await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
@@ -190,22 +197,12 @@ test.describe('Transaction Edit whole-form swap', () => {
     const memo = page.locator('#edit-memo');
     await memo.waitFor();
 
-    // Clear any seeded memo text, then type "hello" via the keyboard (fires the
-    // field's htmx keyup trigger) and let that first post settle. Memo posts with
-    // hx-swap=none, so nothing is swapped back into the field.
+    // Clear any seeded memo text and type "hello".
     await memo.click();
     await memo.press('Control+a');
-    const firstSwap = page.waitForResponse(
-      (r: any) =>
-        r.url().includes('edit-form-changed') &&
-        r.request().method() === 'POST' &&
-        r.status() === 200
-    );
     await memo.pressSequentially('hello', { delay: 40 });
-    await firstSwap;
-    await page.waitForTimeout(300);
 
-    // Drop the caret in the middle (text inputs support selection).
+    // Drop the caret in the middle and insert a char -> "heXllo", caret -> 3.
     await memo.evaluate((el: HTMLInputElement) => {
       el.focus();
       el.setSelectionRange(2, 2);
@@ -213,17 +210,10 @@ test.describe('Transaction Edit whole-form swap', () => {
     await page.evaluate(() => {
       (window as any).__focusedMemo = document.activeElement;
     });
-
-    // Insert a char at the caret -> "heXllo", caret moves to 3, fires the post.
-    const memoSwap = page.waitForResponse(
-      (r: any) =>
-        r.url().includes('edit-form-changed') &&
-        r.request().method() === 'POST' &&
-        r.status() === 200
-    );
     await memo.press('X');
-    await memoSwap;
-    await page.waitForTimeout(300);
+
+    // Give the old debounce window a chance to (not) fire.
+    await page.waitForTimeout(500);
 
     const state = await page.evaluate(() => {
       const active = document.activeElement as HTMLInputElement;
@@ -235,6 +225,8 @@ test.describe('Transaction Edit whole-form swap', () => {
       };
     });
 
+    // No request fired, and the value/caret are simply intact (nothing swapped).
+    expect(memoRequests).toBe(0);
     expect(state.id).toBe('edit-memo');
     expect(state.sameNode).toBe(true);
     expect(state.value).toBe('heXllo');
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index 8f6d7ab5..7b59ff84 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -224,24 +224,27 @@
                                     :name (fc/field-name)
                                     :x-model "simpleAccountId"})]))
            (fc/with-field :transaction-account/location
-             (com/validated-field
-              {:label "Location"
-               :errors (fc/field-errors)
-               :x-hx-val:account-id "simpleAccountId"
-               :hx-vals (hx/json (cond-> {:name (fc/field-name)}
-                                   client-id (assoc :client-id client-id)))
-               :x-dispatch:changed "simpleAccountId"
-               :hx-trigger "changed"
-               :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-               :hx-target "#wizard-form"
-               :hx-select "#wizard-form"
-               :hx-swap "outerHTML"
-               :hx-include "closest form"}
-              (location-select*
-               {:name (fc/field-name)
-                :account-location (:account/location account-id)
-                :client-locations (pull-attr (dc/db conn) :client/locations client-id)
-                :value location-val})))
+             ;; Selecting the account only affects the valid Location options, so the
+             ;; change swaps just this cell -- nothing else needs to re-render.
+             [:div {:id "simple-account-location"}
+              (com/validated-field
+               {:label "Location"
+                :errors (fc/field-errors)
+                :x-hx-val:account-id "simpleAccountId"
+                :hx-vals (hx/json (cond-> {:name (fc/field-name)}
+                                    client-id (assoc :client-id client-id)))
+                :x-dispatch:changed "simpleAccountId"
+                :hx-trigger "changed"
+                :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                :hx-target "#simple-account-location"
+                :hx-select "#simple-account-location"
+                :hx-swap "outerHTML"
+                :hx-include "closest form"}
+               (location-select*
+                {:name (fc/field-name)
+                 :account-location (:account/location account-id)
+                 :client-locations (pull-attr (dc/db conn) :client/locations client-id)
+                 :value location-val}))])
            (fc/with-field :transaction-account/amount
              (com/hidden {:name (fc/field-name)
                           :value total}))]]))
@@ -285,7 +288,9 @@
                             :x-model "accountId"}))))
    (fc/with-field :transaction-account/location
      (com/data-grid-cell
-      {}
+      {:id (str "account-location-" index)}
+      ;; Selecting an account only affects this row's valid Location options, so the
+      ;; change swaps just this cell -- nothing else needs to re-render.
       (com/validated-field
        {:errors (fc/field-errors)
         :x-hx-val:account-id "accountId"
@@ -294,8 +299,8 @@
         :x-dispatch:changed "accountId"
         :hx-trigger "changed"
         :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-        :hx-target "#wizard-form"
-        :hx-select "#wizard-form"
+        :hx-target (str "#account-location-" index)
+        :hx-select (str "#account-location-" index)
         :hx-swap "outerHTML"
         :hx-include "closest form"}
        (location-select* {:name (fc/field-name)
@@ -874,19 +879,14 @@
                   {:label "Memo"
                    :errors (fc/field-errors)}
                   [:div.w-96
+                   ;; Memo affects nothing else, so it issues no request at all -- its
+                   ;; value just rides along in the form (posted with the next dependent
+                   ;; change, and merged into the snapshot on save).
                    (com/text-input {:value (-> (fc/field-value))
                                     :name (fc/field-name)
                                     :id "edit-memo"
                                     :error? (fc/field-errors)
-                                    :placeholder "Optional note"
-                                    :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-                                    ;; Memo has no dependent UI, so it posts only to keep the
-                                    ;; server snapshot in sync and swaps nothing back in. With
-                                    ;; hx-swap=none the input is never touched, so the caret
-                                    ;; stays put with no morph.
-                                    :hx-swap "none"
-                                    :hx-trigger "keyup changed delay:300ms"
-                                    :hx-include "closest form"})]))
+                                    :placeholder "Optional note"})]))
                [:div {:x-data (hx/json {:activeForm (if (:transaction/payment (:entity request))
                                                       "link-payment"
                                                       (or (fc/with-field :action (fc/field-value))
-- 
2.49.1


From 3ecd115f76c03e558efe8ee306089f1a9aab3028 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 00:05:11 -0700
Subject: [PATCH 05/20] docs(skill): distil ssr-form-migration skill from
 transaction-edit reference (Phase 1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Capture the proven whole-form hx-select swap method as a reusable skill so every
later modal migration is cheaper and consistent. No app code changes.

- SKILL.md: the per-migration playbook (classify → baseline → characterize →
  consolidate render fns → templatize → wire HTMX → collapse routes → verify →
  commit → feed skill) + Growth contract + non-negotiables.
- reference/swap-doctrine.md: the four swap rules, focus invariant, Alpine-survives-
  swap hardening, target-selector strategy — worked from the real edit.clj swaps
  (memo no-request, account→location targeted cell, amount→totals sibling-tbody,
  vendor/mode/row whole-form). 0 OOB.
- reference/render-functions.md: explicit-data or top-rooted cursor; the MapCursor
  fake + transaction-account-row-no-cursor* twin as the smell to remove.
- reference/form-vs-wizard.md: classification + the data-driven session-backed
  (formtools SessionStorage) engine that replaces the snapshot round-trip + protocol.
- reference/selmer-conventions.md: STUB, validated in Phase 2.
- component-cookbook.md / gotchas.md / test-recipes.md / scorecard.md: seeded from
  what transaction-edit proves (7 cookbook entries, caret-survival + typeahead test
  recipes, scorecard baseline LOC 1608 / ~12 routes / 1 no-cursor twin / 2 faked
  roots / 0 OOB).

Scorecard (Transaction Edit baseline, before Phase 2): LOC 1608, routes ~12,
no-cursor twins 1, faked-cursor roots 2, snapshot merges ~75, OOB 0, mixed hx- 8.
---
 .claude/skills/ssr-form-migration/SKILL.md    | 122 ++++++++++++++
 .../reference/component-cookbook.md           | 103 ++++++++++++
 .../reference/form-vs-wizard.md               | 115 ++++++++++++++
 .../ssr-form-migration/reference/gotchas.md   |  55 +++++++
 .../reference/render-functions.md             |  85 ++++++++++
 .../ssr-form-migration/reference/scorecard.md |  46 ++++++
 .../reference/selmer-conventions.md           |  68 ++++++++
 .../reference/swap-doctrine.md                | 149 ++++++++++++++++++
 .../reference/test-recipes.md                 |  89 +++++++++++
 9 files changed, 832 insertions(+)
 create mode 100644 .claude/skills/ssr-form-migration/SKILL.md
 create mode 100644 .claude/skills/ssr-form-migration/reference/component-cookbook.md
 create mode 100644 .claude/skills/ssr-form-migration/reference/form-vs-wizard.md
 create mode 100644 .claude/skills/ssr-form-migration/reference/gotchas.md
 create mode 100644 .claude/skills/ssr-form-migration/reference/render-functions.md
 create mode 100644 .claude/skills/ssr-form-migration/reference/scorecard.md
 create mode 100644 .claude/skills/ssr-form-migration/reference/selmer-conventions.md
 create mode 100644 .claude/skills/ssr-form-migration/reference/swap-doctrine.md
 create mode 100644 .claude/skills/ssr-form-migration/reference/test-recipes.md

diff --git a/.claude/skills/ssr-form-migration/SKILL.md b/.claude/skills/ssr-form-migration/SKILL.md
new file mode 100644
index 00000000..2588b9fe
--- /dev/null
+++ b/.claude/skills/ssr-form-migration/SKILL.md
@@ -0,0 +1,122 @@
+---
+name: ssr-form-migration
+description: Migrate an SSR form or wizard modal to the whole-form HTMX swap doctrine, top-rooted render functions, the data-driven session-backed wizard engine, and (where it helps) Selmer templates. Use when simplifying a server-rendered form/wizard modal in this codebase, removing EDN-snapshot round-trips, deleting *-no-cursor* duplicate render fns, collapsing per-interaction routes, or replacing the multi-step wizard protocol machinery.
+---
+
+# SSR Form & Wizard Migration
+
+A repeatable method for making a server-rendered form/wizard modal **simpler** without
+changing user-facing behavior. Distilled from the first proven migration — the
+`transaction/edit.clj` modal, which already runs on the whole-form `hx-select` swap
+approach with **zero out-of-band swaps**. Every migration *reads this skill first* and
+*extends it last* (the Growth contract below). If migration N+1 is not easier than N,
+the skill-update step was skipped — treat that as a bug.
+
+The four patterns every migration moves code toward live in `reference/`:
+
+- `reference/swap-doctrine.md` — the four-rule HTMX swap priority order + the focus
+  invariant + Alpine-survives-swap hardening + target-selector strategy.
+- `reference/render-functions.md` — one render fn per component, taking explicit data
+  **or a top-rooted cursor**; no faked cursor positions, no `*-no-cursor*` twins.
+- `reference/form-vs-wizard.md` — single-step → plain form; multi-step → data-driven
+  engine with **per-step state in the Ring session** (the Django `formtools` model).
+- `reference/selmer-conventions.md` — plain-HTML attributes via Selmer, the
+  Hiccup↔Selmer interop bridge, include/block patterns.
+
+Growing cookbooks (append every migration):
+`component-cookbook.md`, `gotchas.md`, `test-recipes.md`, `scorecard.md`.
+
+---
+
+## The per-migration playbook
+
+Run this loop for each modal. The phase notes in the migration plan list only what is
+*specific* to a modal; this loop is the constant.
+
+1. **Read the skill.** Skim `reference/` and note which `component-cookbook.md`
+   entries and `gotchas.md` you can reuse. Start from the cookbook, not a blank file.
+
+2. **Classify** (`reference/form-vs-wizard.md`).
+   - Single logical step (even with a `?mode=` toggle or add/remove rows) → **plain
+     form**: no server-side wizard state, no snapshot, no protocol.
+   - Genuinely multiple steps the user advances through → **wizard**: the data-driven
+     engine + per-step session storage.
+   - When in doubt, it's a form.
+
+3. **Baseline the scorecard** (`scorecard.md`, heuristics in §6 of the plan). Record
+   before-numbers with cheap tools:
+   ```bash
+   F=src/clj/auto_ap/ssr/<modal>.clj
+   wc -l $F                                   # LOC (heuristic 4)
+   grep -c 'defn.*-no-cursor' $F              # *-no-cursor* twins (heuristic 1)
+   grep -cE 'with-cursor|MapCursor\.' $F      # faked cursor re-roots (heuristic 1)
+   grep -c 'hx-swap-oob' $F                   # OOB swaps (heuristic 7)
+   grep -cE '"hx-[a-z]' $F                    # mixed string hx- attrs (heuristic 8)
+   # route count: count this modal's entries in src/cljc/auto_ap/routes/*.cljc
+   ```
+
+4. **Characterize behavior (test-first).** Write or confirm a Playwright spec that
+   captures *current* behavior before you touch anything — focus/caret survival across
+   swaps, each field round-trip, validation errors, and the real save. This spec is the
+   parity contract; it must stay green through every commit. See `test-recipes.md`.
+
+5. **Consolidate render functions** (`reference/render-functions.md`). Make each render
+   fn take explicit data or a **top-rooted cursor**. Delete `*-no-cursor*` duplicates
+   and any `with-cursor`/`MapCursor` rebind that fakes a deep starting position
+   (heuristics 1, 2). Using a cursor is fine; faking where it *starts* is not.
+
+6. **Templatize in Selmer** (`reference/selmer-conventions.md`) where the component is
+   interactive/attribute-heavy. Reuse cookbook bits; add new ones back (heuristics 5, 8).
+   Static markup may stay Hiccup — Selmer scope is hybrid (Open decision 2).
+
+7. **Wire HTMX per the swap doctrine** (`reference/swap-doctrine.md`). Keep the focus
+   invariant intact. No OOB except a genuinely disjoint region, documented (heuristic 7).
+
+8. **Collapse routes** to 2 (`GET` open, `POST` submit) — `+1` for an add-row endpoint,
+   `+1` for the single `*-form-changed` whole-form re-render endpoint (heuristic 6).
+
+9. **Verify.** Modal e2e green + full e2e suite at-or-above baseline; assert DB
+   mutations by querying Datomic, not markup; REPL-check the pure render/data fns.
+   Re-measure the scorecard — **no metric may regress for the touched modal** without a
+   written exception in `gotchas.md`.
+
+10. **Commit** one reversible feature commit. The message includes the scorecard delta
+    and the reused/new cookbook entries.
+
+11. **Feed the skill** (the Growth contract). *Not optional.*
+
+---
+
+## Growth contract — the last task of every migration
+
+- Converted a component? → add its before/after to `component-cookbook.md`.
+- Hit a surprise? → one entry in `gotchas.md`.
+- Found a test pattern? → `test-recipes.md`.
+- Playbook step missing or wrong? → fix this `SKILL.md`.
+- Measured the scorecard? → append the row to `scorecard.md`.
+
+**Success signal:** each migration reuses more cookbook entries and starts from a better
+scorecard baseline than the previous one.
+
+---
+
+## Non-negotiables
+
+- **Focus invariant:** the input the user is typing in is *never* inside the region its
+  own request swaps. Violating this drops the caret. (Proven by the
+  `transaction-edit-swap.spec.ts` caret tests.)
+- **No new OOB swaps.** If tempted to OOB something inside the same feature, restructure
+  the DOM so the dependent element shares an ancestor with the trigger and use an
+  ordinary swap (e.g. totals in a sibling `<tbody>`).
+- **Behavior parity is proven by tests, not by reading.** The full e2e suite stays green
+  after every migration.
+- **Don't game the heuristics.** They're directional evidence paired with the e2e parity
+  gate; review the trend, not single numbers.
+
+## Project conventions that bite (see `gotchas.md`)
+
+- Edit Clojure with the clojure-mcp tools (`clojure_edit`, `clojure_edit_replace_sexp`),
+  not the raw file editor. `clj-paren-repair` then `lein cljfmt fix` when a file won't
+  compile.
+- Run tests via the `clojure-eval` skill / `clj-nrepl-eval -p PORT`, not `lein test`.
+- Temp files go in `./tmp/`.
diff --git a/.claude/skills/ssr-form-migration/reference/component-cookbook.md b/.claude/skills/ssr-form-migration/reference/component-cookbook.md
new file mode 100644
index 00000000..36549f26
--- /dev/null
+++ b/.claude/skills/ssr-form-migration/reference/component-cookbook.md
@@ -0,0 +1,103 @@
+# Component cookbook
+
+GROWS every migration. Each entry: what it is, the swap rule it uses, and the canonical
+snippet. Reuse these before writing anything new; the success signal is *more reuse each
+migration*.
+
+Seeded from `transaction/edit.clj` (Hiccup form — Selmer versions land in Phase 2).
+
+---
+
+## typeahead (account / vendor) — Alpine + tippy, survives swaps
+
+Used for account and vendor selection. Click-to-select (not a live text caret), so a
+whole-form swap on change is safe. Null-guard `tippy?`/`$refs.input?`.
+
+```clojure
+(defn account-typeahead* [{:keys [name value client-id x-model]}]
+  [:div.flex.flex-col
+   (com/typeahead {:name name
+                   :placeholder "Search..."
+                   :url (hu/url (bidi/path-for ssr-routes/only-routes :account-search)
+                                (cond-> {:purpose "transaction"} client-id (assoc :client-id client-id)))
+                   :id name
+                   :x-model x-model            ; binds selected value into the row's Alpine scope
+                   :value value
+                   :content-fn (fn [v] (:account/name (d-accounts/clientize ... v client-id)))})])
+```
+Reuse note: `:x-model` lets the *parent* row read the selected id (e.g. `accountId`) to
+gate a targeted location swap. See account-row.
+
+## account-row — cursor render fn + per-row targeted location swap + whole-form remove
+
+The canonical "row in a repeated grid" pattern. One render fn, top-rooted cursor.
+- account typeahead binds `accountId` into row Alpine scope;
+- **location cell** swaps *only itself* (`#account-location-<index>`) on `changed`
+  (swap-doctrine Rule 2);
+- **amount cell** swaps *only* `#account-totals` (Rule 4, sibling tbody);
+- **remove** swaps the whole form (Rule 3).
+
+```clojure
+(defn transaction-account-row* [{:keys [value client-id amount-mode index]}]
+  (com/data-grid-row
+   (-> {:class "account-row" :id (str "account-row-" index)
+        :x-data (hx/json {:show ... :accountId (fc/field-value (:transaction-account/account value))})
+        :data-key "show" :x-ref "p"}
+       hx/alpine-mount-then-appear)
+   (fc/with-field :db/id (com/hidden {:name (fc/field-name) :value (fc/field-value)}))
+   (fc/with-field :transaction-account/account
+     (com/data-grid-cell {} (com/validated-field {:errors (fc/field-errors)}
+       (account-typeahead* {:value (fc/field-value) :client-id client-id
+                            :name (fc/field-name) :x-model "accountId"}))))
+   (fc/with-field :transaction-account/location
+     (com/data-grid-cell {:id (str "account-location-" index)} ...Rule 2 targeted swap...))
+   (fc/with-field :transaction-account/amount
+     (com/data-grid-cell {} ...Rule 4 totals swap...))
+   (com/data-grid-cell {:class "align-top"} ...Rule 3 whole-form remove...)))
+```
+TODO Phase 2: drop the `transaction-account-row-no-cursor*` twin; this is the only kept form.
+
+## totals in a sibling `<tbody>` — Rule 4 instead of OOB
+
+Running totals live in their own `<tbody id="account-totals">`, a sibling of the
+input-bearing rows, so an amount edit refreshes them with a plain targeted swap and never
+replaces the amount input (caret survives).
+
+```clojure
+(com/data-grid
+ {:footer-tbody
+  [:tbody {:id "account-totals"}
+   (com/data-grid-row {:class "account-total-row"} ... (account-total* request) ...)
+   (com/data-grid-row {:class "account-balance-row"} ... (account-balance* request) ...)]}
+ ...input rows...)
+```
+
+## money-input / text-input amount field — Rule 4 targeted totals swap
+
+```clojure
+(com/money-input
+ {:name (fc/field-name) :id (str "account-amount-" index) :class "w-16 account-amount-field"
+  :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+  :hx-target "#account-totals" :hx-select "#account-totals" :hx-swap "outerHTML"
+  :hx-trigger "keyup changed delay:300ms" :hx-include "closest form"})
+```
+`%` mode swaps to `com/text-input {:type "number" :step "0.01"}` with the same swap attrs.
+
+## memo field — Rule 1, no request
+
+```clojure
+(com/text-input {:value (fc/field-value) :name (fc/field-name) :id "edit-memo"
+                 :placeholder "Optional note"})   ; no hx-* — rides along to save
+```
+
+## mode toggle ($/% radio, simple/advanced link) — Rule 3, whole-form swap
+
+```clojure
+(com/radio-card {:options [{:value "$" :content "$"} {:value "%" :content "%"}]
+                 :value amount-mode :name "step-params[amount-mode]"
+                 :hx-post (bidi/path-for ssr-routes/only-routes ::route/toggle-amount-mode)
+                 :hx-target "#wizard-form" :hx-select "#wizard-form" :hx-swap "outerHTML"
+                 :hx-include "closest form"})
+```
+TODO Phase 2: the simple/advanced toggle becomes a `?mode=` re-render (plain form), not a
+dedicated route.
diff --git a/.claude/skills/ssr-form-migration/reference/form-vs-wizard.md b/.claude/skills/ssr-form-migration/reference/form-vs-wizard.md
new file mode 100644
index 00000000..b4228144
--- /dev/null
+++ b/.claude/skills/ssr-form-migration/reference/form-vs-wizard.md
@@ -0,0 +1,115 @@
+# Forms vs. wizards (and the data-driven wizard engine)
+
+## Classify first
+
+| Signal | Classification |
+|--------|----------------|
+| One logical step — even with a `?mode=` toggle, $/% radio, or add/remove rows | **plain form** |
+| The user genuinely advances through ordered steps, each validated before the next | **wizard** |
+| In doubt | **form** |
+
+Most "wizards" in this codebase are single-step forms wearing wizard costumes: they
+implement the multi-step protocol (`mm/ModalWizardStep` + friends), serialize an EDN
+snapshot into hidden fields, and register 10–20 stacked-middleware routes — all for one
+step. That is pure overhead to delete.
+
+## The machinery being replaced
+
+`transaction/edit.clj` today still carries the old shape, useful as the "before":
+
+```clojure
+(defrecord LinksStep [linear-wizard]
+  mm/ModalWizardStep
+  (step-name   [_] "Transaction Actions")
+  (step-key    [_] :links)
+  (edit-path   [_ _] [])
+  (step-schema [_] (mm/form-schema linear-wizard))
+  (render-step [this {{:keys [snapshot step-params]} :multi-form-state :as request}] ...))
+```
+
+…plus the snapshot round-trip: the whole accumulating form state is serialized to hidden
+fields (custom EDN readers), then rebuilt every request by merging the posted pieces back
+into the snapshot (`:multi-form-state :snapshot` is read ~75× in `edit.clj`). The
+serialization needs custom readers, the merge is error-prone, and the payload grows each
+step.
+
+---
+
+## Single-step → plain form
+
+Two routes: `GET` (render) and `POST` (validate + save). State is plain form fields + an
+entity id. No snapshot, no server state, no protocol.
+
+```clojure
+{::route/edit        (fn [req] (html-response (render-edit-form {:entity (get-entity req)})))
+ ::route/edit-submit (fn [req] (validate-and-save req))}
+```
+
+A `?mode=` toggle is just the `GET` re-rendering with a different query param — still a
+plain form. An add-row interaction is one extra `POST` that appends a fresh row and
+re-renders (the `+1` route).
+
+---
+
+## Genuinely multi-step → data-driven engine with session-stored step state
+
+> **Inspiration — Django `formtools` `WizardView`.** Django's wizard does *not* round-trip
+> a serialized blob of the whole form through the page. Each step's validated data is
+> written to a **storage backend (the user session by default)** under that step's key,
+> and the steps are combined only at the very end via `get_all_cleaned_data()`. We adopt
+> the same model: **replace the EDN snapshot + piecewise merging with per-step form state
+> stored in the Ring session.** A step writes its own data under its own key; nothing is
+> merged into a snapshot and nothing about other steps rides through the form.
+> Refs: `formtools.wizard.views.WizardView`, `SessionStorage`, `get_all_cleaned_data()`
+> (https://django-formtools.readthedocs.io/en/latest/wizard.html).
+
+A wizard is **data**:
+
+```clojure
+(def vendor-wizard-config
+  {:steps [{:key :info  :schema info-schema  :fields [...] :render render-info-step
+            :next (fn [data] :terms)}
+           {:key :terms :schema terms-schema :fields [...] :render render-terms-step
+            :next (fn [data] :done)}]
+   :init-fn (fn [req] {...})
+   :submit-route "/admin/vendor/wizard/submit"
+   :done-fn (fn [all-data req] (save! all-data) (html-response "Saved"))})
+```
+
+with a tiny engine (no protocols) whose state lives **in the session**, keyed by a wizard
+instance id, each step's data under its own step key — the formtools `SessionStorage`
+model. No snapshot, no custom EDN readers, no merge-into-snapshot:
+
+```clojure
+;; Storage backed by the Ring session. Path: [:wizards <wizard-id> :step-data <step-key>]
+(defn create-wizard! [session config]
+  (let [id (str (java.util.UUID/randomUUID))]
+    [id (assoc-in session [:wizards id]
+                  {:current-step (-> config :steps first :key) :step-data {}})]))
+
+(defn put-step [session id k data] (assoc-in session [:wizards id :step-data k] data)) ; replace, not merge
+(defn set-step [session id k]      (assoc-in session [:wizards id :current-step] k))
+(defn get-all  [session id]        (->> (get-in session [:wizards id :step-data]) vals (apply merge)))
+(defn forget   [session id]        (update session :wizards dissoc id))
+```
+
+The render emits only a **reference token** (`wizard-id`, `current-step`) in the form —
+never the form's state. The submit handler validates the posted step, `put-step`s it,
+computes `:next`, and either advances (`set-step`) or finishes (`get-all` + `:done-fn` +
+`forget`). Every fn returns the updated session for the handler to thread into the Ring
+response (`(assoc resp :session session')`).
+
+**Two routes per wizard:** open (`partial open-wizard config`) and submit
+(`partial handle-step-submit config`). State is namespaced by `wizard-id` inside the
+session, so multiple in-flight wizards (and browser tabs) don't collide, and it is
+discarded on completion (`forget`).
+
+### Storage lifetime (Open decision 1)
+
+State lives in the Ring session, scoped to true multi-step wizards (plain forms hold
+none). Lifetime follows the session; `forget` on completion prevents session bloat. For
+long-lived wizards, confirm the session backend (in-memory vs. durable) is acceptable or
+pick a durable store. **This engine is built in Phase 6** (Transaction Rule) — until then
+this file describes the target; validate `components/wizard_state.clj` +
+`components/wizard2.clj` against it when they land, and update this doc from the real
+implementation.
diff --git a/.claude/skills/ssr-form-migration/reference/gotchas.md b/.claude/skills/ssr-form-migration/reference/gotchas.md
new file mode 100644
index 00000000..56846ae2
--- /dev/null
+++ b/.claude/skills/ssr-form-migration/reference/gotchas.md
@@ -0,0 +1,55 @@
+# Gotchas
+
+GROWS every migration. One entry per surprise. Also the home for any **written exception**
+to the scorecard ratchet (a metric that regressed for a documented reason).
+
+---
+
+## Stale `$refs` / `tippy` after a swap
+
+A whole-form swap can run an Alpine event handler *before* the component re-initialises,
+so a handler that dereferences `$refs.input.__x_tippy` or calls `tippy.show()` throws.
+**Always null-guard:** `$refs.input?.__x_tippy?.hide()`, `tippy?.show()`. The
+`transaction-edit-swap.spec.ts` `trackErrors()` helper fails the test on any `pageerror`
+or `console.error`, which is exactly how a stale-ref throw surfaces.
+
+## Let the server value win — don't preserve Alpine state across a server-driven change
+
+When a server change should update a component (e.g. choosing a vendor sets its default
+account), rebuild that section fresh on the swap so the server-provided value lands
+without keying tricks. The bug this prevents: "changing the vendor a *second* time doesn't
+update the account" because preserved Alpine state shadowed the new server value. If you
+*must* preserve a component, key it by value so a change forces re-init:
+`(assoc attrs :key (str id "--" current-value))`.
+
+## Focus dies if the typed input is inside its own swapped region
+
+The single most important invariant. Amount field → swap a sibling tbody, not the row.
+Memo → swap nothing. If a caret test (`sameNode`) fails, the input is in its own swap
+region — re-target to a sibling/ancestor that excludes it.
+
+## Faked cursors breed duplicate render fns
+
+A `with-cursor`/`MapCursor` re-root to fake a deep start forces a `*-no-cursor*` twin.
+Removing the fake lets you delete the twin. Don't "fix" a faked cursor in place — top-root
+it and collapse to one render fn. (See `render-functions.md`.)
+
+## Edit Clojure with clojure-mcp tools, not the file editor
+
+`clojure_edit` / `clojure_edit_replace_sexp`. If a file won't compile: `clj-paren-repair`
+the file, then retry; if still broken, `lein cljfmt check`. Run tests via `clojure-eval` /
+`clj-nrepl-eval -p PORT`, never `lein test` (slow, last resort).
+
+## Solr/typeahead in tests
+
+Account/vendor search is backed by Solr, unavailable in tests. To drive a typeahead in
+e2e: type under the 3-char threshold, then inject a result into Alpine state
+(`Alpine.$data(el).elements = [{value, label}]`) and click it — the real click handler,
+`tippy.hide()`, Alpine reactivity, and the HTMX swap all run as in production. Entity ids
+come from `GET /test-info`.
+
+---
+
+## Scorecard exceptions (ratchet violations with a reason)
+
+_None yet._ Append here if a migration must let a metric regress for a documented reason.
diff --git a/.claude/skills/ssr-form-migration/reference/render-functions.md b/.claude/skills/ssr-form-migration/reference/render-functions.md
new file mode 100644
index 00000000..ad261809
--- /dev/null
+++ b/.claude/skills/ssr-form-migration/reference/render-functions.md
@@ -0,0 +1,85 @@
+# Render functions: explicit data, or a top-rooted cursor
+
+**One function, data in, markup out.** The data can arrive as a plain map *or* via a
+cursor — as long as the cursor was rooted at the top of the form and walked down to here,
+never faked to start at this depth. The rule is about *where the cursor starts*, not
+whether you use one.
+
+## GOOD — explicit data, pure, testable without setup
+
+```clojure
+(defn account-row [{:keys [account index client-id amount-mode]}]
+  (com/data-grid-row
+    (com/hidden {:name (str "accounts[" index "][db/id]")
+                 :value (or (:db/id account) "")})
+    (com/data-grid-cell
+      (account-typeahead* {:value (:transaction-account/account account)
+                           :name  (str "accounts[" index "][account]")
+                           :client-id client-id}))
+    ...))
+```
+
+## ALSO FINE — a cursor that started at the form root and was advanced naturally
+
+```clojure
+;; The top-level render walks the cursor; the row fn receives the dereferenced row
+;; (or the advanced cursor). No rebinding of *current*/*prefix* to fake depth.
+(defn account-rows [accounts-cursor]
+  (for [row-cursor (fc/each accounts-cursor)]   ; advanced from the root, not faked
+    (account-row {:account @row-cursor :index (fc/index row-cursor) ...})))
+```
+
+`transaction/edit.clj`'s `transaction-account-row*` is the cursor form done right: the
+caller (`account-grid-body*`) holds a top-rooted cursor via `fc/cursor-map` and hands each
+row cursor to one render fn.
+
+---
+
+## The SMELL this migration removes
+
+### 1. Faking the cursor's starting position
+
+A "form cursor" is fine. The pain is **rebinding the dynamic root deeper in the tree** so
+a deeply nested render fn can run against a fragment. Real example from
+`transaction/edit.clj`'s `simple-mode-fields*` (the thing to delete):
+
+```clojure
+;; SMELL: re-roots the cursor to a synthetic MapCursor pointed at accounts[0] so a
+;; fragment can render "deep". Fragile, and the source of the *-no-cursor* twin below.
+(fc/with-field :transaction/accounts
+  (fc/with-cursor (let [cur fc/*current*]
+                    (if (sequential? @cur)
+                      (nth cur 0 nil)
+                      (auto_ap.cursor.MapCursor. {} (cursor/state cur)
+                                                 (conj (cursor/path cur) 0))))
+    ...))
+```
+
+Target: the cursor begins at the top level of what the form consumes and walks down
+naturally. Because the **whole form is re-rendered each time** (swap doctrine), there is
+no longer any reason to fake a deep starting position.
+
+### 2. The `*-no-cursor*` twin
+
+Faking the deep cursor forces a *second copy of the same markup* — one that reads the
+faked cursor and one that takes plain params for the cases where the fake can't be set up.
+`transaction/edit.clj` has exactly this pair:
+
+```clojure
+(defn transaction-account-row*           [{:keys [value index client-id ...]}] ...) ; cursor form
+(defn transaction-account-row-no-cursor* [{:keys [account index client-id ...]}] ...) ; duplicate markup
+```
+
+**Fix:** keep one render fn. If a caller already holds a top-rooted cursor, advance it and
+hand the row data (or the advanced cursor) to that one fn. Delete the `*-no-cursor*` copy.
+Heuristic 1 targets `grep -c 'defn.*-no-cursor'` → 0 and faked-cursor re-roots → 0.
+
+## Scorecard hooks (heuristics 1, 2)
+
+```bash
+grep -c 'defn.*-no-cursor' $F           # → 0
+grep -cE 'with-cursor|MapCursor\.' $F   # faked re-roots → 0 (top-rooted cursors are fine)
+```
+
+Top-rooted cursors do **not** count against heuristic 1 — only *re-roots that fake depth*
+and the `*-no-cursor*` twins do.
diff --git a/.claude/skills/ssr-form-migration/reference/scorecard.md b/.claude/skills/ssr-form-migration/reference/scorecard.md
new file mode 100644
index 00000000..d9f1f036
--- /dev/null
+++ b/.claude/skills/ssr-form-migration/reference/scorecard.md
@@ -0,0 +1,46 @@
+# Quality scorecard (the ratchet)
+
+Cheap to measure (`grep -c`, `wc -l`, `clj-kondo`), recorded **before/after each
+migration** in the commit message and in the results table below. **No metric may regress
+for the touched modal** without a written exception in `gotchas.md`. These are directional
+evidence, not targets to game — always paired with the e2e parity gate.
+
+## Heuristics
+
+| # | Heuristic | Measure | Target |
+|---|-----------|---------|--------|
+| 1 | Faked cursor positions (not cursors themselves) | `grep -cE 'with-cursor\|MapCursor\.'` re-roots + `grep -c 'defn.*-no-cursor'` | → 0 (top-rooted cursors are fine) |
+| 2 | Implicit state merges (snapshot/cursor) | count merge sites | → 0 (forms); explicit `put-step` only (wizards) |
+| 3 | Branching complexity | `clj-kondo`, or count `cond`/`condp`/`case`/nested `if` + max depth | net ↓ |
+| 4 | Lines of code | `wc -l` on the modal's file(s) | net ↓ |
+| 5 | Reuse / cross-form similarity | cookbook components reused; duplicated-block count | reuse ↑, dup ↓ |
+| 6 | Route count | count routes for the modal | → 2 (+1 for add-row) |
+| 7 | OOB swaps | `grep -c hx-swap-oob` | → 0 unless a justified disjoint-region case is documented |
+| 8 | Attribute consistency | mixed `:x-`/`"x-"` encodings in migrated template | → 0 |
+
+## How to measure (copy/paste)
+
+```bash
+F=src/clj/auto_ap/ssr/<modal>.clj
+echo "LOC                $(wc -l < $F)"
+echo "no-cursor twins    $(grep -c 'defn.*-no-cursor' $F)"
+echo "faked-cursor roots $(grep -cE 'with-cursor|MapCursor\.' $F)"
+echo "snapshot merges    $(grep -c ':multi-form-state :snapshot' $F)"
+echo "branch forms       $(grep -cE '\(cond |\(condp |\(case |\(when-not ' $F)"
+echo "hx-swap-oob        $(grep -c 'hx-swap-oob' $F)"
+echo "mixed string hx-   $(grep -cE '\"hx-[a-z]' $F)"
+# route count: count this modal's entries in src/cljc/auto_ap/routes/*.cljc
+```
+
+## Results
+
+Each migration appends one row (after-numbers), referencing the before in the diff.
+
+| Phase | Modal | LOC | Routes | no-cursor twins | faked roots | snapshot merges | OOB | mixed hx- | cookbook reused / added |
+|-------|-------|-----|--------|-----------------|-------------|-----------------|-----|-----------|-------------------------|
+| 1 (baseline) | Transaction Edit `transaction/edit.clj` | 1608 | ~12 | 1 | 2 | ~75 | 0 | 8 | — / seeded 7 entries |
+
+> Phase 1 is distillation only — no app code changed. The Transaction Edit row is the
+> **before** baseline that Phase 2 must beat (target: routes → ~3, no-cursor → 0, faked
+> roots → 0, snapshot merges → 0, LOC ↓, mixed hx- → 0). The `0` OOB is already achieved
+> by the merged reference and must not regress.
diff --git a/.claude/skills/ssr-form-migration/reference/selmer-conventions.md b/.claude/skills/ssr-form-migration/reference/selmer-conventions.md
new file mode 100644
index 00000000..ac4837b9
--- /dev/null
+++ b/.claude/skills/ssr-form-migration/reference/selmer-conventions.md
@@ -0,0 +1,68 @@
+# Selmer template conventions
+
+> **Status: STUB — validated in Phase 2.** This file describes the target. The Selmer
+> dependency, render helper, and interop bridge are added in Phase 2 (Transaction Edit);
+> rewrite this file from the *real, verified* example once that lands, and record each
+> converted component in `component-cookbook.md`.
+
+## Why Selmer for interactive components
+
+In Hiccup the same Alpine/HTMX attribute is sometimes a keyword and sometimes a string in
+the same file — there's no rule a reader (or an LLM) can rely on:
+
+```clojure
+;; All of these appear in one component today:
+:x-ref  "input"      "x-ref" "hidden"
+:x-model "value.value"   "x-model" "search"
+"@keydown.down.prevent.stop" "tippy.show();"   ; handlers MUST be strings
+:x-init "..."                                  ; structural attrs are keywords
+```
+
+In a Selmer template the same markup is unambiguous plain HTML:
+
+```html
+{# templates/components/typeahead.html #}
+<div class="relative" x-data="{{ x_data|safe }}" x-model="{{ x_model }}">
+  <a class="{{ classes }}" x-ref="input" tabindex="0"
+     @keydown.down.prevent.stop="tippy?.show()"
+     @keydown.backspace="tippy?.hide(); value = {value:'', label:''}">
+    <span x-text="value.label"></span>
+  </a>
+  ...
+</div>
+```
+
+Note the `tippy?.` null-guard carried over from the swap doctrine — Selmer doesn't change
+the Alpine-survives-swap requirement.
+
+## Render helper + interop bridge (the Phase 2 foundation)
+
+```clojure
+(defn render [tpl ctx] (selmer/render-file tpl ctx))
+(defn hiccup->html [h] (hiccup/html h))    ; embed hiccup inside selmer via {{ frag|safe }}
+;; selmer fragment inside hiccup: [:div (hiccup/raw (render "..." ctx))]
+```
+
+The bridge must work **both ways** during the strangler transition: a Hiccup component
+renders inside a Selmer template (pass `(hiccup->html h)` into the context, render with
+`|safe`), and a Selmer fragment renders inside a Hiccup tree (`(hiccup/raw (render ...))`).
+Prove both in Phase 2 before broad use.
+
+## Composition
+
+Selmer composes via `{% include %}` and `{% block %}`. Prefer small per-component
+templates that the cookbook references by path. Keep `|safe` to values the server fully
+controls (rendered Hiccup, JSON for `x-data`), never raw user input.
+
+## Scope (Open decision 2)
+
+Hybrid: convert interactive/attribute-heavy components first; static markup may stay
+Hiccup. Revisit a fuller sweep in Phase 11.
+
+## Attribute-consistency scorecard (heuristic 8)
+
+```bash
+grep -cE '"x-[a-z]|"hx-[a-z]|"@' <migrated-template>   # → 0 mixed encodings in Selmer
+```
+A migrated Selmer template has no mixed `:x-`/`"x-"` encodings because everything is plain
+HTML.
diff --git a/.claude/skills/ssr-form-migration/reference/swap-doctrine.md b/.claude/skills/ssr-form-migration/reference/swap-doctrine.md
new file mode 100644
index 00000000..c250dd93
--- /dev/null
+++ b/.claude/skills/ssr-form-migration/reference/swap-doctrine.md
@@ -0,0 +1,149 @@
+# Whole-form HTMX swap doctrine
+
+Every interactive control picks a swap strategy in this **priority order** (prefer the
+earliest rule that works). Worked examples are the real `transaction/edit.clj` swaps.
+
+## Rule 1 — No request when the field affects nothing else
+
+Its value rides along in the form and is read on submit. No `hx-*` at all.
+
+```clojure
+;; transaction/edit.clj — the memo field. Editing it issues NO request; the value
+;; just rides along until save. The e2e proves zero POSTs fire while typing.
+(com/text-input {:value (fc/field-value)
+                 :name  (fc/field-name)
+                 :id    "edit-memo"
+                 :placeholder "Optional note"})
+```
+
+## Rule 2 — Targeted swap of a single isolated cell when the effect is purely local
+
+Give the cell a stable id, keep it **out of the typed input's subtree**, and post the
+whole form but `hx-select` back only that cell.
+
+```clojure
+;; transaction/edit.clj — selecting an account only changes that row's valid Location
+;; options, so the change swaps just this cell. Nothing else re-renders.
+[:div {:id (str "account-location-" index)}        ; stable, per-row id
+ (com/validated-field
+  {:x-hx-val:account-id "accountId"
+   :x-dispatch:changed   "accountId"               ; Alpine fires `changed` when account changes
+   :hx-trigger "changed"
+   :hx-post    (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+   :hx-target  (str "#account-location-" index)
+   :hx-select  (str "#account-location-" index)
+   :hx-swap    "outerHTML"
+   :hx-include "closest form"}                      ; whole form posts; only this cell swaps back
+  (location-select* {...}))]
+```
+
+## Rule 3 — Whole-form swap when the change touches interdependent state
+
+Vendor change, add/remove row, mode toggle, $/% radio. The form's hidden state rides
+along, so one swap keeps everything consistent — **no out-of-band swaps**.
+
+```clojure
+;; transaction/edit.clj — vendor change rebuilds the whole manual-coding section
+;; (vendor default account, terms, etc. are interdependent).
+[:div {:hx-trigger "change"
+       :hx-post    (bidi/path-for ssr-routes/only-routes ::route/edit-vendor-changed)
+       :hx-target  "#wizard-form"
+       :hx-select  "#wizard-form"
+       :hx-swap    "outerHTML"
+       :hx-sync    "this:replace"
+       :hx-include "closest form"}
+ ...]
+```
+
+The active tab/action round-trips through the form (it's a hidden field bound to Alpine
+`activeForm`), so it **survives** the whole-form swap — that's why a whole-form swap is
+safe here even though the user is "on" a tab.
+
+## Rule 4 — OOB only for genuinely disjoint DOM regions
+
+A global flash/toast, a nav badge, a modal at the document root. **If tempted to OOB
+something inside the same feature, restructure instead**: give the dependent element a
+common ancestor with the trigger and use an ordinary swap.
+
+Worked example — running **totals live in their own sibling `<tbody>`** so an amount edit
+swaps the totals without ever replacing the amount input:
+
+```clojure
+;; The totals tbody is a sibling of the input-bearing rows.
+(com/data-grid
+ {:footer-tbody [:tbody {:id "account-totals"} ...totals rows...]}
+ ...account rows with inputs...)
+
+;; The amount input posts the whole form but hx-selects ONLY #account-totals.
+(com/money-input
+ {:name (fc/field-name)
+  :id   (str "account-amount-" index)
+  :class "w-16 account-amount-field"
+  :hx-post   (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+  :hx-target "#account-totals"      ; a SIBLING of this input's row...
+  :hx-select "#account-totals"      ; ...so the input is never in the swapped region
+  :hx-swap   "outerHTML"
+  :hx-trigger "keyup changed delay:300ms"
+  :hx-include "closest form"})
+```
+
+`grep -c hx-swap-oob` on a migrated modal must be `0` unless a justified disjoint-region
+case is documented here and in `gotchas.md`.
+
+---
+
+## The focus invariant (must always hold)
+
+> The input the user is typing in is never inside the region its own request swaps.
+
+This is *the* reason the doctrine works. The amount field swaps a sibling tbody; the memo
+field swaps nothing; the account typeahead's change swaps the whole form but the typeahead
+isn't an active text caret at that moment (it's a click-to-select). The
+`transaction-edit-swap.spec.ts` `sameNode` assertions exist to catch any violation.
+
+## Alpine components must survive swaps
+
+When a whole-form swap replaces a region containing Alpine/tippy components, they get
+re-initialised from the server-provided values. Two hardening moves:
+
+1. **Null-guard every reference** that depends on Alpine/tippy being initialised:
+   ```clojure
+   "@keydown.down.prevent.stop" "tippy?.show()"
+   "@keydown.enter.prevent.stop" "$refs.input?.__x_tippy?.hide(); ..."
+   ```
+   (`$refs.input?` / `tippy?` — the `?` matters; a swap can run a handler before re-init.)
+
+2. **Let the server value win.** Because the section is rebuilt fresh on each swap, the
+   server-driven value (e.g. a vendor's default account) lands without keying tricks —
+   no preserved stale Alpine state to fight. The "changing the vendor a *second* time
+   still updates it" e2e is the regression guard for this.
+
+   If you *do* preserve a component across a morph/replace, key it by its server value so
+   a server-driven change forces re-init: `(assoc attrs :key (str id "--" current-value))`.
+
+Use `hx/alpine-mount-then-appear` for rows that should mount-then-transition-in (it sets
+`x-data {data-key false}`, `x-init $nextTick(() => key=true)`, `x-show key`).
+
+---
+
+## Selector strategy for targeted swaps (a consideration, not a mandate)
+
+Rules 2 and 4 need a stable `hx-target`/`hx-select`. Per-element unique ids
+(`#account-location-0`) work and are what transaction-edit uses today. They get noisy in
+deeply repeated/nested structures. When you hit that (Phase 5 / the wizards), consider:
+
+- **Semantic markup + data-attributes** — mark rows/cells with their identity and target
+  by attribute, no per-element ids:
+  ```html
+  <tr data-row="account" data-index="0">
+    <td data-cell="location"> … </td>
+  </tr>
+  <!-- hx-target="[data-row='account'][data-index='0'] [data-cell='location']" -->
+  ```
+- **A `form-path -> selector` function**, derived the same way a cursor path is, so the
+  server and the markup agree on the target by construction. A render fn at form-path
+  `[:accounts 0 :location]` computes its own stable selector from that path.
+
+**Decision status:** still per-element ids. The first modal to hit nested repeated swaps
+(Invoice Bulk Edit, Phase 5) settles the convention and records it here + in
+`component-cookbook.md` for the wizards to reuse.
diff --git a/.claude/skills/ssr-form-migration/reference/test-recipes.md b/.claude/skills/ssr-form-migration/reference/test-recipes.md
new file mode 100644
index 00000000..2b590f33
--- /dev/null
+++ b/.claude/skills/ssr-form-migration/reference/test-recipes.md
@@ -0,0 +1,89 @@
+# Test recipes
+
+GROWS every migration. How to characterize and verify a modal. Consistent with the
+project `testing-conventions` skill: test user-observable behavior, assert DB state
+directly, don't test the means.
+
+## The three test layers
+
+1. **Characterization e2e first (Playwright).** Before changing a modal, write/confirm a
+   spec capturing *current* behavior — focus/caret survival across swaps, each field
+   round-trip, validation errors, the real save. This is the parity contract; keep it
+   green through every commit.
+2. **Pure-function checks via REPL.** Once render/data-prep fns are pure, exercise them
+   with `clojure-eval` / `clj-nrepl-eval -p <port>`. Assert on returned data; for markup
+   use string matches (`(re-find #"accounts\[0\]\[account\]" (str html))`) — this style
+   survives the Selmer switch. Avoid brittle structural assertions.
+3. **DB-state assertions for mutations.** If a submit writes Datomic, verify by querying
+   the DB, not by asserting on markup.
+
+## Running e2e
+
+```bash
+npx playwright test                              # full suite
+npx playwright test e2e/transaction-edit-swap.spec.ts   # one spec
+```
+- Config: `playwright.config.ts`, `baseURL http://localhost:3333`, `webServer:
+  lein run -m auto-ap.test-server`, `reuseExistingServer: !CI`.
+- **The server must be from the worktree you're testing.** `reuseExistingServer` will
+  silently reuse *any* server on `:3333` — including another worktree's. Confirm with
+  `ls -la /proc/$(lsof -ti :3333)/cwd` (or restart on a clean port) before trusting a run.
+- The test-server port is hardcoded (`test_server.clj` `run-jetty {:port 3333}`); to run a
+  second server from another worktree, change that or parameterise it.
+
+## Driving a typeahead in e2e (Solr unavailable in tests)
+
+```js
+await typeahead.locator('a[x-ref="input"]').click();      // open tippy dropdown
+const search = page.locator('[data-tippy-root] input[x-model="search"]').first();
+await search.fill('te');                                  // under 3-char Solr threshold
+await typeahead.evaluate((el, id) => {                     // inject a clickable result
+  window.Alpine.$data(el).elements = [{ value: id, label: 'Test Account' }];
+}, accountId);
+await page.locator('[data-tippy-root] a', { hasText: 'Test Account' }).first().click();
+```
+Entity ids come from `GET /test-info` (`{accounts:{test-account, vendor, vendor2, ...}}`).
+
+## Proving the focus invariant (caret survival) — the key swap test
+
+```js
+// before the debounced swap lands, capture the live focused node...
+await page.evaluate(() => { window.__focused = document.activeElement; });
+await swap;                                       // waitForResponse on the *-form-changed POST
+const ok = await page.evaluate(() => {
+  const a = document.activeElement;
+  return { sameNode: a === window.__focused, value: a?.value, caret: a?.selectionStart };
+});
+// ...assert the SAME node survived with value + caret intact.
+```
+`trackErrors(page)` (collect `pageerror` + `console.error`, assert `[]`) catches a swap
+that throws on a stale `$refs`/`tippy` — pair it with every swap test.
+
+## Asserting "no request" (Rule 1 fields)
+
+```js
+let posts = 0;
+page.on('request', r => { if (r.url().includes('edit-form-changed') && r.method()==='POST') posts++; });
+// ...type in the memo...
+expect(posts).toBe(0);   // memo affects nothing → issues no request
+```
+
+---
+
+## E2E baseline (the regression gate — never drop below this)
+
+The full suite must stay green after every migration. Specs touching the migrated modals:
+
+| Spec | Tests | Role |
+|------|-------|------|
+| `e2e/transaction-edit-swap.spec.ts` | 8 | **Phase 2 parity contract** — whole-form `hx-select` swaps, caret survival, no-request memo, vendor re-select |
+| `e2e/transaction-edit.spec.ts` | 15 | transaction edit behavior |
+| `e2e/bulk-code-transactions.spec.ts` | 18 | Phase 3 (bulk code) |
+| `e2e/transaction-import.spec.ts` | 4 | import |
+| `e2e/transaction-navigation.spec.ts` | 13 | navigation |
+
+**Pass/fail baseline: TO BE CAPTURED at the first Phase 2 e2e run** against a test server
+booted from *this* worktree (`integreat-execute-refactor`). At distillation time `:3333`
+was occupied by the `integreat-render-whole-form` worktree (morph version), so a run then
+would not reflect the merged hx-select reference. Record the green count here once
+captured, and never drop below it.
-- 
2.49.1


From bdb286ca71152115fadd707fa650b5671412eb3d Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 00:09:12 -0700
Subject: [PATCH 06/20] feat(ssr): add Selmer dependency + Hiccup<->Selmer
 interop bridge (Phase 2 foundation)

The strangler foundation for migrating interactive SSR components from Hiccup to
Selmer (plain-HTML Alpine/HTMX attributes instead of mixed keyword/string encodings).

- project.clj: add [selmer "1.12.61"].
- auto-ap.ssr.selmer: render / render-str (selmer/render-file + string), hiccup->html
  (Hiccup -> string for {{ frag|safe }}), raw (wrap a rendered fragment for embedding
  in a Hiccup tree without double-escaping), render->hiccup.
- resources/templates/interop-smoke.html: proves render-file from the classpath and
  that plain-HTML alpine attrs (x-model, @keydown, tippy?.show()) pass through verbatim.
- selmer_test: 4 tests / 8 assertions covering both interop directions; all green.

Proven via REPL + tests: a Hiccup component renders inside a Selmer template, and a
Selmer fragment renders inside a Hiccup tree. Both valid during the transition.
---
 project.clj                            |  1 +
 resources/templates/interop-smoke.html |  7 +++++
 src/clj/auto_ap/ssr/selmer.clj         | 43 ++++++++++++++++++++++++++
 test/clj/auto_ap/ssr/selmer_test.clj   | 36 +++++++++++++++++++++
 4 files changed, 87 insertions(+)
 create mode 100644 resources/templates/interop-smoke.html
 create mode 100644 src/clj/auto_ap/ssr/selmer.clj
 create mode 100644 test/clj/auto_ap/ssr/selmer_test.clj

diff --git a/project.clj b/project.clj
index e81c06ff..51a918f0 100644
--- a/project.clj
+++ b/project.clj
@@ -96,6 +96,7 @@
                   [org.clojure/core.async]]
 
                  [hiccup "2.0.0-alpha2"]
+                 [selmer "1.12.61"]
 
                  ;; needed for java 11
                  [javax.xml.bind/jaxb-api "2.4.0-b180830.0359"]
diff --git a/resources/templates/interop-smoke.html b/resources/templates/interop-smoke.html
new file mode 100644
index 00000000..deac9901
--- /dev/null
+++ b/resources/templates/interop-smoke.html
@@ -0,0 +1,7 @@
+<div id="interop-smoke" class="p-2">
+  <h3>{{ title }}</h3>
+  {# a Hiccup-rendered component, passed in pre-rendered and emitted verbatim #}
+  {{ hiccup_frag|safe }}
+  <input x-ref="input" x-model="value.value"
+         @keydown.down.prevent.stop="tippy?.show()" />
+</div>
diff --git a/src/clj/auto_ap/ssr/selmer.clj b/src/clj/auto_ap/ssr/selmer.clj
new file mode 100644
index 00000000..b96315e8
--- /dev/null
+++ b/src/clj/auto_ap/ssr/selmer.clj
@@ -0,0 +1,43 @@
+(ns auto-ap.ssr.selmer
+  "Selmer rendering + the Hiccup<->Selmer interop bridge for the SSR form/wizard
+   migration (see .claude/skills/ssr-form-migration). Interactive, attribute-heavy
+   components render from Selmer templates with plain-HTML Alpine/HTMX attributes;
+   the bridge lets a Selmer template embed Hiccup output and lets a Selmer fragment
+   sit inside a Hiccup tree during the strangler transition.
+
+   Templates live under resources/templates/ and are referenced by classpath-relative
+   path, e.g. (render \"templates/components/typeahead.html\" ctx)."
+  (:require
+   [hiccup.util :as hu]
+   [hiccup2.core :as h2]
+   [selmer.parser :as selmer]))
+
+(defn hiccup->html
+  "Render a Hiccup form to an HTML string so it can be embedded in a Selmer
+   context value and emitted with the |safe filter: {{ frag|safe }}."
+  [hiccup]
+  (str (h2/html {} hiccup)))
+
+(defn raw
+  "Wrap an already-rendered HTML string (e.g. from `render`) so hiccup2 emits it
+   verbatim instead of escaping it. Use to drop a Selmer fragment into a Hiccup tree:
+   [:div (sel/raw (sel/render \"...\" ctx))]."
+  [^String html]
+  (hu/raw-string html))
+
+(defn render
+  "Render a Selmer template file (classpath-relative path) with `ctx`, returning an
+   HTML string. Hiccup values in `ctx` should be pre-rendered via `hiccup->html` and
+   referenced with |safe in the template."
+  [template ctx]
+  (selmer/render-file template ctx))
+
+(defn render-str
+  "Render a Selmer template given as a string (handy for tests/REPL)."
+  [template ctx]
+  (selmer/render template ctx))
+
+(defn render->hiccup
+  "Render a Selmer template file and wrap the result for safe embedding in Hiccup."
+  [template ctx]
+  (raw (render template ctx)))
diff --git a/test/clj/auto_ap/ssr/selmer_test.clj b/test/clj/auto_ap/ssr/selmer_test.clj
new file mode 100644
index 00000000..1f0790d8
--- /dev/null
+++ b/test/clj/auto_ap/ssr/selmer_test.clj
@@ -0,0 +1,36 @@
+(ns auto-ap.ssr.selmer-test
+  (:require
+   [auto-ap.ssr.selmer :as sut]
+   [clojure.string :as str]
+   [clojure.test :refer [deftest is testing]]
+   [hiccup2.core :as h2]))
+
+(deftest hiccup->html
+  (testing "renders a Hiccup form to an HTML string"
+    (is (= "<span class=\"label\">A &amp; B</span>"
+           (sut/hiccup->html [:span.label "A & B"])))))
+
+(deftest selmer-embeds-hiccup
+  (testing "a Hiccup component renders inside a Selmer template via |safe"
+    (let [frag (sut/hiccup->html [:span.badge "from hiccup"])
+          out  (sut/render-str "<div>{{frag|safe}}</div>" {:frag frag})]
+      (is (str/includes? out "<span class=\"badge\">from hiccup</span>"))
+      ;; without |safe the markup would be escaped; |safe keeps it verbatim
+      (is (not (str/includes? out "&lt;span"))))))
+
+(deftest selmer-fragment-inside-hiccup
+  (testing "a Selmer fragment renders inside a Hiccup tree without double-escaping"
+    (let [sel (sut/render-str "<a href=\"{{url}}\">{{label}}</a>" {:url "/x" :label "Go"})
+          out (str (h2/html {} [:div (sut/raw sel)]))]
+      (is (= "<div><a href=\"/x\">Go</a></div>" out)))))
+
+(deftest render-file-from-classpath
+  (testing "render-file resolves a template under resources/templates and keeps plain-HTML Alpine/HTMX attrs"
+    (let [out (sut/render "templates/interop-smoke.html"
+                          {:title "Interop OK"
+                           :hiccup_frag (sut/hiccup->html [:span.badge "from hiccup"])})]
+      (is (str/includes? out "Interop OK"))
+      (is (str/includes? out "from hiccup"))
+      ;; plain-HTML attributes (the whole point of Selmer) survive unambiguously
+      (is (str/includes? out "x-model=\"value.value\""))
+      (is (str/includes? out "tippy?.show()")))))
-- 
2.49.1


From ed3344438b5563a4e3fb96053915a742e19a9519 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 00:18:31 -0700
Subject: [PATCH 07/20] test(e2e): make Playwright BASE_URL-overridable +
 record Phase 2 e2e baseline

- playwright.config.ts: honor BASE_URL env (and skip the auto-started webServer when
  set) so a server booted from a specific worktree on a non-default port can be tested
  without fighting over :3333.
- skill test-recipes.md: record the recipe for running e2e from a non-default worktree
  (in-process test server + reseed helper) and the measured baseline on the merged
  hx-select reference: swap-doctrine 6/6 green; transaction-edit.spec.ts has a
  pre-existing Shared-Location save failure that masks 7 via serial mode; full suite
  30 pass / 2 fail / 7 skip. Gate for the refactor = swap spec + REPL pure-fn checks.
---
 .../reference/test-recipes.md                 | 48 +++++++++++++++++--
 playwright.config.ts                          | 22 ++++++---
 2 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/.claude/skills/ssr-form-migration/reference/test-recipes.md b/.claude/skills/ssr-form-migration/reference/test-recipes.md
index 2b590f33..0ea32019 100644
--- a/.claude/skills/ssr-form-migration/reference/test-recipes.md
+++ b/.claude/skills/ssr-form-migration/reference/test-recipes.md
@@ -82,8 +82,46 @@ The full suite must stay green after every migration. Specs touching the migrate
 | `e2e/transaction-import.spec.ts` | 4 | import |
 | `e2e/transaction-navigation.spec.ts` | 13 | navigation |
 
-**Pass/fail baseline: TO BE CAPTURED at the first Phase 2 e2e run** against a test server
-booted from *this* worktree (`integreat-execute-refactor`). At distillation time `:3333`
-was occupied by the `integreat-render-whole-form` worktree (morph version), so a run then
-would not reflect the merged hx-select reference. Record the green count here once
-captured, and never drop below it.
+### Running e2e from a non-default worktree (recipe)
+
+`:3333` is often taken by another worktree's server. To run this worktree's code:
+
+1. Boot the test server in-process on this worktree's REPL at an alternate port — no
+   second JVM, and it live-reloads as you edit:
+   ```clojure
+   (require '[auto-ap.test-server :as ts] '[ring.adapter.jetty :refer [run-jetty]]
+            '[datomic.api :as dc])
+   ;; reseed helper — call before each full run so state doesn't leak between runs
+   (defn reseed! []
+     (try (.stop (:server test-srv)) (catch Throwable _))
+     (try (dc/delete-database "datomic:mem://playwright-test") (catch Throwable _))
+     (def test-srv (let [c (ts/create-test-db) id (ts/seed-test-data c)]
+                     (reset! ts/test-transaction-id id)
+                     {:server (run-jetty (ts/test-app) {:port 3334 :join? false}) :tx-id id})))
+   (reseed!)
+   ```
+2. `playwright.config.ts` honors `BASE_URL`; setting it also disables the auto-started
+   webServer (so worktrees don't fight over :3333):
+   ```bash
+   BASE_URL=http://localhost:3334 npx playwright test --workers=1 --reporter=line
+   ```
+3. **Reseed (`reseed!`) before each full run.** One long-lived in-process server persists
+   its in-mem DB across separate `npx playwright` invocations; the swap spec's
+   `clearAccounts`/save mutate the shared transaction and leak into later specs. The
+   normal harness avoids this by booting a fresh server per `npx playwright test`.
+
+### Pass/fail baseline — measured on the merged hx-select reference (Phase 2 start)
+
+Server: in-process from `integreat-execute-refactor` on `:3334`, `--workers=1`, fresh seed.
+
+| Spec | Result |
+|------|--------|
+| `transaction-edit-swap.spec.ts` | **6 / 6 pass** — the whole-form swap parity contract |
+| `transaction-edit.spec.ts` | **1 fail (masks 7 via `mode: 'serial'`)** — `Shared Location … spread on save and reopen` fails: the save POST returns a validation error (amount/balance test-data assumption: "$200 = full amount of the 2nd transaction" doesn't hold), so the modal stays open. **Pre-existing on the merged reference, not introduced by this work.** |
+| Full suite (39) | **30 pass / 2 fail / 7 skipped.** 2nd failure: `transaction-navigation.spec.ts` date-range persistence (`date-range=all` expected, got `month`) — drift from the base branch's "require Apply for date-range filters" change, unrelated to forms. |
+
+**Gate for the Transaction Edit refactor:** the 6/6 swap-doctrine spec + REPL pure-fn
+checks. The `transaction-edit.spec.ts` `Shared Location` failure must be understood/fixed
+to unmask the other 7 before that file can serve as a full parity gate — it is **not**
+a regression to introduce, but it does cap the available characterization coverage today.
+Never drop below 30 passing on the full suite.
diff --git a/playwright.config.ts b/playwright.config.ts
index 499ba2ec..a6c57fc2 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,5 +1,11 @@
 import { defineConfig, devices } from '@playwright/test';
 
+// Allow pointing the suite at an already-running test server (e.g. one booted from a
+// specific worktree on a non-default port) via BASE_URL. When BASE_URL is set we skip
+// the auto-started webServer entirely, so parallel worktrees don't fight over :3333.
+const baseURL = process.env.BASE_URL ?? 'http://localhost:3333';
+const useExternalServer = !!process.env.BASE_URL;
+
 export default defineConfig({
   testDir: './e2e',
   fullyParallel: true,
@@ -8,15 +14,17 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   reporter: 'html',
   use: {
-    baseURL: 'http://localhost:3333',
+    baseURL,
     trace: 'on-first-retry',
   },
-  webServer: {
-    command: 'lein run -m auto-ap.test-server',
-    url: 'http://localhost:3333/test-info',
-    reuseExistingServer: !process.env.CI,
-    timeout: 120000,
-  },
+  webServer: useExternalServer
+    ? undefined
+    : {
+        command: 'lein run -m auto-ap.test-server',
+        url: 'http://localhost:3333/test-info',
+        reuseExistingServer: !process.env.CI,
+        timeout: 120000,
+      },
   projects: [
     {
       name: 'chromium',
-- 
2.49.1


From 69eed1f8a67b458092cc7471c7a2cc037d5b61be Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 06:05:42 -0700
Subject: [PATCH 08/20] fix(ssr): strip UI-only :mode before transaction upsert
 (500 on advanced manual save)

The :manual save handler builds its tx-data from the wizard snapshot and stripped the
control fields :action and :amount-mode, but not :mode (simple/advanced) added by the
recent manual-coding work. manual-coding-section* emits step-params[mode] on every
render, so EVERY advanced manual save posted :mode "advanced" into :upsert-transaction
and 500'd with ":db.error/not-an-entity :mode". Strip :mode alongside :action so the
upsert only sees real schema attributes.

Also fix the e2e helper that masked this: selectAccountFromTypeahead poked the Alpine v2
internal `el.__x.$data`, which is undefined on Alpine v3 (this app loads alpinejs@3.x),
so it silently no-op'd and the account posted empty. Drive the typeahead via the real
Alpine v3 path (Alpine.$data + tippy dropdown + click), mirroring transaction-edit-swap.

Unmasks the previously-failing "Shared Location spread on save" test (was first in a
serial file, hiding 7 siblings). Verified: that test passes; transaction-edit-swap stays
6/6. Skill gotchas.md records the :mode-strip rule, the Alpine-v3 API requirement, and
the modal-won't-close diagnosis recipe.
---
 .../ssr-form-migration/reference/gotchas.md   | 33 ++++++++
 e2e/transaction-edit.spec.ts                  | 79 ++++++-------------
 src/clj/auto_ap/ssr/transaction/edit.clj      |  5 +-
 3 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/.claude/skills/ssr-form-migration/reference/gotchas.md b/.claude/skills/ssr-form-migration/reference/gotchas.md
index 56846ae2..e0ccfdee 100644
--- a/.claude/skills/ssr-form-migration/reference/gotchas.md
+++ b/.claude/skills/ssr-form-migration/reference/gotchas.md
@@ -50,6 +50,39 @@ come from `GET /test-info`.
 
 ---
 
+## UI-only control fields must be stripped before a Datomic upsert
+
+The wizard snapshot/step-params carry UI control fields that are **not** schema
+attributes — `:action`, `:amount-mode`, and (added by the simple/advanced work) `:mode`.
+The `:manual` save handler stripped `:action`/`:amount-mode` but not `:mode`, so every
+*advanced* manual save passed `:mode "advanced"` into `:upsert-transaction` and 500'd with
+`:db.error/not-an-entity :mode`. Lesson: when a save derives its tx-data from the form
+snapshot, **strip every non-schema control key** before transacting. The session-backed
+wizard engine (Phase 6) avoids this class of bug by storing per-step *validated* data
+only — UI control fields never enter the combined data. This was a real production bug
+surfaced by the e2e gate, not a test artifact.
+
+## E2E helpers must use the Alpine **v3** API, not the v2 `__x` internal
+
+The app loads Alpine v3 (`cdn.jsdelivr.net/npm/alpinejs@3.x.x`). The v2 internal
+`el.__x.$data` is **gone** — `el.__x` is `undefined`, so any helper that pokes it silently
+no-ops. A stale `selectAccountFromTypeahead` did this and left the posted account empty
+(account-controlled by `x-model`, so the raw DOM `.value` you set is overwritten from
+Alpine's empty state). Drive components the real way instead: `window.Alpine.$data(el)`,
+open the tippy dropdown, inject `elements`, click the result — exactly as
+`transaction-edit-swap.spec.ts` does. Probe with
+`{ hasLegacy__x: !!el.__x, hasAlpineData: !!window.Alpine.$data(el) }`.
+
+## Diagnosing a "modal won't close after save"
+
+The edit modal closes on an `hx-trigger: modalclose` from a *successful* save; a
+validation failure re-renders the `#wizard-form` (200), and a server exception returns 500
+(caught by `wrap-error`). To find which: capture POST responses in Playwright
+(`page.on('response', …)`), read the `edit-submit` body — a `<form id="wizard-form">` means
+validation re-render; a `#error {…}` stack means a 500. Then serialize the form right
+before save (`new FormData(document.querySelector('#wizard-form'))`) to see exactly what
+posts. This is how the `:mode` 500 and the empty-account bugs above were isolated.
+
 ## Scorecard exceptions (ratchet violations with a reason)
 
 _None yet._ Append here if a migration must let a metric regress for a documented reason.
diff --git a/e2e/transaction-edit.spec.ts b/e2e/transaction-edit.spec.ts
index fc941d96..3f7d948e 100644
--- a/e2e/transaction-edit.spec.ts
+++ b/e2e/transaction-edit.spec.ts
@@ -41,68 +41,33 @@ async function getTestInfo(page: any) {
 }
 
 async function selectAccountFromTypeahead(page: any, rowIndex: number, accountName: string) {
-  // The account search uses Solr which isn't available in tests.
-  // Instead, we directly set the hidden input value via JavaScript.
-  
-  // Get all rows except the new-row, total, balance, and transaction total rows
-  const allRows = page.locator('#account-grid-body tbody tr');
-  const rowCount = await allRows.count();
-  
-  // Find the row that has a hidden input for account (actual account rows)
-  let accountRow = null;
-  let accountRowIndex = 0;
-  for (let i = 0; i < rowCount; i++) {
-    const row = allRows.nth(i);
-    const hasAccountInput = await row.locator('input[name*="transaction-account/account"]').count() > 0;
-    if (hasAccountInput) {
-      if (accountRowIndex === rowIndex) {
-        accountRow = row;
-        break;
-      }
-      accountRowIndex++;
-    }
-  }
-  
-  if (!accountRow) {
-    throw new Error(`Could not find account row at index ${rowIndex}`);
-  }
-  
-  // Find the hidden input for the account
-  const hiddenInput = accountRow.locator('input[type="hidden"][name*="transaction-account/account"]').first();
-  
-  // Get account IDs from test-info endpoint
-  const testInfo = await getTestInfo(page);
+  // Account search is backed by Solr (unavailable in tests). Drive the typeahead the
+  // way a user does, using the Alpine v3 API: open the tippy dropdown, inject a result
+  // into the component's `elements`, then click it. This runs the real click handler,
+  // Alpine reactivity and the HTMX swap exactly as in production -- unlike poking the
+  // long-removed Alpine v2 `__x` internal, which silently no-ops on Alpine v3 and left
+  // the posted account empty.
   const accountKey = accountName === 'Test' ? 'test-account' : 'second-account';
+  const label = `${accountName} Account`;
+  const testInfo = await getTestInfo(page);
   const accountId = testInfo.accounts[accountKey];
-  
   if (!accountId) {
     throw new Error(`Could not find account with name ${accountName}`);
   }
-  
-  // Set the hidden input value and trigger change
-  // Also update Alpine.js data to prevent it from overwriting our value
-  await hiddenInput.evaluate((el: HTMLInputElement, value: string) => {
-    // Set the DOM value
-    el.value = value;
-    
-    // Update Alpine.js component data
-    const alpineEl = el.closest('[x-data]');
-    if (alpineEl && (alpineEl as any).__x) {
-      (alpineEl as any).__x.$data.value.value = parseInt(value);
-      (alpineEl as any).__x.$data.value.label = 'Selected Account';
-    }
-    
-    // Also update any parent Alpine model (accountId)
-    const rowEl = el.closest('tr[x-data]');
-    if (rowEl && (rowEl as any).__x) {
-      (rowEl as any).__x.$data.accountId = parseInt(value);
-    }
-    
-    el.dispatchEvent(new Event('change', { bubbles: true }));
-  }, accountId.toString());
-  
-  // Wait for any HTMX updates
-  await page.waitForTimeout(300);
+
+  const row = page.locator('#account-grid-body tbody tr.account-row').nth(rowIndex);
+  const typeahead = row.locator('div.relative[x-data]').first();
+  await typeahead.locator('a[x-ref="input"]').click();
+  const search = page.locator('[data-tippy-root] input[x-model="search"]').first();
+  await search.waitFor({ state: 'visible' });
+  await search.fill('te');
+  await typeahead.evaluate((el: any, opt: { id: number; label: string }) => {
+    (window as any).Alpine.$data(el).elements = [{ value: opt.id, label: opt.label }];
+  }, { id: accountId, label });
+  await page.locator('[data-tippy-root] a', { hasText: label }).first().click();
+
+  // Wait for the change-gated whole-form swap to settle.
+  await page.waitForTimeout(400);
 }
 
 async function findAccountRow(page: any, rowIndex: number) {
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index 7b59ff84..1d264bd0 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -1235,7 +1235,10 @@
   [{:as request
     transaction :entity
     :keys [multi-form-state]}]
-  (let [tx-data (-> multi-form-state :snapshot (dissoc :action))
+  (let [;; :mode is a UI-only field (simple/advanced); :action/:amount-mode are control
+        ;; fields. None are Datomic attributes, so strip them before building the upsert
+        ;; (otherwise :upsert-transaction fails with :db.error/not-an-entity :mode).
+        tx-data (-> multi-form-state :snapshot (dissoc :action :mode))
         tx-id (:db/id tx-data)
         client-id (->db-id (:transaction/client tx-data))
         existing-tx (d-transactions/get-by-id tx-id)
-- 
2.49.1


From 32056bf3968a2652351960a2d09a696fa3532544 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 06:15:13 -0700
Subject: [PATCH 09/20] refactor(ssr): delete dead
 transaction-account-row-no-cursor* twin (heuristic 1)

transaction-account-row-no-cursor* and its only helper account-field-name were
unreferenced anywhere in src/ or test/ -- the *-no-cursor* duplicate the plan targets
for removal. The live row renderer is the top-rooted cursor form transaction-account-row*
(driven by fc/cursor-map from the accounts cursor). Deleting the twin: no-cursor twins
1 -> 0, ~53 LOC removed. Swap spec stays 6/6.
---
 src/clj/auto_ap/ssr/transaction/edit.clj | 54 ------------------------
 1 file changed, 54 deletions(-)

diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index 1d264bd0..a3986e37 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -339,60 +339,6 @@
                                            :hx-include "closest form"
                                            :class "account-remove-action"} svg/x))))
 
-(defn- account-field-name [index field]
-  (str "step-params[transaction/accounts][" index "]["
-       (if (keyword? field)
-         (str (when (namespace field)
-                (str (namespace field) "/"))
-              (name field))
-         field)
-       "]"))
-
-(defn transaction-account-row-no-cursor* [{:keys [account index client-id amount-mode total]}]
-  (com/data-grid-row
-   (-> {:class "account-row"
-        :x-data (hx/json {:show true
-                          :accountId (:transaction-account/account account)})
-        :data-key "show"
-        :x-ref "p"}
-       hx/alpine-mount-then-appear)
-   (com/hidden {:name (account-field-name index :db/id)
-                :value (or (:db/id account) "")})
-   (com/data-grid-cell
-    {}
-    (com/validated-field
-     {}
-     (account-typeahead* {:value (:transaction-account/account account)
-                          :client-id client-id
-                          :name (account-field-name index :transaction-account/account)
-                          :x-model "accountId"})))
-   (com/data-grid-cell
-    {}
-    (com/validated-field
-     {}
-     (location-select* {:name (account-field-name index :transaction-account/location)
-                        :account-location (:account/location (cond->> (:transaction-account/account account)
-                                                               (nat-int? (:transaction-account/account account)) (dc/pull (dc/db conn)
-                                                                                                                          '[:account/location])))
-                        :client-locations (pull-attr (dc/db conn) :client/locations client-id)
-                        :value (:transaction-account/location account)})))
-   (com/data-grid-cell
-    {}
-    (com/validated-field
-     {}
-     (if (= "%" amount-mode)
-       (com/text-input {:name (account-field-name index :transaction-account/amount)
-                        :class "w-16 account-amount-field"
-                        :value (:transaction-account/amount account)
-                        :type "number"
-                        :step "0.01"})
-       (com/money-input {:name (account-field-name index :transaction-account/amount)
-                         :class "w-16 account-amount-field"
-                         :value (:transaction-account/amount account)}))))
-   (com/data-grid-cell {:class "align-top"}
-                       (com/a-icon-button {"@click.prevent.stop" "show=false; setTimeout(() => $refs.p.remove(), 500)"
-                                           :class "account-remove-action"} svg/x))))
-
 (defn location-select [{{:keys [name account-id client-id value] :as qp} :query-params}]
   (html-response (location-select* {:name name
                                     :value value
-- 
2.49.1


From a7ccdb12f381604bd80498db503adae64cf6c4e6 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 06:20:04 -0700
Subject: [PATCH 10/20] docs(skill): record faked-cursor de-fake learning +
 Phase 2 scorecard progress

- gotchas.md: de-faking a cursor is not a drop-in -- with-field-default mutates the
  cursor (transact!) as a render side effect and broke the simple-mode swap; the de-fake
  belongs with the render-fn rewrite, verified against the swap spec.
- scorecard.md: append the Phase 2 (in-progress) Transaction Edit row -- no-cursor 1->0,
  LOC 1608->1555, parity held (swap 6/6 + Shared Location). Faked roots / snapshot /
  Selmer / route-collapse remain as the wholesale-rendering continuation of Phase 2.
---
 .../skills/ssr-form-migration/reference/gotchas.md | 13 +++++++++++++
 .../ssr-form-migration/reference/scorecard.md      | 14 ++++++++++----
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/.claude/skills/ssr-form-migration/reference/gotchas.md b/.claude/skills/ssr-form-migration/reference/gotchas.md
index e0ccfdee..72fd7b89 100644
--- a/.claude/skills/ssr-form-migration/reference/gotchas.md
+++ b/.claude/skills/ssr-form-migration/reference/gotchas.md
@@ -83,6 +83,19 @@ validation re-render; a `#error {…}` stack means a 500. Then serialize the for
 before save (`new FormData(document.querySelector('#wizard-form'))`) to see exactly what
 posts. This is how the `:mode` 500 and the empty-account bugs above were isolated.
 
+## De-faking a cursor is not a drop-in — `with-field-default` mutates
+
+Tempting fix for a faked deep cursor (`with-cursor` + synthetic `MapCursor` at index 0):
+replace it with `(fc/with-field-default 0 {})` to advance naturally. **It broke the
+simple-mode swap** (`transaction-edit-swap` test 1 threw). `with-field-default` calls
+`cursor/transact!` — it *mutates the form cursor* (assoc-ing the default row) as a render
+side effect, which changes simple-mode behavior. The read-only synthetic `MapCursor` did
+not. Lesson: removing a faked cursor on these modals is **not** a one-liner — it's part of
+the larger render-fn extraction (render the row from explicit data, construct field names
+directly, look up errors explicitly), done when the simple/advanced rows are reworked into
+pure render fns / Selmer. Don't swap one cursor primitive for another and assume parity;
+verify against the swap spec, and expect the de-fake to come with the render-fn rewrite.
+
 ## Scorecard exceptions (ratchet violations with a reason)
 
 _None yet._ Append here if a migration must let a metric regress for a documented reason.
diff --git a/.claude/skills/ssr-form-migration/reference/scorecard.md b/.claude/skills/ssr-form-migration/reference/scorecard.md
index d9f1f036..5770d60d 100644
--- a/.claude/skills/ssr-form-migration/reference/scorecard.md
+++ b/.claude/skills/ssr-form-migration/reference/scorecard.md
@@ -39,8 +39,14 @@ Each migration appends one row (after-numbers), referencing the before in the di
 | Phase | Modal | LOC | Routes | no-cursor twins | faked roots | snapshot merges | OOB | mixed hx- | cookbook reused / added |
 |-------|-------|-----|--------|-----------------|-------------|-----------------|-----|-----------|-------------------------|
 | 1 (baseline) | Transaction Edit `transaction/edit.clj` | 1608 | ~12 | 1 | 2 | ~75 | 0 | 8 | — / seeded 7 entries |
+| 2 (in progress) | Transaction Edit `transaction/edit.clj` | 1555 | ~12 | **0** | 2 | ~75 | 0 | 8 | — / 0 |
 
-> Phase 1 is distillation only — no app code changed. The Transaction Edit row is the
-> **before** baseline that Phase 2 must beat (target: routes → ~3, no-cursor → 0, faked
-> roots → 0, snapshot merges → 0, LOC ↓, mixed hx- → 0). The `0` OOB is already achieved
-> by the merged reference and must not regress.
+> **Phase 2 progress (partial).** Achieved with parity held (swap spec 6/6 + Shared
+> Location green): deleted the dead `*-no-cursor*` twin (no-cursor 1→0, −53 LOC) and fixed
+> a real production bug (`:mode` leaking into the upsert → 500 on every advanced manual
+> save). **Still open** for this modal — and intentionally *not* forced under parity risk:
+> faked cursor roots (2 — de-faking needs the render-fn rewrite, see `gotchas.md`), the
+> snapshot round-trip (~75 — removed by the wizard→plain-form reclassification), Selmer
+> conversion of the render fns, and route collapse (~12 → ~3). These are the bulk of the
+> modal migration and require restructuring the modal's rendering wholesale rather than
+> isolated edits; track as the continuation of Phase 2.
-- 
2.49.1


From 57f3b63b6a46f3a4d4f404e9fd1d5d40360183e3 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 06:29:25 -0700
Subject: [PATCH 11/20] refactor(ssr): de-fake simple-mode account cursor via
 explicit render (heuristic 1)

simple-mode-fields* rendered its single account row by rebinding the form cursor to a
synthetic MapCursor rooted at accounts[0] (faking a deep starting position). Replace that
with explicit-data rendering: account-field-name builds the exact field names the cursor
would produce at [:step-params :transaction/accounts 0 field] (via path->name2), and
account-field-errors reads errors from the same path -- no re-rooted cursor.

This is the render-fn rewrite the earlier with-field-default shortcut couldn't be (that
mutated the cursor and broke the simple-mode swap). Scorecard: faked cursor roots 2 -> 0
(both heuristic-1 items now clear for this modal). Parity held: swap spec 6/6 (its vendor
tests run in simple mode), Shared Location save green, full suite 31 pass / no regression.
---
 .../ssr-form-migration/reference/scorecard.md |  19 ++--
 src/clj/auto_ap/ssr/transaction/edit.clj      | 103 ++++++++++--------
 2 files changed, 68 insertions(+), 54 deletions(-)

diff --git a/.claude/skills/ssr-form-migration/reference/scorecard.md b/.claude/skills/ssr-form-migration/reference/scorecard.md
index 5770d60d..5a30b28e 100644
--- a/.claude/skills/ssr-form-migration/reference/scorecard.md
+++ b/.claude/skills/ssr-form-migration/reference/scorecard.md
@@ -39,14 +39,15 @@ Each migration appends one row (after-numbers), referencing the before in the di
 | Phase | Modal | LOC | Routes | no-cursor twins | faked roots | snapshot merges | OOB | mixed hx- | cookbook reused / added |
 |-------|-------|-----|--------|-----------------|-------------|-----------------|-----|-----------|-------------------------|
 | 1 (baseline) | Transaction Edit `transaction/edit.clj` | 1608 | ~12 | 1 | 2 | ~75 | 0 | 8 | — / seeded 7 entries |
-| 2 (in progress) | Transaction Edit `transaction/edit.clj` | 1555 | ~12 | **0** | 2 | ~75 | 0 | 8 | — / 0 |
+| 2 (in progress) | Transaction Edit `transaction/edit.clj` | 1570 | ~12 | **0** | **0** | ~75 | 0 | 8 | — / 0 |
 
 > **Phase 2 progress (partial).** Achieved with parity held (swap spec 6/6 + Shared
-> Location green): deleted the dead `*-no-cursor*` twin (no-cursor 1→0, −53 LOC) and fixed
-> a real production bug (`:mode` leaking into the upsert → 500 on every advanced manual
-> save). **Still open** for this modal — and intentionally *not* forced under parity risk:
-> faked cursor roots (2 — de-faking needs the render-fn rewrite, see `gotchas.md`), the
-> snapshot round-trip (~75 — removed by the wizard→plain-form reclassification), Selmer
-> conversion of the render fns, and route collapse (~12 → ~3). These are the bulk of the
-> modal migration and require restructuring the modal's rendering wholesale rather than
-> isolated edits; track as the continuation of Phase 2.
+> Location green, full suite 31 pass / no regression): deleted the dead `*-no-cursor*`
+> twin (no-cursor 1→0), **de-faked the simple-mode cursor** (faked roots 2→0) by rendering
+> the row from explicit data with explicit field names (`account-field-name`) + explicit
+> error lookup — the render-fn rewrite the `with-field-default` shortcut couldn't do — and
+> fixed a real production bug (`:mode` leaking into the upsert → 500 on every advanced
+> manual save). **Still open** for this modal: the snapshot round-trip (~75 — removed by
+> the wizard→plain-form reclassification), Selmer conversion of the render fns, and route
+> collapse (~12 → ~3). These remain the bulk of the migration and need wholesale
+> restructuring of the modal's rendering; track as the continuation of Phase 2.
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index a3986e37..3e4cbce5 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -183,10 +183,32 @@
                                  (:account/name (d-accounts/clientize (dc/pull (dc/db conn) d-accounts/default-read value)
                                                                       client-id)))})])
 
+(defn- account-field-name
+  "Explicit form-field name for account row `index`, field `field` -- the same string
+   the form cursor produces at path [:step-params :transaction/accounts index field]
+   (via path->name2), without faking a deep cursor to get there."
+  [index field]
+  (str "step-params[transaction/accounts][" index "]["
+       (if (keyword? field)
+         (str (when (namespace field) (str (namespace field) "/")) (name field))
+         field)
+       "]"))
+
+(defn- account-field-errors
+  "Errors for account row `index`, field `field`, read straight from the form errors
+   at the same path the cursor would walk -- avoids re-rooting a cursor to look them up."
+  [index field]
+  (when (bound? #'fc/*form-errors*)
+    (get-in fc/*form-errors* [:step-params :transaction/accounts index field])))
+
 (defn simple-mode-fields*
   "Renders the simple-mode account + location row and the toggle-to-advanced link.
    Must be called within a fc/start-form + fc/with-field :step-params context.
-   Caller must establish Alpine x-data with simpleAccountId in scope."
+   Caller must establish Alpine x-data with simpleAccountId in scope.
+
+   The single account row is rendered from explicit data with explicit field names
+   (account-field-name 0 ...) rather than faking a synthetic MapCursor rooted at
+   accounts[0] -- the row always lives at index 0 in simple mode."
   [request]
   (let [snapshot (-> request :multi-form-state :snapshot)
         step-params (-> request :multi-form-state :step-params)
@@ -204,50 +226,41 @@
                             (:transaction/amount snapshot)
                             0.0))]
     [:div
-     (fc/with-field :transaction/accounts
-       (fc/with-cursor (let [cur fc/*current*]
-                         (if (sequential? @cur)
-                           (nth cur 0 nil)
-                           (auto_ap.cursor.MapCursor. {} (cursor/state cur) (conj (cursor/path cur) 0))))
-         [:span
-          (fc/with-field :db/id
-            (com/hidden {:name (fc/field-name)
-                         :value row-id}))
-          [:div.flex.gap-2.mt-2
-           (fc/with-field :transaction-account/account
-             (com/validated-field
-              {:label "Account"
-               :errors (fc/field-errors)}
-              [:div.w-72
-               (account-typeahead* {:value account-val
-                                    :client-id client-id
-                                    :name (fc/field-name)
-                                    :x-model "simpleAccountId"})]))
-           (fc/with-field :transaction-account/location
-             ;; Selecting the account only affects the valid Location options, so the
-             ;; change swaps just this cell -- nothing else needs to re-render.
-             [:div {:id "simple-account-location"}
-              (com/validated-field
-               {:label "Location"
-                :errors (fc/field-errors)
-                :x-hx-val:account-id "simpleAccountId"
-                :hx-vals (hx/json (cond-> {:name (fc/field-name)}
-                                    client-id (assoc :client-id client-id)))
-                :x-dispatch:changed "simpleAccountId"
-                :hx-trigger "changed"
-                :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-                :hx-target "#simple-account-location"
-                :hx-select "#simple-account-location"
-                :hx-swap "outerHTML"
-                :hx-include "closest form"}
-               (location-select*
-                {:name (fc/field-name)
-                 :account-location (:account/location account-id)
-                 :client-locations (pull-attr (dc/db conn) :client/locations client-id)
-                 :value location-val}))])
-           (fc/with-field :transaction-account/amount
-             (com/hidden {:name (fc/field-name)
-                          :value total}))]]))
+     [:span
+      (com/hidden {:name (account-field-name 0 :db/id)
+                   :value row-id})
+      [:div.flex.gap-2.mt-2
+       (com/validated-field
+        {:label "Account"
+         :errors (account-field-errors 0 :transaction-account/account)}
+        [:div.w-72
+         (account-typeahead* {:value account-val
+                              :client-id client-id
+                              :name (account-field-name 0 :transaction-account/account)
+                              :x-model "simpleAccountId"})])
+       ;; Selecting the account only affects the valid Location options, so the
+       ;; change swaps just this cell -- nothing else needs to re-render.
+       [:div {:id "simple-account-location"}
+        (com/validated-field
+         {:label "Location"
+          :errors (account-field-errors 0 :transaction-account/location)
+          :x-hx-val:account-id "simpleAccountId"
+          :hx-vals (hx/json (cond-> {:name (account-field-name 0 :transaction-account/location)}
+                              client-id (assoc :client-id client-id)))
+          :x-dispatch:changed "simpleAccountId"
+          :hx-trigger "changed"
+          :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+          :hx-target "#simple-account-location"
+          :hx-select "#simple-account-location"
+          :hx-swap "outerHTML"
+          :hx-include "closest form"}
+         (location-select*
+          {:name (account-field-name 0 :transaction-account/location)
+           :account-location (:account/location account-id)
+           :client-locations (pull-attr (dc/db conn) :client/locations client-id)
+           :value location-val}))]
+       (com/hidden {:name (account-field-name 0 :transaction-account/amount)
+                    :value total})]]
      [:div.mt-1
       [:a.text-sm.text-blue-600.hover:underline.cursor-pointer
        {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-toggle-mode)
-- 
2.49.1


From 07159dc22194603dbeb163708b2d2ad170f2bad7 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 06:33:52 -0700
Subject: [PATCH 12/20] refactor(ssr): drop dead account-total /
 account-balance routes (heuristic 6)

The hx-select reference moved running totals into an inline #account-totals tbody that
refreshes via edit-form-changed, so nothing posts to ::route/account-total or
::route/account-balance anymore -- their route handlers were referenced only by their own
registrations. Remove the two handler fns, their route registrations, and the now-unused
route keys from routes/transactions.cljc. The pure account-total* / account-balance* fns
(used inline to render the totals) are untouched.

Scorecard: modal routes ~12 -> ~10. Full suite 31 pass / no regression.
---
 .../ssr-form-migration/reference/scorecard.md      |  2 +-
 src/clj/auto_ap/ssr/transaction/edit.clj           | 14 --------------
 src/cljc/auto_ap/routes/transactions.cljc          |  2 --
 3 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/.claude/skills/ssr-form-migration/reference/scorecard.md b/.claude/skills/ssr-form-migration/reference/scorecard.md
index 5a30b28e..5d8a49f4 100644
--- a/.claude/skills/ssr-form-migration/reference/scorecard.md
+++ b/.claude/skills/ssr-form-migration/reference/scorecard.md
@@ -39,7 +39,7 @@ Each migration appends one row (after-numbers), referencing the before in the di
 | Phase | Modal | LOC | Routes | no-cursor twins | faked roots | snapshot merges | OOB | mixed hx- | cookbook reused / added |
 |-------|-------|-----|--------|-----------------|-------------|-----------------|-----|-----------|-------------------------|
 | 1 (baseline) | Transaction Edit `transaction/edit.clj` | 1608 | ~12 | 1 | 2 | ~75 | 0 | 8 | — / seeded 7 entries |
-| 2 (in progress) | Transaction Edit `transaction/edit.clj` | 1570 | ~12 | **0** | **0** | ~75 | 0 | 8 | — / 0 |
+| 2 (in progress) | Transaction Edit `transaction/edit.clj` | ~1558 | **~10** | **0** | **0** | ~75 | 0 | 8 | — / 0 |
 
 > **Phase 2 progress (partial).** Achieved with parity held (swap spec 6/6 + Shared
 > Location green, full suite 31 pass / no regression): deleted the dead `*-no-cursor*`
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index 3e4cbce5..4979e0be 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -387,12 +387,6 @@
                      "text-red-300")}
      (format "$%,.2f" balance)]))
 
-(defn account-total [request]
-  (html-response (account-total* request)))
-
-(defn account-balance [request]
-  (html-response (account-balance* request)))
-
 (defn ->percentage [amount total]
   (when (and amount total (not= total 0))
     (* 100.0 (/ amount total))))
@@ -1526,14 +1520,6 @@
                                                                      [:maybe entity-id]]
                                                                     [:account-id {:optional true}
                                                                      [:maybe entity-id]]]))
-    ::route/account-total (-> account-total
-                              (mm/wrap-wizard edit-wizard)
-                              (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
-                              (mm/wrap-decode-multi-form-state))
-    ::route/account-balance (-> account-balance
-                                (mm/wrap-wizard edit-wizard)
-                                (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
-                                (mm/wrap-decode-multi-form-state))
     ::route/edit-form-changed (-> edit-form-changed-handler
                                   (mm/wrap-wizard edit-wizard)
                                   (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
diff --git a/src/cljc/auto_ap/routes/transactions.cljc b/src/cljc/auto_ap/routes/transactions.cljc
index 30f77dcc..e5c6c48e 100644
--- a/src/cljc/auto_ap/routes/transactions.cljc
+++ b/src/cljc/auto_ap/routes/transactions.cljc
@@ -30,8 +30,6 @@
              "/edit-submit" ::edit-submit
              "/edit-vendor-changed" ::edit-vendor-changed
              "/location-select" ::location-select
-             "/account-total" ::account-total
-             "/account-balance" ::account-balance
              "/toggle-amount-mode" ::toggle-amount-mode
              "/edit-form-changed" ::edit-form-changed
              "/edit-wizard-new-account" ::edit-wizard-new-account
-- 
2.49.1


From 1d5a95196f5d8ffe70f131dcf7eae9522a339306 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 06:34:43 -0700
Subject: [PATCH 13/20] docs(skill): add cookbook entry for de-faking a
 fixed-index row from explicit data

Captures the reusable pattern proven on simple-mode-fields*: render a known-index row
(accounts[0]) from explicit data with explicit field names (path->name2 equivalent) +
explicit error lookup, instead of faking a deep cursor. Pairs with the gotcha that
with-field-default mutates the cursor. Growth contract for the de-fake commit.
---
 .../reference/component-cookbook.md           | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/.claude/skills/ssr-form-migration/reference/component-cookbook.md b/.claude/skills/ssr-form-migration/reference/component-cookbook.md
index 36549f26..f9332f10 100644
--- a/.claude/skills/ssr-form-migration/reference/component-cookbook.md
+++ b/.claude/skills/ssr-form-migration/reference/component-cookbook.md
@@ -90,6 +90,35 @@ replaces the amount input (caret survives).
                  :placeholder "Optional note"})   ; no hx-* — rides along to save
 ```
 
+## fixed-index row from explicit data — de-faking a deep cursor
+
+When a row always lives at a known index (e.g. simple mode renders exactly `accounts[0]`),
+render it from **explicit data with explicit field names** instead of faking a cursor
+rooted there. Build the name the same way the cursor would (`path->name2`) and read errors
+from the same path — no `with-cursor`/`MapCursor` rebind, no `with-field-default` (which
+*mutates* the cursor and breaks swap behavior, see `gotchas.md`).
+
+```clojure
+(defn- account-field-name [index field]            ; == path->name2 for this path
+  (str "step-params[transaction/accounts][" index "]["
+       (if (keyword? field)
+         (str (when (namespace field) (str (namespace field) "/")) (name field))
+         field) "]"))
+
+(defn- account-field-errors [index field]
+  (when (bound? #'fc/*form-errors*)
+    (get-in fc/*form-errors* [:step-params :transaction/accounts index field])))
+
+;; render the row directly -- no fc/with-field / fc/with-cursor wrappers
+[:span
+ (com/hidden {:name (account-field-name 0 :db/id) :value row-id})
+ (com/validated-field {:errors (account-field-errors 0 :transaction-account/account)}
+   (account-typeahead* {:name (account-field-name 0 :transaction-account/account) ...}))
+ ...]
+```
+Verify byte-parity against the cursor version (the swap spec's simple-mode tests catch
+divergence). Scorecard heuristic 1: faked roots → 0.
+
 ## mode toggle ($/% radio, simple/advanced link) — Rule 3, whole-form swap
 
 ```clojure
-- 
2.49.1


From 0f5650b73e15729a4060070fd5e8301c781f64d9 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 07:07:52 -0700
Subject: [PATCH 14/20] refactor(ssr): collapse 5 manual-coding operation
 routes into edit-form-changed (heuristic 6)

The 5 manual-coding operations (vendor change, simple/advanced toggle, add row, remove
row, $/% toggle) each had their own route + handler, all doing "mutate form state ->
render-full-form". Fold them into the single edit-form-changed endpoint, which now
dispatches on an `op` form-param to the relevant pure apply-* mutation fn (apply-vendor-
changed / apply-toggle-mode / apply-new-account / apply-remove-account /
apply-toggle-amount-mode) then re-renders. A missing/unknown op (a plain dependent-field
change, e.g. account->location or amount->totals) just re-renders, as before.

- edit.clj: 6 handlers -> 1 dispatcher + 5 pure apply-* fns; markup posts to
  edit-form-changed with :hx-vals {:op "..."}.
- routes/transactions.cljc: remove the 5 now-unused route keys.
- e2e specs: retarget the vendor selector by op (div[hx-vals*="vendor-changed"]) and
  point the toggle-amount-mode / vendor response waits at edit-form-changed, since the
  old per-op route names are gone. (Behavioral assertions unchanged.)

Scorecard: manual-coding routes ~10 -> ~5 (operations now one dispatcher). Parity held:
swap spec 6/6, full suite 32 pass (Shared Location green; no new regression).
---
 .../ssr-form-migration/reference/scorecard.md |   2 +-
 e2e/transaction-edit-swap.spec.ts             |  14 +--
 e2e/transaction-edit.spec.ts                  |  20 ++--
 src/clj/auto_ap/ssr/transaction/edit.clj      | 101 ++++++++----------
 src/cljc/auto_ap/routes/transactions.cljc     |   5 -
 5 files changed, 63 insertions(+), 79 deletions(-)

diff --git a/.claude/skills/ssr-form-migration/reference/scorecard.md b/.claude/skills/ssr-form-migration/reference/scorecard.md
index 5d8a49f4..655bab92 100644
--- a/.claude/skills/ssr-form-migration/reference/scorecard.md
+++ b/.claude/skills/ssr-form-migration/reference/scorecard.md
@@ -39,7 +39,7 @@ Each migration appends one row (after-numbers), referencing the before in the di
 | Phase | Modal | LOC | Routes | no-cursor twins | faked roots | snapshot merges | OOB | mixed hx- | cookbook reused / added |
 |-------|-------|-----|--------|-----------------|-------------|-----------------|-----|-----------|-------------------------|
 | 1 (baseline) | Transaction Edit `transaction/edit.clj` | 1608 | ~12 | 1 | 2 | ~75 | 0 | 8 | — / seeded 7 entries |
-| 2 (in progress) | Transaction Edit `transaction/edit.clj` | ~1558 | **~10** | **0** | **0** | ~75 | 0 | 8 | — / 0 |
+| 2 (in progress) | Transaction Edit `transaction/edit.clj` | ~1530 | **~5** | **0** | **0** | ~75 | 0 | 8 | — / 0 |
 
 > **Phase 2 progress (partial).** Achieved with parity held (swap spec 6/6 + Shared
 > Location green, full suite 31 pass / no regression): deleted the dead `*-no-cursor*`
diff --git a/e2e/transaction-edit-swap.spec.ts b/e2e/transaction-edit-swap.spec.ts
index 8eb776ff..8d1a251e 100644
--- a/e2e/transaction-edit-swap.spec.ts
+++ b/e2e/transaction-edit-swap.spec.ts
@@ -48,7 +48,7 @@ async function openManualAdvanced(page: any, transactionIndex = 0) {
 // (Solr is unavailable in tests), click it, and wait for the whole-form swap.
 async function selectVendor(page: any, vendorId: number, label: string) {
   const vendor = page
-    .locator('div[hx-post*="edit-vendor-changed"]')
+    .locator('div[hx-vals*="vendor-changed"]')
     .first()
     .locator('div.relative[x-data]')
     .first();
@@ -62,7 +62,7 @@ async function selectVendor(page: any, vendorId: number, label: string) {
 
   const swap = page.waitForResponse(
     (r: any) =>
-      r.url().includes('edit-vendor-changed') &&
+      r.url().includes('edit-form-changed') &&
       r.request().method() === 'POST' &&
       r.status() === 200
   );
@@ -303,7 +303,7 @@ test.describe('Transaction Edit whole-form swap', () => {
     await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
     await page.waitForSelector('#wizardmodal');
     await page.click('button:has-text("Manual")');
-    await page.waitForSelector('div[hx-post*="edit-vendor-changed"]');
+    await page.waitForSelector('div[hx-vals*="vendor-changed"]');
 
     const testInfo = await (await page.request.get('/test-info')).json();
     const vendorId: number = testInfo.accounts.vendor;
@@ -311,7 +311,7 @@ test.describe('Transaction Edit whole-form swap', () => {
 
     // Drive the vendor typeahead like a user: open dropdown, inject a result
     // (Solr is unavailable in tests), click it.
-    const vendor = page.locator('div[hx-post*="edit-vendor-changed"]').first().locator('div.relative[x-data]').first();
+    const vendor = page.locator('div[hx-vals*="vendor-changed"]').first().locator('div.relative[x-data]').first();
     await vendor.locator('a[x-ref="input"]').click();
     const search = page.locator('[data-tippy-root] input[x-model="search"]').first();
     await search.waitFor({ state: 'visible' });
@@ -322,7 +322,7 @@ test.describe('Transaction Edit whole-form swap', () => {
 
     const swap = page.waitForResponse(
       (r: any) =>
-        r.url().includes('edit-vendor-changed') &&
+        r.url().includes('edit-form-changed') &&
         r.request().method() === 'POST' &&
         r.status() === 200
     );
@@ -352,7 +352,7 @@ test.describe('Transaction Edit whole-form swap', () => {
     await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
     await page.waitForSelector('#wizardmodal');
     await page.click('button:has-text("Manual")');
-    await page.waitForSelector('div[hx-post*="edit-vendor-changed"]');
+    await page.waitForSelector('div[hx-vals*="vendor-changed"]');
 
     const testInfo = await (await page.request.get('/test-info')).json();
     const vendor1: number = testInfo.accounts.vendor;
@@ -361,7 +361,7 @@ test.describe('Transaction Edit whole-form swap', () => {
     const account2: number = testInfo.accounts['second-account'];
 
     const vendorLabel = page
-      .locator('div[hx-post*="edit-vendor-changed"] span[x-text="value.label"]')
+      .locator('div[hx-vals*="vendor-changed"] span[x-text="value.label"]')
       .first();
     const accountHidden = page
       .locator('input[type="hidden"][name*="transaction-account/account"]')
diff --git a/e2e/transaction-edit.spec.ts b/e2e/transaction-edit.spec.ts
index 3f7d948e..ff350f25 100644
--- a/e2e/transaction-edit.spec.ts
+++ b/e2e/transaction-edit.spec.ts
@@ -150,7 +150,7 @@ async function toggleToPercentMode(page: any) {
   
   // Wait for HTMX to swap the grid body
   await page.waitForResponse(response => 
-    response.url().includes('/toggle-amount-mode') && response.status() === 200
+    response.url().includes('/edit-form-changed') && response.status() === 200
   );
   await page.waitForTimeout(200);
 }
@@ -161,7 +161,7 @@ async function toggleToDollarMode(page: any) {
   
   // Wait for HTMX to swap the grid body
   await page.waitForResponse(response => 
-    response.url().includes('/toggle-amount-mode') && response.status() === 200
+    response.url().includes('/edit-form-changed') && response.status() === 200
   );
   await page.waitForTimeout(200);
 }
@@ -359,7 +359,7 @@ async function selectVendorFromTypeahead(page: any, vendorName: string) {
     throw new Error(`Could not find vendor with name ${vendorName}`);
   }
 
-  const vendorContainer = page.locator('div[hx-post*="edit-vendor-changed"]').first();
+  const vendorContainer = page.locator('div[hx-vals*="vendor-changed"]').first();
   const vendorHidden = vendorContainer.locator('input[type="hidden"]').first();
 
   await vendorHidden.evaluate((el: HTMLInputElement, value: string) => {
@@ -374,7 +374,7 @@ async function selectVendorFromTypeahead(page: any, vendorName: string) {
     el.dispatchEvent(new Event('change', { bubbles: true }));
   });
 
-  await page.waitForResponse(response => response.url().includes('/edit-vendor-changed') && response.status() === 200);
+  await page.waitForResponse(response => response.url().includes('/edit-form-changed') && response.status() === 200);
   await page.waitForTimeout(500);
 }
 
@@ -434,11 +434,11 @@ test.describe('Transaction Edit Vendor Pre-population', () => {
 // `elements` instead of being fetched. Everything else -- the dropdown's own
 // search input firing a native `change` on blur, the `value = element` click
 // handler, the Alpine reactivity, and the HTMX round-trip to
-// `edit-vendor-changed` -- runs exactly as in production. This is the flow that
+// `edit-form-changed` (op=vendor-changed) -- runs exactly as in production. This is the flow that
 // regressed: a stale native `change` from the search input used to win the race
 // and revert the vendor to its previous value.
 async function selectVendorViaDropdown(page: any, vendorId: number, vendorName: string) {
-  const wrapper = page.locator('div[hx-post*="edit-vendor-changed"]').first();
+  const wrapper = page.locator('div[hx-vals*="vendor-changed"]').first();
   const typeahead = wrapper.locator('div.relative[x-data]').first();
 
   // Open the dropdown (tippy renders the popper into [data-tippy-root]).
@@ -466,7 +466,7 @@ async function selectVendorViaDropdown(page: any, vendorId: number, vendorName:
 
   await page.waitForResponse(
     (response: any) =>
-      response.url().includes('/edit-vendor-changed') && response.status() === 200
+      response.url().includes('/edit-form-changed') && response.status() === 200
   );
   await page.waitForTimeout(500);
 }
@@ -485,7 +485,7 @@ async function openManualVendorSection(page: any, transactionIndex: number) {
   await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
   await page.waitForSelector('#wizardmodal');
   await page.click('button:has-text("Manual")');
-  await page.waitForSelector('div[hx-post*="edit-vendor-changed"]');
+  await page.waitForSelector('div[hx-vals*="vendor-changed"]');
 }
 
 test.describe('Transaction Edit Vendor Selection', () => {
@@ -501,14 +501,14 @@ test.describe('Transaction Edit Vendor Selection', () => {
     // round-trip. Before the fix this reverted to blank because a stale
     // `change` event submitted the previous vendor and its response won.
     const label = page
-      .locator('div[hx-post*="edit-vendor-changed"] span[x-text="value.label"]')
+      .locator('div[hx-vals*="vendor-changed"] span[x-text="value.label"]')
       .first();
     await expect(label).toHaveText('Test Vendor');
 
     // The server-rendered hidden input must carry the newly selected vendor id.
     const hidden = page
       .locator(
-        'div[hx-post*="edit-vendor-changed"] input[type="hidden"][name="step-params[transaction/vendor]"]'
+        'div[hx-vals*="vendor-changed"] input[type="hidden"][name="step-params[transaction/vendor]"]'
       )
       .first();
     await expect(hidden).toHaveValue(vendorId.toString());
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index 4979e0be..5e5ad1f8 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -263,7 +263,8 @@
                     :value total})]]
      [:div.mt-1
       [:a.text-sm.text-blue-600.hover:underline.cursor-pointer
-       {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-toggle-mode)
+       {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+        :hx-vals (hx/json {:op "toggle-mode"})
         :hx-include "closest form"
         :hx-target "#wizard-form"
         :hx-select "#wizard-form"
@@ -344,8 +345,8 @@
            (com/text-input (assoc amount-attrs :type "number" :step "0.01"))
            (com/money-input amount-attrs))))))
    (com/data-grid-cell {:class "align-top"}
-                       (com/a-icon-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-remove-account)
-                                           :hx-vals (hx/json {:row-index (or index 0)})
+                       (com/a-icon-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                                           :hx-vals (hx/json {:op "remove-account" :row-index (or index 0)})
                                            :hx-target "#wizard-form"
                                            :hx-select "#wizard-form"
                                            :hx-swap "outerHTML"
@@ -428,7 +429,8 @@
                                                                      :value amount-mode
                                                                      :name "step-params[amount-mode]"
                                                                      :orientation :horizontal
-                                                                     :hx-post (bidi/path-for ssr-routes/only-routes ::route/toggle-amount-mode)
+                                                                     :hx-vals (hx/json {:op "toggle-amount-mode"})
+                                                                     :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
                                                                      :hx-target "#wizard-form"
                                                                      :hx-select "#wizard-form"
                                                                      :hx-swap "outerHTML"
@@ -468,7 +470,8 @@
 
                    (com/data-grid-row {:class "new-row"}
                                       (com/data-grid-cell {:colspan 4}
-                                                          (com/a-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-new-account)
+                                                          (com/a-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                                                                         :hx-vals (hx/json {:op "new-account"})
                                                                          :hx-target "#wizard-form"
                                                                          :hx-select "#wizard-form"
                                                                          :hx-swap "outerHTML"
@@ -490,7 +493,8 @@
     [:div#manual-coding-section
      (com/hidden {:name "step-params[mode]" :value (name mode)})
      [:div {:hx-trigger "change"
-            :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-vendor-changed)
+            :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+            :hx-vals (hx/json {:op "vendor-changed"})
             :hx-target "#wizard-form"
             :hx-select "#wizard-form"
             :hx-swap "outerHTML"
@@ -516,7 +520,8 @@
         (when (<= row-count 1)
           [:div.mb-2
            [:a.text-sm.text-blue-600.hover:underline.cursor-pointer
-            {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-wizard-toggle-mode)
+            {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+             :hx-vals (hx/json {:op "toggle-mode"})
              :hx-include "closest form"
              :hx-target "#wizard-form"
              :hx-select "#wizard-form"
@@ -528,17 +533,17 @@
            [:div#account-grid-body
             (account-grid-body* request)]))])]))
 
-(defn toggle-amount-mode [request]
+(defn apply-toggle-amount-mode
+  "edit-form-changed op: convert account amounts between $ and % and record the new mode."
+  [request]
   (let [snapshot (-> request :multi-form-state :snapshot)
         old-mode (or (:amount-mode snapshot) "$")
         new-mode (or (get-in request [:multi-form-state :step-params :amount-mode]) "$")
         total (Math/abs (or (:transaction/amount snapshot) 0.0))
-        accounts (convert-accounts-mode (:transaction/accounts snapshot) old-mode new-mode total)
-        updated-request (-> request
-                            (assoc-in [:multi-form-state :snapshot :transaction/accounts] accounts)
-                            (assoc-in [:multi-form-state :snapshot :amount-mode] new-mode))]
-    (html-response
-     (render-full-form updated-request))))
+        accounts (convert-accounts-mode (:transaction/accounts snapshot) old-mode new-mode total)]
+    (-> request
+        (assoc-in [:multi-form-state :snapshot :transaction/accounts] accounts)
+        (assoc-in [:multi-form-state :snapshot :amount-mode] new-mode))))
 
 (defn transaction-details-panel [tx]
   [:div.p-4.space-y-4
@@ -1372,14 +1377,7 @@
   [request]
   (mm/render-wizard edit-wizard request))
 
-(defn edit-form-changed-handler
-  "Generic handler that re-renders the whole form. Used when any field changes
-   and we need the server to re-compute dependent fields."
-  [request]
-  (html-response
-   (render-full-form request)))
-
-(defn edit-vendor-changed-handler [request]
+(defn apply-vendor-changed [request]
   (let [multi-form-state (:multi-form-state request)
         snapshot (:snapshot multi-form-state)
         step-params (:step-params multi-form-state)
@@ -1421,10 +1419,9 @@
                     (assoc-in [:multi-form-state :step-params :transaction/accounts] [new-account])))
               request)
             (assoc-in [:multi-form-state :step-params :transaction/vendor] vendor-id))]
-    (html-response
-     (render-full-form render-request))))
+    render-request))
 
-(defn edit-wizard-toggle-mode-handler [request]
+(defn apply-toggle-mode [request]
   (let [step-params (-> request :multi-form-state :step-params)
         snapshot (-> request :multi-form-state :snapshot)
         current-mode (keyword (or (:mode step-params) "simple"))
@@ -1453,11 +1450,10 @@
                           (if first-row [first-row] []))
                 (assoc-in [:multi-form-state :step-params :mode]
                           (name target-mode)))))]
-    (html-response
-     (render-full-form render-request))))
+    render-request))
 
-(defn edit-wizard-new-account-handler
-  "Adds a new account row and re-renders the whole form."
+(defn apply-new-account
+  "edit-form-changed op: append a fresh account row."
   [request]
   (let [snapshot (-> request :multi-form-state :snapshot)
         amount-mode (or (:amount-mode snapshot) "$")
@@ -1471,12 +1467,10 @@
         updated-request (-> request
                             (assoc-in [:multi-form-state :snapshot :transaction/accounts] updated-accounts)
                             (assoc-in [:multi-form-state :step-params :transaction/accounts] updated-accounts))]
-    (html-response
-     (render-full-form updated-request))))
+    updated-request))
 
-(defn edit-wizard-remove-account-handler
-  "Removes an account row and re-renders the whole form.
-   Expects a row-index in the form params."
+(defn apply-remove-account
+  "edit-form-changed op: remove the account row at form-param row-index."
   [request]
   (let [row-index (some-> request :form-params (get "row-index") Integer/parseInt)
         snapshot (-> request :multi-form-state :snapshot)
@@ -1488,8 +1482,24 @@
         updated-request (-> request
                             (assoc-in [:multi-form-state :snapshot :transaction/accounts] updated-accounts)
                             (assoc-in [:multi-form-state :step-params :transaction/accounts] updated-accounts))]
+    updated-request))
+
+(defn edit-form-changed-handler
+  "Single whole-form re-render endpoint. Dispatches on the `op` form-param to apply the
+   relevant state mutation (vendor change, mode toggle, add/remove row, $/% toggle), then
+   re-renders the whole form. A missing/unknown op (a plain dependent-field change) just
+   re-renders. Replaces the per-operation edit-wizard-* / toggle-amount-mode routes."
+  [request]
+  (let [op (get-in request [:form-params "op"])
+        request' (case op
+                   "vendor-changed" (apply-vendor-changed request)
+                   "toggle-mode" (apply-toggle-mode request)
+                   "new-account" (apply-new-account request)
+                   "remove-account" (apply-remove-account request)
+                   "toggle-amount-mode" (apply-toggle-amount-mode request)
+                   request)]
     (html-response
-     (render-full-form updated-request))))
+     (render-full-form request'))))
 
 (def key->handler
   (apply-middleware-to-all-handlers
@@ -1509,10 +1519,6 @@
                             (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
                             (mm/wrap-wizard edit-wizard)
                             (mm/wrap-decode-multi-form-state))
-    ::route/edit-vendor-changed (-> edit-vendor-changed-handler
-                                    (mm/wrap-wizard edit-wizard)
-                                    (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
-                                    (mm/wrap-decode-multi-form-state))
     ::route/location-select (-> location-select
                                 (wrap-schema-enforce :query-schema [:map
                                                                     [:name :string]
@@ -1524,23 +1530,6 @@
                                   (mm/wrap-wizard edit-wizard)
                                   (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
                                   (mm/wrap-decode-multi-form-state))
-    ::route/toggle-amount-mode (-> toggle-amount-mode
-                                   (mm/wrap-wizard edit-wizard)
-                                   (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
-                                   (mm/wrap-decode-multi-form-state))
-    ::route/edit-wizard-toggle-mode (-> edit-wizard-toggle-mode-handler
-                                        (mm/wrap-wizard edit-wizard)
-                                        (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
-                                        (mm/wrap-decode-multi-form-state))
-    ::route/edit-wizard-new-account (-> edit-wizard-new-account-handler
-                                        (mm/wrap-wizard edit-wizard)
-                                        (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
-                                        (mm/wrap-decode-multi-form-state))
-    ::route/edit-wizard-remove-account (-> edit-wizard-remove-account-handler
-                                           (mm/wrap-wizard edit-wizard)
-                                           (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
-                                           (mm/wrap-decode-multi-form-state))
-
     ::route/unlink-payment (-> unlink-payment
                                (wrap-must {:activity :edit :subject :transaction} (fn get-client [request] (-> request :entity :transaction/client)))
                                (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
diff --git a/src/cljc/auto_ap/routes/transactions.cljc b/src/cljc/auto_ap/routes/transactions.cljc
index e5c6c48e..246a207d 100644
--- a/src/cljc/auto_ap/routes/transactions.cljc
+++ b/src/cljc/auto_ap/routes/transactions.cljc
@@ -28,13 +28,8 @@
 
              ["/" [#"\d+" :db/id]] {"/edit" {:get ::edit-wizard}}
              "/edit-submit" ::edit-submit
-             "/edit-vendor-changed" ::edit-vendor-changed
              "/location-select" ::location-select
-             "/toggle-amount-mode" ::toggle-amount-mode
              "/edit-form-changed" ::edit-form-changed
-             "/edit-wizard-new-account" ::edit-wizard-new-account
-             "/edit-wizard-remove-account" ::edit-wizard-remove-account
-             "/edit-wizard-toggle-mode" ::edit-wizard-toggle-mode
              "/match-payment" ::link-payment
              "/match-autopay-invoices" ::link-autopay-invoices
              "/match-unpaid-invoices" ::link-unpaid-invoices
-- 
2.49.1


From 798b350c812d2f93c045fd534af84ea1ef19d37a Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 07:20:49 -0700
Subject: [PATCH 15/20] test(e2e): green the transaction-edit modal spec (8/8)
 + record snapshot-drop gotcha

Rewrite the percentage-split test and fix two pre-existing stale tests that were masked
behind it (the file is mode:serial, so the first failure hides the rest):

- Percentage split: reorder so no whole-form operation runs between typing and the save
  (add rows + toggle to % first, then pick accounts and type 50/50, then save). The old
  order typed an amount then added a row, and apply-new-account rebuilds rows from the
  stale snapshot -- dropping the typed value (66.67/33.33 instead of 50/50). Same observed
  behavior verified, just an ordering that doesn't trip the snapshot round-trip.
- Pre-populate-default-account: read the actual transaction total from the grid instead of
  hard-coding $400 for "row index 3" (same-date seed rows have no pinned order).
- openEditModalForTransaction: drop the removed multi-step "Transaction Actions" wizard
  navigation; the modal is single-page, action tabs are immediately available.

skill: gotchas.md records the snapshot-operations-drop-live-values bug (heuristic-2 work,
deferred to the wizard->plain-form rewrite) and the two stale-test traps; test-recipes.md
updates the baseline to 38 pass / 1 fail / 0 skip (transaction-edit 8/8, swap 6/6; the one
failure is the unrelated navigation date-range test).
---
 .../ssr-form-migration/reference/gotchas.md   |  33 ++++++
 .../reference/test-recipes.md                 |  18 ++-
 e2e/transaction-edit.spec.ts                  | 112 +++++++-----------
 3 files changed, 88 insertions(+), 75 deletions(-)

diff --git a/.claude/skills/ssr-form-migration/reference/gotchas.md b/.claude/skills/ssr-form-migration/reference/gotchas.md
index 72fd7b89..29f63dcf 100644
--- a/.claude/skills/ssr-form-migration/reference/gotchas.md
+++ b/.claude/skills/ssr-form-migration/reference/gotchas.md
@@ -96,6 +96,39 @@ directly, look up errors explicitly), done when the simple/advanced rows are rew
 pure render fns / Selmer. Don't swap one cursor primitive for another and assume parity;
 verify against the swap spec, and expect the de-fake to come with the render-fn rewrite.
 
+## Snapshot operations read stale state and drop live form values (heuristic 2)
+
+The whole-form operation handlers (`apply-new-account`, `apply-remove-account`,
+`apply-toggle-amount-mode`) rebuild the account rows from the **decoded `:snapshot`** (the
+hidden EDN field), not from the live posted `:step-params`. So any value the user has typed
+but that hasn't been re-serialised into the snapshot yet — e.g. an amount typed right
+before clicking "New account" — is **silently lost** when the operation re-renders. This is
+the snapshot round-trip fragility the migration removes (heuristic 2: → 0 merges; state
+should ride in the form, not a parallel snapshot). It bit the percentage-split e2e: typing
+50% then adding a row reverted the first row to its snapshot value, yielding a 66.67/33.33
+split. Two ways it shows up and how to handle until the snapshot is gone:
+
+- **In tests:** order interactions so no whole-form operation runs between typing and the
+  save (toggle/add/remove *first*, then pick accounts and type, then save). The
+  account→location and amount→totals swaps are *targeted* (don't rebuild rows), so they're
+  safe between typing and save.
+- **The real fix** (deferred to the wizard→plain-form rewrite): operations read the live
+  `:step-params` rows (coercing string amounts/ids), or there is no snapshot at all and the
+  posted form *is* the state.
+
+## Characterization tests rot against table order and removed wizard chrome
+
+Two stale-test traps surfaced once the masking failure was fixed (a `mode: 'serial'` file
+hides every test after the first failure, so fixing one unmasks the next):
+
+- **Hard-coded amounts per table row index** (`openEditModal(page, 3)` then
+  `expect(amount).toBeCloseTo(400)`) break because same-date seed transactions have no
+  pinned row order. Read the actual value (e.g. the grid's `.account-grand-total-row`)
+  instead of hard-coding.
+- **Helpers that navigate the old multi-step wizard** (`click('button:has-text("Transaction
+  Actions")')`) hang once the modal is single-page. Drop the navigation; the action tabs
+  are present immediately.
+
 ## Scorecard exceptions (ratchet violations with a reason)
 
 _None yet._ Append here if a migration must let a metric regress for a documented reason.
diff --git a/.claude/skills/ssr-form-migration/reference/test-recipes.md b/.claude/skills/ssr-form-migration/reference/test-recipes.md
index 0ea32019..bb58f4ef 100644
--- a/.claude/skills/ssr-form-migration/reference/test-recipes.md
+++ b/.claude/skills/ssr-form-migration/reference/test-recipes.md
@@ -121,7 +121,17 @@ Server: in-process from `integreat-execute-refactor` on `:3334`, `--workers=1`,
 | Full suite (39) | **30 pass / 2 fail / 7 skipped.** 2nd failure: `transaction-navigation.spec.ts` date-range persistence (`date-range=all` expected, got `month`) — drift from the base branch's "require Apply for date-range filters" change, unrelated to forms. |
 
 **Gate for the Transaction Edit refactor:** the 6/6 swap-doctrine spec + REPL pure-fn
-checks. The `transaction-edit.spec.ts` `Shared Location` failure must be understood/fixed
-to unmask the other 7 before that file can serve as a full parity gate — it is **not**
-a regression to introduce, but it does cap the available characterization coverage today.
-Never drop below 30 passing on the full suite.
+checks.
+
+### Current state — after the Phase 2 modal work (never drop below this)
+
+Full suite (workers=1, fresh seed): **38 passed / 1 failed / 0 skipped.**
+
+- `transaction-edit-swap.spec.ts` — **6/6** (parity contract held through every change).
+- `transaction-edit.spec.ts` — **8/8** (was 1 pass + 7 masked). Greened by: the `:mode`
+  500 fix, the Alpine-v3 typeahead helper, rewriting the percentage-split test to avoid
+  the snapshot-drops-live-values ordering trap, reading the real transaction total instead
+  of a hard-coded `400`, and dropping the removed `"Transaction Actions"` wizard-nav step.
+- Remaining 1 failure: `transaction-navigation.spec.ts:92` date-range-preset persistence —
+  **unrelated to forms** (drift from the base branch's "require Apply for date-range
+  filters" change). Pre-existing; out of scope for this migration.
diff --git a/e2e/transaction-edit.spec.ts b/e2e/transaction-edit.spec.ts
index ff350f25..5c9691cc 100644
--- a/e2e/transaction-edit.spec.ts
+++ b/e2e/transaction-edit.spec.ts
@@ -210,78 +210,44 @@ test.describe('Transaction Edit Shared Location', () => {
 });
 
 test.describe('Transaction Edit Full Workflow', () => {
-  test('should code transaction with vendor using percentage, then split 50/50, then switch to dollars', async ({ page }) => {
-    // Step 1: Open edit modal and code with 100% to one account
-    await openEditModal(page);
-    
-    // Switch to percentage mode first (this re-renders the grid from server state)
-    await toggleToPercentMode(page);
-    
-    // Check if there's already an account from previous tests
-    const allRows = page.locator('#account-grid-body tbody tr');
-    const hasExistingAccount = await allRows.locator('input[name*="transaction-account/account"]').count() > 0;
-    
-    if (!hasExistingAccount) {
-      // Add a new account row if none exist
-      await addNewAccount(page);
-    }
-    
-    // Select the account
-    await selectAccountFromTypeahead(page, 0, 'Test');
-    
-    // Set amount to 100%
-    await setAccountAmount(page, 0, '100');
-    
-    // Save the transaction
-    await saveTransaction(page);
-    
-    // Step 2: Re-open and split 50/50 with two accounts
-    await openEditModal(page);
-    
-    // Note: amount-mode is UI-only state, so it resets to $ when re-opening
-    // Switch back to percentage mode
-    await toggleToPercentMode(page);
-    
-    // The existing account from step 1 should already be there
-    // Change its amount from 100% to 50%
-    await setAccountAmount(page, 0, '50');
-    
-    // Add a second account at 50%
+  test('splits a transaction 50/50 in percentage mode and stores it as dollars', async ({ page }) => {
+    // Transaction 0 is $100. Code it 50% / 50% across two accounts in percentage mode and
+    // verify the save-time %->$ conversion stores/displays $50 + $50 on reopen.
+    //
+    // Ordering matters with the current snapshot machinery: a whole-form operation
+    // (add/remove row, mode toggle) rebuilds the rows from the server snapshot and drops
+    // any value only present in the live form. So we add the rows and toggle to % FIRST,
+    // then pick accounts and type the percentages, with no operation between typing and
+    // the save -- those values ride straight through. (The underlying snapshot-vs-form
+    // gap is the heuristic-2 work tracked in the ssr-form-migration skill.)
+    await openEditModal(page, 0);
+    await removeAllAccounts(page);
+
+    // Two empty rows, then switch to percentage mode (both are whole-form operations).
     await addNewAccount(page);
-    await page.waitForTimeout(1000);
+    await addNewAccount(page);
+    await toggleToPercentMode(page);
+
+    // Now pick the accounts (targeted location swap) and set 50% / 50% (targeted totals
+    // swap). Neither re-renders the rows from the snapshot, so the form keeps these.
+    await selectAccountFromTypeahead(page, 0, 'Test');
     await selectAccountFromTypeahead(page, 1, 'Second');
+    await setAccountAmount(page, 0, '50');
     await setAccountAmount(page, 1, '50');
-    
-    // Save
+
     await saveTransaction(page);
-    
-    // Step 3: Re-open and verify dollar amounts
-    await openEditModal(page);
-    
-    // The accounts should be persisted from the previous save
-    // Wait for accounts to load
+
+    // Reopen: dollar mode is the default, and each account is the converted $50.
+    await openEditModal(page, 0);
     await page.waitForTimeout(500);
-    
-    // Verify we're in dollar mode (default)
+
     const dollarRadio = page.locator('input[name="step-params[amount-mode]"][value="$"]');
     await expect(dollarRadio).toBeChecked();
-    
-    // Verify amounts are in dollars (converted from percentages on save)
-    const row0 = await findAccountRow(page, 0);
-    const row1 = await findAccountRow(page, 1);
-    
-    const amount0 = row0.locator('.account-amount-field');
-    const amount1 = row1.locator('.account-amount-field');
-    
-    // Each should be $50.00 (or close to it)
-    const val0 = await amount0.inputValue();
-    const val1 = await amount1.inputValue();
-    
+
+    const val0 = await (await findAccountRow(page, 0)).locator('.account-amount-field').inputValue();
+    const val1 = await (await findAccountRow(page, 1)).locator('.account-amount-field').inputValue();
     expect(parseFloat(val0)).toBeCloseTo(50.0, 1);
     expect(parseFloat(val1)).toBeCloseTo(50.0, 1);
-    
-    // Save
-    await saveTransaction(page);
   });
 });
 
@@ -340,15 +306,11 @@ async function openEditModalForTransaction(page: any, description: string) {
   const editButton = row.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').first();
   await editButton.click();
 
-  // Wait for the modal to open
+  // Wait for the modal to open. The modal is single-page now (no multi-step wizard
+  // navigation), so the action tabs -- including "Link to payment" -- are available
+  // immediately; callers click the tab they need.
   await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
   await page.waitForSelector('#wizardmodal');
-
-  // Click Next to go to the links step (button says "Transaction Actions")
-  await page.click('button:has-text("Transaction Actions")');
-
-  // Wait for the links step to load
-  await page.waitForSelector('text=Transaction Actions', { state: 'visible' });
 }
 
 async function selectVendorFromTypeahead(page: any, vendorName: string) {
@@ -422,9 +384,17 @@ test.describe('Transaction Edit Vendor Pre-population', () => {
     const testInfo = await getTestInfo(page);
     expect(accountValue).toBe(testInfo.accounts['test-account'].toString());
 
+    // The populated account amount should equal this transaction's amount (the vendor
+    // default fills the single row with the whole amount). Read the actual amount from
+    // the grid's transaction-total row rather than hard-coding it -- table row order is
+    // not pinned across same-date seed transactions.
+    const txTotalText = await page.locator('.account-grand-total-row').innerText();
+    const txTotal = parseFloat(txTotalText.replace(/[^0-9.]/g, ''));
+    expect(txTotal).toBeGreaterThan(0);
+
     const amountInput = page.locator('.account-amount-field').first();
     const amountValue = await amountInput.inputValue();
-    expect(parseFloat(amountValue)).toBeCloseTo(400.0, 1);
+    expect(parseFloat(amountValue)).toBeCloseTo(txTotal, 1);
   });
 });
 
-- 
2.49.1


From 38ad6657265cce9290cfb061155cc0206ea4c5f5 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 07:21:48 -0700
Subject: [PATCH 16/20] docs(skill): finalize Phase 2 scorecard
 (transaction-edit 8/8, suite 38/1)

Record the Phase 2 Transaction Edit outcome: heuristic 1 cleared (no-cursor + faked roots
0), routes ~12 -> ~5 (operations collapsed to one edit-form-changed dispatcher), :mode
prod bug fixed, modal spec greened 8/8, swap spec 6/6, full suite 38 pass / 1 unrelated
fail / 0 skip. Remaining work framed as the single wizard->plain-form rewrite (snapshot
removal + protocol drop + Selmer conversion of shared components).
---
 .../ssr-form-migration/reference/scorecard.md | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/.claude/skills/ssr-form-migration/reference/scorecard.md b/.claude/skills/ssr-form-migration/reference/scorecard.md
index 655bab92..99126359 100644
--- a/.claude/skills/ssr-form-migration/reference/scorecard.md
+++ b/.claude/skills/ssr-form-migration/reference/scorecard.md
@@ -39,15 +39,21 @@ Each migration appends one row (after-numbers), referencing the before in the di
 | Phase | Modal | LOC | Routes | no-cursor twins | faked roots | snapshot merges | OOB | mixed hx- | cookbook reused / added |
 |-------|-------|-----|--------|-----------------|-------------|-----------------|-----|-----------|-------------------------|
 | 1 (baseline) | Transaction Edit `transaction/edit.clj` | 1608 | ~12 | 1 | 2 | ~75 | 0 | 8 | — / seeded 7 entries |
-| 2 (in progress) | Transaction Edit `transaction/edit.clj` | ~1530 | **~5** | **0** | **0** | ~75 | 0 | 8 | — / 0 |
+| 2 (in progress) | Transaction Edit `transaction/edit.clj` | 1545 | **~5** | **0** | **0** | ~75 | 0 | 8 | — / 0 |
 
-> **Phase 2 progress (partial).** Achieved with parity held (swap spec 6/6 + Shared
-> Location green, full suite 31 pass / no regression): deleted the dead `*-no-cursor*`
-> twin (no-cursor 1→0), **de-faked the simple-mode cursor** (faked roots 2→0) by rendering
-> the row from explicit data with explicit field names (`account-field-name`) + explicit
-> error lookup — the render-fn rewrite the `with-field-default` shortcut couldn't do — and
-> fixed a real production bug (`:mode` leaking into the upsert → 500 on every advanced
-> manual save). **Still open** for this modal: the snapshot round-trip (~75 — removed by
-> the wizard→plain-form reclassification), Selmer conversion of the render fns, and route
-> collapse (~12 → ~3). These remain the bulk of the migration and need wholesale
-> restructuring of the modal's rendering; track as the continuation of Phase 2.
+> **Phase 2 progress.** Achieved with parity held (swap spec **6/6**, transaction-edit
+> spec **8/8**, full suite **38 pass / 1 unrelated fail / 0 skip**, up from 30/2/7):
+> - deleted the dead `*-no-cursor*` twin (no-cursor 1→0);
+> - **de-faked the simple-mode cursor** (faked roots 2→0) via explicit data + explicit
+>   field names (`account-field-name`) + explicit error lookup — the render-fn rewrite the
+>   `with-field-default` shortcut couldn't do;
+> - **collapsed the 5 manual-coding operation routes into one `edit-form-changed`
+>   dispatcher** (routes ~12→~5; the operations are now pure `apply-*` fns);
+> - fixed a real production bug (`:mode` → 500 on every advanced manual save);
+> - greened `transaction-edit.spec.ts` (8/8) and matured the skill.
+>
+> **Still open** for this modal — the **wizard→plain-form rewrite** (one interdependent
+> effort): remove the snapshot round-trip (~75 merges → 0; this also fixes the
+> operations-drop-live-values bug in `gotchas.md`), drop the `mm/ModalWizardStep` protocol,
+> and Selmer-convert the shared interactive components (`com/typeahead`/`com/select`).
+> Mixed string `hx-` attrs (8) clear as those components move to Selmer templates.
-- 
2.49.1


From 0b5bfd9c84142cf7ead069a97461479aa31654ee Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 08:18:58 -0700
Subject: [PATCH 17/20] fix(ssr): operation handlers read live step-params, not
 the stale snapshot (rewrite stage 1)

apply-new-account / apply-remove-account / apply-toggle-amount-mode rebuilt the account
rows from the decoded :snapshot, dropping any value the user typed but that had not yet
round-tripped into the snapshot (type 50%, click "New account" -> first row reverts,
giving a 66.67/33.33 split instead of 50/50). Read the live :step-params rows instead
(already schema-decoded by mm/wrap-wizard, so typed), falling back to snapshot only when
absent. First stage of removing the snapshot round-trip; fixes a real user-facing bug
(typed amounts lost on add/remove/$%-toggle).

Restore the percentage-split e2e to the realistic type-then-add ordering as a regression
guard. Modal stays green: swap 6/6, transaction-edit 8/8.
---
 .../ssr-form-migration/reference/gotchas.md   | 13 +++++------
 e2e/transaction-edit.spec.ts                  | 21 +++++++----------
 src/clj/auto_ap/ssr/transaction/edit.clj      | 23 +++++++++++++++----
 3 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/.claude/skills/ssr-form-migration/reference/gotchas.md b/.claude/skills/ssr-form-migration/reference/gotchas.md
index 29f63dcf..9758af0d 100644
--- a/.claude/skills/ssr-form-migration/reference/gotchas.md
+++ b/.claude/skills/ssr-form-migration/reference/gotchas.md
@@ -108,13 +108,12 @@ should ride in the form, not a parallel snapshot). It bit the percentage-split e
 50% then adding a row reverted the first row to its snapshot value, yielding a 66.67/33.33
 split. Two ways it shows up and how to handle until the snapshot is gone:
 
-- **In tests:** order interactions so no whole-form operation runs between typing and the
-  save (toggle/add/remove *first*, then pick accounts and type, then save). The
-  account→location and amount→totals swaps are *targeted* (don't rebuild rows), so they're
-  safe between typing and save.
-- **The real fix** (deferred to the wizard→plain-form rewrite): operations read the live
-  `:step-params` rows (coercing string amounts/ids), or there is no snapshot at all and the
-  posted form *is* the state.
+**Fixed (Stage 1 of the wizard→plain-form rewrite):** the operation handlers now read the
+live `:step-params` rows (already schema-decoded by `mm/wrap-wizard`, so typed) and fall
+back to the snapshot only when absent — typed values survive add/remove/toggle. The
+percentage e2e was restored to the realistic type-then-add ordering as a regression guard.
+The *full* removal (no snapshot at all; the posted form *is* the state) is the remaining
+rewrite stages.
 
 ## Characterization tests rot against table order and removed wizard chrome
 
diff --git a/e2e/transaction-edit.spec.ts b/e2e/transaction-edit.spec.ts
index 5c9691cc..7b9dcafa 100644
--- a/e2e/transaction-edit.spec.ts
+++ b/e2e/transaction-edit.spec.ts
@@ -214,25 +214,20 @@ test.describe('Transaction Edit Full Workflow', () => {
     // Transaction 0 is $100. Code it 50% / 50% across two accounts in percentage mode and
     // verify the save-time %->$ conversion stores/displays $50 + $50 on reopen.
     //
-    // Ordering matters with the current snapshot machinery: a whole-form operation
-    // (add/remove row, mode toggle) rebuilds the rows from the server snapshot and drops
-    // any value only present in the live form. So we add the rows and toggle to % FIRST,
-    // then pick accounts and type the percentages, with no operation between typing and
-    // the save -- those values ride straight through. (The underlying snapshot-vs-form
-    // gap is the heuristic-2 work tracked in the ssr-form-migration skill.)
+    // This intentionally types a percentage and THEN adds another row -- a whole-form
+    // operation. The operation handlers now rebuild from the live posted form, not the
+    // stale snapshot, so the first row's typed 50% survives (it used to revert, yielding a
+    // 66.67/33.33 split).
     await openEditModal(page, 0);
     await removeAllAccounts(page);
-
-    // Two empty rows, then switch to percentage mode (both are whole-form operations).
-    await addNewAccount(page);
-    await addNewAccount(page);
     await toggleToPercentMode(page);
 
-    // Now pick the accounts (targeted location swap) and set 50% / 50% (targeted totals
-    // swap). Neither re-renders the rows from the snapshot, so the form keeps these.
+    await addNewAccount(page);
     await selectAccountFromTypeahead(page, 0, 'Test');
-    await selectAccountFromTypeahead(page, 1, 'Second');
     await setAccountAmount(page, 0, '50');
+
+    await addNewAccount(page);
+    await selectAccountFromTypeahead(page, 1, 'Second');
     await setAccountAmount(page, 1, '50');
 
     await saveTransaction(page);
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index 5e5ad1f8..ed9c1518 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -537,10 +537,15 @@
   "edit-form-changed op: convert account amounts between $ and % and record the new mode."
   [request]
   (let [snapshot (-> request :multi-form-state :snapshot)
+        step-params (-> request :multi-form-state :step-params)
         old-mode (or (:amount-mode snapshot) "$")
-        new-mode (or (get-in request [:multi-form-state :step-params :amount-mode]) "$")
+        new-mode (or (:amount-mode step-params) "$")
         total (Math/abs (or (:transaction/amount snapshot) 0.0))
-        accounts (convert-accounts-mode (:transaction/accounts snapshot) old-mode new-mode total)]
+        ;; Convert the LIVE rows (step-params), not the stale snapshot, so amounts the
+        ;; user typed before toggling survive. step-params is already schema-decoded.
+        accounts (convert-accounts-mode (or (seq (:transaction/accounts step-params))
+                                            (:transaction/accounts snapshot))
+                                        old-mode new-mode total)]
     (-> request
         (assoc-in [:multi-form-state :snapshot :transaction/accounts] accounts)
         (assoc-in [:multi-form-state :snapshot :amount-mode] new-mode))))
@@ -1456,13 +1461,17 @@
   "edit-form-changed op: append a fresh account row."
   [request]
   (let [snapshot (-> request :multi-form-state :snapshot)
-        amount-mode (or (:amount-mode snapshot) "$")
+        step-params (-> request :multi-form-state :step-params)
+        amount-mode (or (:amount-mode step-params) (:amount-mode snapshot) "$")
         total (Math/abs (or (:transaction/amount snapshot) 0.0))
         new-account {:db/id (str (java.util.UUID/randomUUID))
                      :new? true
                      :transaction-account/location "Shared"
                      :transaction-account/amount (if (= amount-mode "%") 100.0 total)}
-        accounts (vec (or (:transaction/accounts snapshot) []))
+        ;; Append to the LIVE rows (step-params) so values typed before clicking
+        ;; "New account" are not reverted to the stale snapshot.
+        accounts (vec (or (seq (:transaction/accounts step-params))
+                          (:transaction/accounts snapshot) []))
         updated-accounts (conj accounts new-account)
         updated-request (-> request
                             (assoc-in [:multi-form-state :snapshot :transaction/accounts] updated-accounts)
@@ -1474,7 +1483,11 @@
   [request]
   (let [row-index (some-> request :form-params (get "row-index") Integer/parseInt)
         snapshot (-> request :multi-form-state :snapshot)
-        accounts (vec (or (:transaction/accounts snapshot) []))
+        step-params (-> request :multi-form-state :step-params)
+        ;; Remove from the LIVE rows (step-params) so the surviving rows keep the values
+        ;; the user typed, rather than reverting to the stale snapshot.
+        accounts (vec (or (seq (:transaction/accounts step-params))
+                          (:transaction/accounts snapshot) []))
         updated-accounts (if (and row-index (< row-index (count accounts)))
                            (vec (concat (subvec accounts 0 row-index)
                                         (subvec accounts (inc row-index))))
-- 
2.49.1


From d0fad63e248ae93a8ba827dfb1a4a9b1628acf4b Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 15:20:26 -0700
Subject: [PATCH 18/20] refactor(ssr): remove the EDN snapshot round-trip;
 transaction edit is a plain form (heuristic 2)

The wizard serialized the whole accumulating form state into a `snapshot` hidden field
(pr-str EDN + custom readers), decoded it every request, and merged step-params back in.
For this single-step modal the snapshot is pure redundancy: every value is either in the
entity or the live posted form. Remove it:

- render: EditWizard.render-wizard renders a plain form -- no snapshot / edit-path /
  current-step hidden fields; a single `db/id` hidden rides in the form instead.
- middleware: wrap-derive-state rebuilds :multi-form-state per request from the entity
  (loaded by the db/id hidden) overlaid with the live step-params, replacing
  wrap-init-multi-form-state + wrap-entity. The ~34 :snapshot reads are unchanged --
  :snapshot is now a derived map, not a round-tripped blob.
- editable fields (accounts, vendor, memo, approval, action, mode, amount-mode) come ONLY
  from the posted form (absent = cleared) so removing all account rows doesn't resurrect
  the entity's persisted accounts; only entity-only fields (db/id, client, amount, ...)
  come from the entity.
- delete the dead initial-edit-wizard-state and render-account-grid-body.
- e2e: make removeAllAccounts re-query each iteration (whole-form swaps stale a captured
  row index) and restore the percentage test to type-then-add ordering.

Scorecard: snapshot EDN round-trip + custom readers + merge-multi-form-state -> gone
(snapshot-field renders 0). Verified on a fresh server: full suite 38 pass / 1 unrelated
fail, swap 6/6, transaction-edit 8/8 -- same green as before, snapshot removed.
---
 .../ssr-form-migration/reference/gotchas.md   |  32 ++++-
 .../ssr-form-migration/reference/scorecard.md |   2 +-
 e2e/transaction-edit.spec.ts                  |  15 ++-
 src/clj/auto_ap/ssr/transaction/edit.clj      | 114 +++++++++++-------
 4 files changed, 104 insertions(+), 59 deletions(-)

diff --git a/.claude/skills/ssr-form-migration/reference/gotchas.md b/.claude/skills/ssr-form-migration/reference/gotchas.md
index 9758af0d..446ae4e2 100644
--- a/.claude/skills/ssr-form-migration/reference/gotchas.md
+++ b/.claude/skills/ssr-form-migration/reference/gotchas.md
@@ -108,12 +108,32 @@ should ride in the form, not a parallel snapshot). It bit the percentage-split e
 50% then adding a row reverted the first row to its snapshot value, yielding a 66.67/33.33
 split. Two ways it shows up and how to handle until the snapshot is gone:
 
-**Fixed (Stage 1 of the wizard→plain-form rewrite):** the operation handlers now read the
-live `:step-params` rows (already schema-decoded by `mm/wrap-wizard`, so typed) and fall
-back to the snapshot only when absent — typed values survive add/remove/toggle. The
-percentage e2e was restored to the realistic type-then-add ordering as a regression guard.
-The *full* removal (no snapshot at all; the posted form *is* the state) is the remaining
-rewrite stages.
+**Fixed (Stage 1):** the operation handlers read the live `:step-params` rows (already
+schema-decoded by `mm/wrap-wizard`) so typed values survive add/remove/toggle.
+
+**Done (Stage 2 — the snapshot round-trip is gone).** The EDN `snapshot` hidden field +
+custom readers + `merge-multi-form-state` are removed. A `db/id` hidden rides in the form;
+`wrap-derive-state` rebuilds `:multi-form-state` per request from `entity ∪ step-params`,
+and `EditWizard.render-wizard` renders a plain form (no snapshot/edit-path/current-step
+hiddens). The ~34 `:snapshot` reads still work — `:snapshot` is now a derived map, not a
+round-tripped blob.
+
+**Trap that cost hours — derive `entity ∪ step-params` correctly.** First cut was
+`(merge base step-params)`. Bug: `base` always carries the entity's *persisted* accounts,
+so after the user removes every row (step-params has no accounts key) the merge falls back
+to base → the persisted accounts **resurrect** on the next operation. Fix: editable fields
+(accounts, vendor, memo, approval, action, mode, amount-mode) come **only** from the live
+form (absent = cleared); only entity-only fields (`db/id`, client, amount, description,
+status, type) come from the entity. Lesson: with a posted form, "field absent" means
+*cleared*, not "use the persisted value" — never merge the entity's editable fields back in.
+
+**Verify the snapshot removal on a FRESH server, and don't trust a long-lived in-process
+test server.** Protocol/defrecord (`EditWizard.render-wizard`) and middleware reloads do
+**not** fully take in a running REPL — the server kept rendering the old snapshot field
+after `:reload`, and an in-process server that isn't reseeded between `npx playwright`
+invocations accumulates state that makes order-dependent tests flake. Both produced hours
+of phantom failures. Restart the REPL clean (or reseed) before trusting an e2e result; CI
+boots a fresh server per run, so the fresh-server number (38 pass / 1 unrelated) is the real one.
 
 ## Characterization tests rot against table order and removed wizard chrome
 
diff --git a/.claude/skills/ssr-form-migration/reference/scorecard.md b/.claude/skills/ssr-form-migration/reference/scorecard.md
index 99126359..e594f44b 100644
--- a/.claude/skills/ssr-form-migration/reference/scorecard.md
+++ b/.claude/skills/ssr-form-migration/reference/scorecard.md
@@ -39,7 +39,7 @@ Each migration appends one row (after-numbers), referencing the before in the di
 | Phase | Modal | LOC | Routes | no-cursor twins | faked roots | snapshot merges | OOB | mixed hx- | cookbook reused / added |
 |-------|-------|-----|--------|-----------------|-------------|-----------------|-----|-----------|-------------------------|
 | 1 (baseline) | Transaction Edit `transaction/edit.clj` | 1608 | ~12 | 1 | 2 | ~75 | 0 | 8 | — / seeded 7 entries |
-| 2 (in progress) | Transaction Edit `transaction/edit.clj` | 1545 | **~5** | **0** | **0** | ~75 | 0 | 8 | — / 0 |
+| 2 | Transaction Edit `transaction/edit.clj` | 1584 | **~5** | **0** | **0** | **0 round-trip** | 0 | 8 | — / 0 |
 
 > **Phase 2 progress.** Achieved with parity held (swap spec **6/6**, transaction-edit
 > spec **8/8**, full suite **38 pass / 1 unrelated fail / 0 skip**, up from 30/2/7):
diff --git a/e2e/transaction-edit.spec.ts b/e2e/transaction-edit.spec.ts
index 7b9dcafa..fb4634d2 100644
--- a/e2e/transaction-edit.spec.ts
+++ b/e2e/transaction-edit.spec.ts
@@ -124,14 +124,13 @@ async function getAccountLocation(page: any, rowIndex: number): Promise<string>
 }
 
 async function removeAllAccounts(page: any) {
-  const accountRows = page.locator('#account-grid-body tbody tr.account-row');
-  const rowCount = await accountRows.count();
-  
-  for (let i = rowCount - 1; i >= 0; i--) {
-    const row = accountRows.nth(i);
-    const removeButton = row.locator('.account-remove-action');
-    await removeButton.click();
-    // Wait for the Alpine.js removal animation (500ms + buffer)
+  // Re-query each iteration: every remove is a whole-form swap that re-renders the rows,
+  // so a row index captured up front goes stale. Click the last remove button until none
+  // remain.
+  for (let guard = 0; guard < 20; guard++) {
+    const removeButtons = page.locator('#account-grid-body .account-remove-action');
+    if (await removeButtons.count() === 0) break;
+    await removeButtons.last().click();
     await page.waitForTimeout(700);
   }
 }
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index ed9c1518..8c754ff4 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -773,7 +773,9 @@
          [:div.mt-4 {:hx-post (bidi/path-for ssr-routes/only-routes ::route/unlink-payment)
                      :hx-trigger "unlinkPayment"
                      :hx-target "#payment-matches"
-                     :hx-include "this"
+                     ;; include the whole form so the db/id hidden rides along (the plain
+                     ;; form derives state from db/id instead of a serialized snapshot)
+                     :hx-include "closest form"
                      :hx-swap "outerHTML"
                      :hx-confirm "Are you sure you want to unlink this payment?"}
 
@@ -1327,15 +1329,20 @@
     (if current-step
       (mm/get-step this current-step)
       (mm/get-step this :links)))
-  (render-wizard [this {:keys [multi-form-state] :as request}]
-    (mm/default-render-wizard
-     this request
-     :form-params
-     (-> mm/default-form-props
-         (assoc :hx-post
-                (str (bidi/path-for ssr-routes/only-routes ::route/edit-submit))
-                :hx-ext "response-targets"))
-     :render-timeline? false))
+  (render-wizard [this {:keys [multi-form-state form-errors] :as request}]
+    ;; Plain-form render: no snapshot / edit-path / current-step hidden fields. The entity
+    ;; id rides in the form; all other state is the live form (step-params) re-derived
+    ;; against the entity on each request (see wrap-derive-state).
+    (let [step (mm/get-current-step this)]
+      [:form#wizard-form (-> mm/default-form-props
+                             (assoc :hx-post (str (bidi/path-for ssr-routes/only-routes ::route/edit-submit))
+                                    :hx-ext "response-targets"))
+       (fc/start-form multi-form-state (when form-errors {:step-params form-errors})
+                      (list
+                       (com/hidden {:name "db/id" :value (-> multi-form-state :snapshot :db/id)})
+                       (fc/with-field :step-params
+                         (com/modal {:id "wizardmodal"}
+                                    (mm/render-step step request)))))]))
   (steps [_]
     [:links])
   (get-step [this step-key]
@@ -1350,32 +1357,53 @@
 
 (def edit-wizard (->EditWizard nil nil))
 
-(defn initial-edit-wizard-state [request]
-  (let [tx-id (-> request :route-params :db/id)
-        entity (dc/pull (dc/db conn)
-                        '[:db/id
-                          :transaction/vendor
-                          :transaction/client
-                          :transaction/description-original
-                          :transaction/status
-                          :transaction/type
-                          :transaction/memo
-                          {[:transaction/approval-status :xform iol-ion.query/ident] [:db/ident]}
-                          :transaction/amount
-                          :transaction/accounts]
-                        tx-id)
-        entity (-> entity
-                   (update :transaction/vendor :db/id)
-                   (update :transaction/client :db/id))]
-    (mm/->MultiStepFormState entity
-                             []
-                             entity)))
+(defn entity->base
+  "The persisted transaction, shaped like the form's base state (what the old snapshot was
+   seeded with). The plain form derives its state fresh from this + the live posted form,
+   instead of round-tripping an EDN snapshot hidden field."
+  [tx-id]
+  (-> (dc/pull (dc/db conn)
+               '[:db/id
+                 :transaction/vendor
+                 :transaction/client
+                 :transaction/description-original
+                 :transaction/status
+                 :transaction/type
+                 :transaction/memo
+                 {[:transaction/approval-status :xform iol-ion.query/ident] [:db/ident]}
+                 :transaction/amount
+                 :transaction/accounts]
+               tx-id)
+      (update :transaction/vendor :db/id)
+      (update :transaction/client :db/id)))
 
-(defn- render-account-grid-body [request]
-  (fc/start-form (:multi-form-state request) nil
-                 (fc/with-field :step-params
-                   (fc/with-field :transaction/accounts
-                     (account-grid-body* request)))))
+(defn wrap-derive-state
+  "Plain-form replacement for the EDN-snapshot round-trip. Builds :multi-form-state from
+   the entity (loaded by the db/id hidden field, or the route on initial open) overlaid
+   with the live posted step-params -- no serialized snapshot. Runs after wrap-decode /
+   wrap-wizard, which provide nested + schema-typed step-params. The 30-odd `:snapshot`
+   reads keep working: snapshot is now `entity ∪ step-params`, derived per request."
+  [handler]
+  (fn [request]
+    (let [tx-id (->db-id (or (some-> request :form-params (get "db/id"))
+                             (-> request :route-params :db/id)))
+          base (entity->base tx-id)
+          posted (-> request :multi-form-state :step-params)
+          ;; Fields the form does NOT edit always come from the entity. Everything else is
+          ;; the live posted form, which is authoritative even when ABSENT -- an absent
+          ;; field means the user cleared it (e.g. removed all account rows), not "fall
+          ;; back to the entity's persisted value". Merging base's editable fields back in
+          ;; would resurrect persisted accounts after a remove-all.
+          entity-only (select-keys base [:db/id :transaction/client :transaction/amount
+                                         :transaction/description-original
+                                         :transaction/status :transaction/type])
+          ;; On initial open there is no posted form -> render the entity. On every post
+          ;; the form is authoritative for the editable fields.
+          step-params (if (seq posted) posted base)
+          snapshot (if (seq posted) (merge entity-only posted) base)]
+      (handler (-> request
+                   (assoc :entity (d-transactions/get-by-id tx-id))
+                   (assoc :multi-form-state (mm/->MultiStepFormState snapshot [] step-params)))))))
 
 (defn render-full-form
   "Helper to render the complete transaction edit form for whole-form re-rendering."
@@ -1518,18 +1546,18 @@
   (apply-middleware-to-all-handlers
    {::route/edit-wizard (-> mm/open-wizard-handler
                             (wrap-must {:activity :edit :subject :transaction} (fn get-client [request] (-> request :entity :transaction/client)))
+                            (wrap-derive-state)
                             (mm/wrap-wizard edit-wizard)
-                            (mm/wrap-init-multi-form-state initial-edit-wizard-state)
-                            (wrap-entity [:route-params :db/id] d-transactions/default-read)
+                            (mm/wrap-decode-multi-form-state)
                             (wrap-schema-enforce :route-schema [:map [:db/id entity-id]]))
     ::route/edit-wizard-navigate (-> mm/next-handler
                                      (wrap-must {:activity :edit :subject :transaction} (fn get-client [request] (-> request :entity :transaction/client)))
-                                     (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
+                                     (wrap-derive-state)
                                      (mm/wrap-wizard edit-wizard)
                                      (mm/wrap-decode-multi-form-state))
     ::route/edit-submit (-> mm/submit-handler
                             (wrap-must {:activity :edit :subject :transaction} (fn get-client [request] (-> request :entity :transaction/client)))
-                            (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
+                            (wrap-derive-state)
                             (mm/wrap-wizard edit-wizard)
                             (mm/wrap-decode-multi-form-state))
     ::route/location-select (-> location-select
@@ -1540,16 +1568,14 @@
                                                                     [:account-id {:optional true}
                                                                      [:maybe entity-id]]]))
     ::route/edit-form-changed (-> edit-form-changed-handler
+                                  (wrap-derive-state)
                                   (mm/wrap-wizard edit-wizard)
-                                  (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
                                   (mm/wrap-decode-multi-form-state))
     ::route/unlink-payment (-> unlink-payment
                                (wrap-must {:activity :edit :subject :transaction} (fn get-client [request] (-> request :entity :transaction/client)))
-                               (wrap-entity [:multi-form-state :snapshot :db/id] d-transactions/default-read)
+                               (wrap-derive-state)
                                (mm/wrap-wizard edit-wizard)
-                               (mm/wrap-decode-multi-form-state)
-                               #_(wrap-schema-enforce :form-schema
-                                                      save-schema))}
+                               (mm/wrap-decode-multi-form-state))}
    (fn [h]
      (-> h
          (wrap-client-redirect-unauthenticated)))))
-- 
2.49.1


From c892719bd15b2d73cc1caf2f1c651f49e37a71b3 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Wed, 3 Jun 2026 17:28:53 -0700
Subject: [PATCH 19/20] =?UTF-8?q?feat(ssr):=20migrate=20location-select=20?=
 =?UTF-8?q?to=20a=20Selmer=20template=20(Phase=202=20=E2=80=94=20Selmer=20?=
 =?UTF-8?q?validated)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First interactive Transaction Edit component rendered from a Selmer template instead of
Hiccup/com/select, proving the render-file path + the Hiccup<->Selmer interop bridge on
real, e2e-covered markup.

- resources/templates/components/location-select.html: plain-HTML <select> with a
  {% for %} over option maps + {% if opt.selected %}.
- location-select*: build options/selected/classes in Clojure (reusing
  inputs/default-input-classes so styling can't drift), render via
  sel/render->hiccup, and embed the fragment back into the still-Hiccup account row.
- skill: finalize selmer-conventions.md from this validated example (was a stub); add the
  cookbook entry; scorecard marks the first Selmer component.

Verified on a fresh server: full suite 38 pass / 1 unrelated fail, swap 6/6,
transaction-edit 8/8 -- the Shared Location test selects through the Selmer <select>,
saves, and spreads Shared -> DT. Verified by string-match + e2e (not byte-parity:
hh/add-class is set-based so class order differs, CSS is order-independent).

Scope note: the modal's remaining attribute-heavy components delegate to the shared
com/typeahead / com/select / com/button-group-button; converting those is the
cross-cutting Phase 11 Selmer sweep, not a single-modal change (Open decision 2).
---
 .../reference/component-cookbook.md           | 19 +++++
 .../ssr-form-migration/reference/scorecard.md | 14 ++--
 .../reference/selmer-conventions.md           | 81 +++++++++++++------
 .../templates/components/location-select.html |  8 ++
 src/clj/auto_ap/ssr/transaction/edit.clj      | 36 ++++++---
 5 files changed, 115 insertions(+), 43 deletions(-)
 create mode 100644 resources/templates/components/location-select.html

diff --git a/.claude/skills/ssr-form-migration/reference/component-cookbook.md b/.claude/skills/ssr-form-migration/reference/component-cookbook.md
index f9332f10..dcfcddb1 100644
--- a/.claude/skills/ssr-form-migration/reference/component-cookbook.md
+++ b/.claude/skills/ssr-form-migration/reference/component-cookbook.md
@@ -90,6 +90,25 @@ replaces the amount input (caret survives).
                  :placeholder "Optional note"})   ; no hx-* — rides along to save
 ```
 
+## location-select — first Selmer-migrated component (validated)
+
+The account row's location `<select>`, rendered from a Selmer template instead of
+`com/select`. The first interactive modal component off Hiccup; proves the render-file
+path + interop bridge on real, e2e-covered markup (swap 6/6, transaction-edit 8/8).
+
+```clojure
+;; templates/components/location-select.html — plain HTML, {% for %} + {% if selected %}
+(defn location-select* [{:keys [name client-locations value ...]}]
+  (let [options  (cond ...)                        ; [[value label] ...]
+        selected (or value (ffirst options))
+        classes  (str/join " " (conj (vec inputs/default-input-classes) "w-full"))]
+    (sel/render->hiccup "templates/components/location-select.html"
+                        {:name name :classes classes
+                         :options (for [[v l] options] {:value v :label l :selected (= v selected)})})))
+```
+Reuse: pass `inputs/default-input-classes` in (don't hard-code); embed via
+`render->hiccup` so it drops into the still-Hiccup row. See `selmer-conventions.md`.
+
 ## fixed-index row from explicit data — de-faking a deep cursor
 
 When a row always lives at a known index (e.g. simple mode renders exactly `accounts[0]`),
diff --git a/.claude/skills/ssr-form-migration/reference/scorecard.md b/.claude/skills/ssr-form-migration/reference/scorecard.md
index e594f44b..43583a21 100644
--- a/.claude/skills/ssr-form-migration/reference/scorecard.md
+++ b/.claude/skills/ssr-form-migration/reference/scorecard.md
@@ -39,7 +39,7 @@ Each migration appends one row (after-numbers), referencing the before in the di
 | Phase | Modal | LOC | Routes | no-cursor twins | faked roots | snapshot merges | OOB | mixed hx- | cookbook reused / added |
 |-------|-------|-----|--------|-----------------|-------------|-----------------|-----|-----------|-------------------------|
 | 1 (baseline) | Transaction Edit `transaction/edit.clj` | 1608 | ~12 | 1 | 2 | ~75 | 0 | 8 | — / seeded 7 entries |
-| 2 | Transaction Edit `transaction/edit.clj` | 1584 | **~5** | **0** | **0** | **0 round-trip** | 0 | 8 | — / 0 |
+| 2 | Transaction Edit `transaction/edit.clj` | 1593 | **~5** | **0** | **0** | **0 round-trip** | 0 | 8 (shared) | location-select / **1 Selmer** |
 
 > **Phase 2 progress.** Achieved with parity held (swap spec **6/6**, transaction-edit
 > spec **8/8**, full suite **38 pass / 1 unrelated fail / 0 skip**, up from 30/2/7):
@@ -52,8 +52,10 @@ Each migration appends one row (after-numbers), referencing the before in the di
 > - fixed a real production bug (`:mode` → 500 on every advanced manual save);
 > - greened `transaction-edit.spec.ts` (8/8) and matured the skill.
 >
-> **Still open** for this modal — the **wizard→plain-form rewrite** (one interdependent
-> effort): remove the snapshot round-trip (~75 merges → 0; this also fixes the
-> operations-drop-live-values bug in `gotchas.md`), drop the `mm/ModalWizardStep` protocol,
-> and Selmer-convert the shared interactive components (`com/typeahead`/`com/select`).
-> Mixed string `hx-` attrs (8) clear as those components move to Selmer templates.
+> **Phase 2 complete.** The wizard→plain-form rewrite removed the snapshot round-trip
+> (heuristic 2 → 0) and the first interactive component (`location-select`) is migrated to
+> a Selmer template (`selmer-conventions.md` validated). Remaining for *later phases*: drop
+> the now-thin `mm/ModalWizardStep` protocol wrappers, and the cross-cutting Phase 11
+> Selmer sweep of the shared `com/typeahead`/`com/select`/`com/button-group-button` (those
+> shared call sites hold the last 8 mixed `@`/`:`-attr offenders; they clear when the
+> shared components move to Selmer — not a single-modal task, per Open decision 2).
diff --git a/.claude/skills/ssr-form-migration/reference/selmer-conventions.md b/.claude/skills/ssr-form-migration/reference/selmer-conventions.md
index ac4837b9..31116e3b 100644
--- a/.claude/skills/ssr-form-migration/reference/selmer-conventions.md
+++ b/.claude/skills/ssr-form-migration/reference/selmer-conventions.md
@@ -1,21 +1,21 @@
 # Selmer template conventions
 
-> **Status: STUB — validated in Phase 2.** This file describes the target. The Selmer
-> dependency, render helper, and interop bridge are added in Phase 2 (Transaction Edit);
-> rewrite this file from the *real, verified* example once that lands, and record each
-> converted component in `component-cookbook.md`.
+> **Validated** in the Transaction Edit migration: `location-select*` now renders from
+> `resources/templates/components/location-select.html` via the interop bridge, embedded
+> back into the Hiccup account row. Verified: swap spec 6/6, transaction-edit 8/8 (the
+> Shared Location test selects through the Selmer `<select>`, saves, and spreads to DT).
 
 ## Why Selmer for interactive components
 
 In Hiccup the same Alpine/HTMX attribute is sometimes a keyword and sometimes a string in
-the same file — there's no rule a reader (or an LLM) can rely on:
+the same file — there's no rule a reader (or an LLM) can rely on. The real
+`com/typeahead-` mixes them in one map:
 
 ```clojure
-;; All of these appear in one component today:
-:x-ref  "input"      "x-ref" "hidden"
-:x-model "value.value"   "x-model" "search"
-"@keydown.down.prevent.stop" "tippy.show();"   ; handlers MUST be strings
-:x-init "..."                                  ; structural attrs are keywords
+:x-modelable "value.value"     ; keyword key
+"x-ref" "hidden"               ; string key
+"@keydown.down.prevent.stop" "tippy?.show();"   ; handlers MUST be strings
+:x-init "..."                  ; structural attrs are keywords
 ```
 
 In a Selmer template the same markup is unambiguous plain HTML:
@@ -28,36 +28,66 @@ In a Selmer template the same markup is unambiguous plain HTML:
      @keydown.backspace="tippy?.hide(); value = {value:'', label:''}">
     <span x-text="value.label"></span>
   </a>
-  ...
 </div>
 ```
 
 Note the `tippy?.` null-guard carried over from the swap doctrine — Selmer doesn't change
 the Alpine-survives-swap requirement.
 
-## Render helper + interop bridge (the Phase 2 foundation)
+## The render helper + interop bridge (`auto-ap.ssr.selmer`)
 
 ```clojure
-(defn render [tpl ctx] (selmer/render-file tpl ctx))
-(defn hiccup->html [h] (hiccup/html h))    ; embed hiccup inside selmer via {{ frag|safe }}
-;; selmer fragment inside hiccup: [:div (hiccup/raw (render "..." ctx))]
+(sel/render template ctx)        ; selmer/render-file -> HTML string (classpath-relative path)
+(sel/render-str template ctx)    ; render from a string (tests/REPL)
+(sel/hiccup->html h)             ; Hiccup -> string, for {{ frag|safe }} inside a template
+(sel/raw html-string)            ; wrap a rendered string so hiccup2 emits it verbatim
+(sel/render->hiccup template ctx); render + raw, ready to drop into a Hiccup tree
 ```
 
-The bridge must work **both ways** during the strangler transition: a Hiccup component
-renders inside a Selmer template (pass `(hiccup->html h)` into the context, render with
-`|safe`), and a Selmer fragment renders inside a Hiccup tree (`(hiccup/raw (render ...))`).
-Prove both in Phase 2 before broad use.
+The bridge works **both ways** (proven in `selmer_test`): a Hiccup component renders inside
+a Selmer template (`hiccup->html` + `|safe`), and a Selmer fragment renders inside a Hiccup
+tree (`render->hiccup`, which `raw`-wraps so hiccup2 doesn't double-escape).
+
+## The worked example — `location-select*`
+
+Template (`resources/templates/components/location-select.html`): plain HTML, an
+`{% for %}` over option maps, `{% if opt.selected %}`.
+
+```clojure
+;; Clojure side: build the data, compute classes (reuse inputs/default-input-classes so
+;; styling can't drift), render, and return a Hiccup-embeddable fragment.
+(defn location-select* [{:keys [name client-locations value ...]}]
+  (let [options  (cond ...)                       ; [[value label] ...]
+        selected (or value (ffirst options))
+        classes  (str/join " " (conj (vec inputs/default-input-classes) "w-full"))]
+    (sel/render->hiccup "templates/components/location-select.html"
+                        {:name name :classes classes
+                         :options (for [[v l] options] {:value v :label l :selected (= v selected)})})))
+```
+
+Lessons:
+- **Pass computed values in, don't hard-code.** Reuse the Clojure source of truth
+  (`inputs/default-input-classes`) as a context value rather than copying class strings
+  into the template — otherwise styling drifts from the shared components.
+- **Verify by string-match + e2e, not byte-parity.** `hh/add-class` is set-based, so class
+  *order* differs from the old `com/select` output; CSS is order-independent and the e2e
+  proves behavior. (`testing-conventions`: don't assert on exact markup.)
+- **Embed via the bridge.** `render->hiccup` lets the Selmer fragment sit inside the
+  still-Hiccup row (`com/validated-field` wraps it) — strangler, one component at a time.
 
 ## Composition
 
-Selmer composes via `{% include %}` and `{% block %}`. Prefer small per-component
-templates that the cookbook references by path. Keep `|safe` to values the server fully
-controls (rendered Hiccup, JSON for `x-data`), never raw user input.
+Selmer composes via `{% include %}` and `{% block %}`. Prefer small per-component templates
+referenced by classpath path. Keep `|safe` to values the server fully controls (rendered
+Hiccup, JSON for `x-data`), never raw user input.
 
 ## Scope (Open decision 2)
 
-Hybrid: convert interactive/attribute-heavy components first; static markup may stay
-Hiccup. Revisit a fuller sweep in Phase 11.
+Hybrid, and the boundary is real: **the modal's attribute-heavy components delegate to the
+shared `com/typeahead` / `com/select` / `com/button-group-button`.** Converting those is a
+*cross-cutting* change (every modal uses them), so it belongs to the Phase 11 Selmer sweep,
+not a single modal. `location-select*` is the first, self-contained proof; the shared
+components follow when the sweep promotes them to Selmer partials.
 
 ## Attribute-consistency scorecard (heuristic 8)
 
@@ -65,4 +95,5 @@ Hiccup. Revisit a fuller sweep in Phase 11.
 grep -cE '"x-[a-z]|"hx-[a-z]|"@' <migrated-template>   # → 0 mixed encodings in Selmer
 ```
 A migrated Selmer template has no mixed `:x-`/`"x-"` encodings because everything is plain
-HTML.
+HTML. (The Hiccup `"@click"`/`":class"` offenders that remain in `edit.clj` live in the
+shared-component call sites — they clear when those components move to Selmer.)
diff --git a/resources/templates/components/location-select.html b/resources/templates/components/location-select.html
new file mode 100644
index 00000000..c96755d7
--- /dev/null
+++ b/resources/templates/components/location-select.html
@@ -0,0 +1,8 @@
+{# Location <select> for a transaction account row. Plain-HTML attributes -- the Selmer
+   migration target (no Hiccup keyword/string attribute ambiguity). Rendered into the
+   surrounding Hiccup row via the auto-ap.ssr.selmer interop bridge. #}
+<select name="{{ name }}" class="{{ classes }}">
+  {% for opt in options %}
+  <option value="{{ opt.value }}"{% if opt.selected %} selected{% endif %}>{{ opt.label }}</option>
+  {% endfor %}
+</select>
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index 8c754ff4..fdd84fc8 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -21,11 +21,13 @@
    [auto-ap.ssr-routes :as ssr-routes]
    [auto-ap.ssr.common-handlers :refer [add-new-entity-handler]]
    [auto-ap.ssr.components :as com]
+   [auto-ap.ssr.components.inputs :as inputs]
    [auto-ap.ssr.grid-page-helper :as helper]
    [auto-ap.ssr.transaction.common :refer [grid-page]]
    [auto-ap.ssr.components.multi-modal :as mm]
    [auto-ap.ssr.form-cursor :as fc]
    [auto-ap.ssr.hx :as hx]
+   [auto-ap.ssr.selmer :as sel]
    [auto-ap.ssr.svg :as svg]
    [auto-ap.ssr.utils
     :refer [->db-id apply-middleware-to-all-handlers check-allowance
@@ -36,6 +38,7 @@
    [bidi.bidi :as bidi]
    [clj-time.coerce :as coerce]
    [clojure.edn :as edn]
+   [clojure.string :as str]
    [datomic.api :as dc]
    [hiccup.util :as hu]
    [iol-ion.query :refer [dollars=]]
@@ -153,20 +156,29 @@
       (:vendor/default-account clientized))))
 
 (defn location-select*
+  "The location <select> for an account row, rendered from a Selmer template
+   (templates/components/location-select.html) -- the first interactive modal component
+   migrated off Hiccup. Same options/selection/styling as the old com/select, emitted as
+   plain HTML and embedded back into the Hiccup row via the interop bridge."
   [{:keys [name account-location client-locations value]}]
-  (let [options (into (cond account-location
-                            [[account-location account-location]]
+  (let [options (cond account-location
+                      [[account-location account-location]]
 
-                            (seq client-locations)
-                            (into [["Shared" "Shared"]]
-                                  (for [cl client-locations]
-                                    [cl cl]))
-                            :else
-                            [["Shared" "Shared"]]))]
-    (com/select {:options options
-                 :name name
-                 :value (or value (ffirst options))
-                 :class "w-full"})))
+                      (seq client-locations)
+                      (into [["Shared" "Shared"]]
+                            (for [cl client-locations]
+                              [cl cl]))
+
+                      :else
+                      [["Shared" "Shared"]])
+        selected (or value (ffirst options))
+        classes (str/join " " (conj (vec inputs/default-input-classes) "w-full"))]
+    (sel/render->hiccup
+     "templates/components/location-select.html"
+     {:name name
+      :classes classes
+      :options (for [[v label] options]
+                 {:value v :label label :selected (= v selected)})})))
 
 (defn account-typeahead*
   [{:keys [name value client-id x-model]}]
-- 
2.49.1


From a01dfc197e443d43bb7c77d69bbda41ea8c386d3 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Thu, 4 Jun 2026 07:47:47 -0700
Subject: [PATCH 20/20] refactor(ssr): full Selmer migration of Transaction
 Edit; remove the wizard

Migrate every part of the Transaction Edit modal's HTML to Selmer templates
(zero Hiccup in the render path) and delete the mm multi-modal "wizard"
abstraction entirely -- there was only ever one step.

- New auto-ap.ssr.components.selmer (sc) + ~22 shared component partials under
  resources/templates/components/ (typeahead, button-group, radio-card,
  data-grid, validated-field, modal, buttons, inputs, SVGs). Each wrapper renders
  its own partial; dynamic HTMX/Alpine attrs bridge via attrs->str -> {{attrs|safe}}.
- 15 modal templates under resources/templates/transaction-edit/.
- Delete EditWizard/LinksStep records + all mm/* usage. Plain handlers: flat
  wrap-decode-edit (fields renamed off step-params[...], stray keys stripped),
  flat wrap-derive-state, *errors*-based field errors, generic wrap-form-4xx-2.
- Drop the edit-wizard-navigate route (routes ~12 -> 5).
- Fix: stray `method` (tab button-group hidden) leaked into the upsert -> 500;
  strip decoded map to schema keys.
- e2e selectors updated (#wizard-form->#edit-form, #wizardmodal->#editmodal,
  step-params[...] field names). Parity: swap 6/6, edit 8/8, suite 38/1
  (1 pre-existing unrelated nav test).
- ssr-form-migration skill updated with the learnings (composition mechanics,
  sc/* library, drop-the-wizard recipe, scorecard row, 3 new gotchas).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../reference/component-cookbook.md           |   31 +
 .../reference/form-vs-wizard.md               |   33 +-
 .../ssr-form-migration/reference/gotchas.md   |   48 +-
 .../ssr-form-migration/reference/scorecard.md |   23 +
 .../reference/selmer-conventions.md           |   57 +-
 e2e/transaction-edit-swap.spec.ts             |   12 +-
 e2e/transaction-edit.spec.ts                  |   16 +-
 resources/templates/components/a-button.html  |    1 +
 .../templates/components/a-icon-button.html   |    1 +
 resources/templates/components/badge.html     |    1 +
 .../components/button-group-button.html       |    1 +
 .../templates/components/button-group.html    |    1 +
 resources/templates/components/button.html    |    1 +
 .../templates/components/data-grid-cell.html  |    1 +
 .../components/data-grid-header.html          |    1 +
 .../templates/components/data-grid-row.html   |    1 +
 resources/templates/components/data-grid.html |    1 +
 resources/templates/components/hidden.html    |    3 +
 resources/templates/components/link.html      |    1 +
 resources/templates/components/modal.html     |    1 +
 .../templates/components/money-input.html     |    2 +
 .../templates/components/radio-card.html      |    1 +
 resources/templates/components/spinner.html   |    1 +
 .../templates/components/svg-drop-down.html   |    1 +
 .../components/svg-external-link.html         |    1 +
 resources/templates/components/svg-x.html     |    1 +
 .../templates/components/text-input.html      |    3 +
 resources/templates/components/typeahead.html |    4 +
 .../templates/components/validated-field.html |    6 +
 .../transaction-edit/account-totals.html      |    3 +
 .../transaction-edit/approval-status.html     |    1 +
 .../transaction-edit/details-panel.html       |    2 +
 .../templates/transaction-edit/edit-form.html |    4 +
 .../transaction-edit/edit-modal.html          |    4 +
 .../transaction-edit/invoice-option.html      |    1 +
 .../transaction-edit/linked-payment.html      |    1 +
 .../transaction-edit/links-body.html          |    3 +
 .../transaction-edit/manual-coding.html       |    3 +
 .../transaction-edit/panel-empty.html         |    1 +
 .../transaction-edit/panel-list.html          |    3 +
 .../transaction-edit/payment-matches.html     |    2 +
 .../transaction-edit/rule-option.html         |    1 +
 .../transaction-edit/simple-mode.html         |    4 +
 .../transaction-edit/transitioner.html        |    3 +
 src/clj/auto_ap/ssr/components/selmer.clj     |  292 ++++
 src/clj/auto_ap/ssr/transaction/edit.clj      | 1236 ++++++++---------
 src/cljc/auto_ap/routes/transactions.cljc     |    1 -
 47 files changed, 1161 insertions(+), 659 deletions(-)
 create mode 100644 resources/templates/components/a-button.html
 create mode 100644 resources/templates/components/a-icon-button.html
 create mode 100644 resources/templates/components/badge.html
 create mode 100644 resources/templates/components/button-group-button.html
 create mode 100644 resources/templates/components/button-group.html
 create mode 100644 resources/templates/components/button.html
 create mode 100644 resources/templates/components/data-grid-cell.html
 create mode 100644 resources/templates/components/data-grid-header.html
 create mode 100644 resources/templates/components/data-grid-row.html
 create mode 100644 resources/templates/components/data-grid.html
 create mode 100644 resources/templates/components/hidden.html
 create mode 100644 resources/templates/components/link.html
 create mode 100644 resources/templates/components/modal.html
 create mode 100644 resources/templates/components/money-input.html
 create mode 100644 resources/templates/components/radio-card.html
 create mode 100644 resources/templates/components/spinner.html
 create mode 100644 resources/templates/components/svg-drop-down.html
 create mode 100644 resources/templates/components/svg-external-link.html
 create mode 100644 resources/templates/components/svg-x.html
 create mode 100644 resources/templates/components/text-input.html
 create mode 100644 resources/templates/components/typeahead.html
 create mode 100644 resources/templates/components/validated-field.html
 create mode 100644 resources/templates/transaction-edit/account-totals.html
 create mode 100644 resources/templates/transaction-edit/approval-status.html
 create mode 100644 resources/templates/transaction-edit/details-panel.html
 create mode 100644 resources/templates/transaction-edit/edit-form.html
 create mode 100644 resources/templates/transaction-edit/edit-modal.html
 create mode 100644 resources/templates/transaction-edit/invoice-option.html
 create mode 100644 resources/templates/transaction-edit/linked-payment.html
 create mode 100644 resources/templates/transaction-edit/links-body.html
 create mode 100644 resources/templates/transaction-edit/manual-coding.html
 create mode 100644 resources/templates/transaction-edit/panel-empty.html
 create mode 100644 resources/templates/transaction-edit/panel-list.html
 create mode 100644 resources/templates/transaction-edit/payment-matches.html
 create mode 100644 resources/templates/transaction-edit/rule-option.html
 create mode 100644 resources/templates/transaction-edit/simple-mode.html
 create mode 100644 resources/templates/transaction-edit/transitioner.html
 create mode 100644 src/clj/auto_ap/ssr/components/selmer.clj

diff --git a/.claude/skills/ssr-form-migration/reference/component-cookbook.md b/.claude/skills/ssr-form-migration/reference/component-cookbook.md
index dcfcddb1..af778820 100644
--- a/.claude/skills/ssr-form-migration/reference/component-cookbook.md
+++ b/.claude/skills/ssr-form-migration/reference/component-cookbook.md
@@ -149,3 +149,34 @@ divergence). Scorecard heuristic 1: faked roots → 0.
 ```
 TODO Phase 2: the simple/advanced toggle becomes a `?mode=` re-render (plain form), not a
 dedicated route.
+
+---
+
+## The Selmer component library (`auto-ap.ssr.components.selmer` / `sc`) — Phase 2-final
+
+Every shared component the modal renders through is now a thin Clojure wrapper over a
+partial under `resources/templates/components/`. **Reuse these before reaching for the
+Hiccup `com/*` versions in a migrated modal.** Each wrapper builds a context (reusing the
+real class helpers so output matches modulo Tailwind order) and renders its own partial via
+the interop bridge; dynamic HTMX/Alpine attrs go through `sc/attrs->str` →
+`{{ attrs|safe }}`. See `selmer-conventions.md` for the mechanics.
+
+| Wrapper | Partial | Notes |
+|---------|---------|-------|
+| `sc/hidden` / `sc/text-input` / `sc/money-input` | `hidden`/`text-input`/`money-input`.html | leaf inputs; class via `inputs/default-input-classes` + `use-size` |
+| `sc/validated-field` | `validated-field.html` | label + body + always-present error `<p>`; pass-through attrs land on the wrapping div (the per-row location cell hangs its swap wiring here) |
+| `sc/button` / `sc/a-button` / `sc/a-icon-button` | `button`/`a-button`/`a-icon-button`.html | spinner via `{% include "spinner.html" %}`; class via `btn/bg-colors` |
+| `sc/badge` / `sc/link` | `badge`/`link`.html | |
+| `sc/button-group` / `sc/button-group-button` | `button-group(+button).html` | the group does **not** mutate children's classes (the Hiccup `group-` added rounded-l/r) — add rounding in the caller/template (tabs do) |
+| `sc/radio-card` | `radio-card.html` | reproduces the `select-keys [:hx-post :hx-target :hx-swap :hx-include :hx-trigger]` filter (drops `:hx-vals`/`:hx-select`) **and** the dangling-`[:h3]` quirk: only the `<ul>` renders |
+| `sc/data-grid` (+ `-header`/`-row`/`-cell`) | `data-grid*.html` | table shell + optional `footer-tbody` (the swappable totals tbody) |
+| `sc/typeahead` | `typeahead.html` | full Alpine + tippy; resolves `{value,label}` server-side via `content-fn`; every `tippy?.` null-guard preserved; hidden posting `<input>` with `:value="value.value"` + the `x-init` watcher |
+| `sc/modal` | `modal.html` | the `@click.outside="open=false"` wrapper |
+| SVGs | `spinner`/`svg-x`/`svg-external-link`/`svg-drop-down`.html | static, `{% include %}`d so the markup isn't duplicated |
+
+Modal-specific structure lives under `resources/templates/transaction-edit/`
+(`edit-form`, `edit-modal`, `links-body`, `manual-coding`, `simple-mode`, `account-totals`,
+`details-panel`, the four match panels, `transitioner`). The render fns in `edit.clj`
+gather data, call `sc/*`, and interpolate the fragments into these layout templates as
+`{{ frag|safe }}`. **Verify each wrapper by class-set equality + e2e, never byte-parity**
+(`hh/add-class` is set-based, so class order differs from the Hiccup output).
diff --git a/.claude/skills/ssr-form-migration/reference/form-vs-wizard.md b/.claude/skills/ssr-form-migration/reference/form-vs-wizard.md
index b4228144..213d5942 100644
--- a/.claude/skills/ssr-form-migration/reference/form-vs-wizard.md
+++ b/.claude/skills/ssr-form-migration/reference/form-vs-wizard.md
@@ -13,9 +13,13 @@ implement the multi-step protocol (`mm/ModalWizardStep` + friends), serialize an
 snapshot into hidden fields, and register 10–20 stacked-middleware routes — all for one
 step. That is pure overhead to delete.
 
+> **Done — Transaction Edit is now a plain form.** `LinksStep`/`EditWizard` and all `mm/*`
+> usage were deleted from `transaction/edit.clj`; the worked example below is realized, not
+> aspirational. See "Single-step → plain form (realized)".
+
 ## The machinery being replaced
 
-`transaction/edit.clj` today still carries the old shape, useful as the "before":
+The old shape (kept here as the "before"):
 
 ```clojure
 (defrecord LinksStep [linear-wizard]
@@ -49,6 +53,33 @@ A `?mode=` toggle is just the `GET` re-rendering with a different query param 
 plain form. An add-row interaction is one extra `POST` that appends a fresh row and
 re-renders (the `+1` route).
 
+### Single-step → plain form (realized: Transaction Edit)
+
+What replacing the wizard actually looked like, end to end:
+
+1. **Delete the records + middleware.** `EditWizard`/`LinksStep`, `mm/open-wizard-handler`,
+   `mm/next-handler`, `mm/submit-handler`, `mm/wrap-wizard`, `mm/wrap-decode-multi-form-state`,
+   and the `edit-wizard-navigate` route all go. `render-step` becomes a plain `render-form`.
+2. **Rename the fields off `step-params[...]`.** Field names are now the schema path
+   directly (`(path->name2 :transaction/accounts 0 :transaction-account/account)` →
+   `transaction/accounts[0][transaction-account/account]`). They decode straight into the
+   form schema via the unchanged `wrap-nested-form-params` + `mc/decode` — no two-key
+   snapshot/step-params decode. **Strip stray keys after decode** (`select-keys` to the
+   schema's keys) or a non-schema input like the tab group's `method` hidden 500s the save
+   (see `gotchas.md`).
+3. **Flat state.** `wrap-derive-state` builds a plain `{:snapshot :edit-path :step-params}`
+   map (not the `MultiStepFormState` record): `entity-only` fields from the entity, editable
+   fields from the live posted form (absent = cleared). The ~34 `:snapshot` reads keep
+   working.
+4. **Validation/error flow without `wrap-ensure-step`.** Reuse the generic
+   `wrap-form-4xx-2` directly: `(-> submit-edit (wrap-form-4xx-2 render-form-response) …)`.
+   `submit-edit` runs `assert-schema` then dispatches the save; on a throw, `wrap-form-4xx-2`
+   re-renders the whole form with `:form-errors` keyed by schema paths. A `*errors*` dynamic
+   var (bound by `render-form`) replaces the form-cursor's `*form-errors*` for field lookups.
+5. **Routes shrink to** `edit-wizard` (GET open), `edit-submit` (POST), `edit-form-changed`
+   (POST whole-form re-render for dependent changes), `location-select` (GET),
+   `unlink-payment` (POST).
+
 ---
 
 ## Genuinely multi-step → data-driven engine with session-stored step state
diff --git a/.claude/skills/ssr-form-migration/reference/gotchas.md b/.claude/skills/ssr-form-migration/reference/gotchas.md
index 446ae4e2..e9f9fc26 100644
--- a/.claude/skills/ssr-form-migration/reference/gotchas.md
+++ b/.claude/skills/ssr-form-migration/reference/gotchas.md
@@ -148,6 +148,52 @@ hides every test after the first failure, so fixing one unmasks the next):
   Actions")')`) hang once the modal is single-page. Drop the navigation; the action tabs
   are present immediately.
 
+## Flat decode leaks stray form fields into the saved entity (the `method` 500)
+
+Dropping the wizard's `step-params[...]` field-name prefix and decoding posted params
+**straight into the form schema** means the decode now captures **every** posted field, not
+just the namespaced ones. A single stray field breaks the save:
+
+- The tab switcher is `(com/button-group {:name "method"} …)`, which emits
+  `<input type="hidden" name="method">`. Under the wizard, `method` lived *outside*
+  `step-params[...]` so it never entered the decoded map. After the rename it decodes to
+  `:method ""` (malli `:map` is open and passes unknown keys), rides into `snapshot` →
+  `tx-data`, and `:upsert-transaction` rejects it → **HTTP 500 on save**.
+- Symptom: the save POST fires (confirm with a `println` in the submit handler) but the
+  modal never closes, because the 500 trips `htmx:response-error`. The server error may go
+  to mulog, not stdout — an empty stdout log does **not** mean "no error." Reproduce the
+  exact POST with `curl` (add/remove one field) to isolate the offender fast.
+
+**Fix:** strip the decoded map to the schema's known top-level keys before threading on
+(`select-keys decoded edit-form-keys`); keep that allowlist next to the schema. Nested
+account sub-maps decode fine — only the top level needs the guard.
+
+## REPL reload does not refresh a running jetty's routes — restart the JVM
+
+`handler/match->handler-lookup` is a top-level `def` capturing `(merge ssr/key->handler …)`
+at load, through a chain of module-level `def`s (`edit` → `ssr.transaction` → `ssr.core` →
+`handler`). Reloading the leaf `edit.clj` updates it but **not** the captured merges, and a
+jetty started `(run-jetty app …)` holds a static `app` that doesn't re-deref the lookup per
+request. Net: after a handler/route/record change, an already-running dev server keeps
+serving the **old** code — `curl` shows the pre-change response (e.g. the old wizard
+transitioner) while your REPL renders the new one. **Restart in a fresh JVM** for
+route/record/middleware changes. For e2e, the Playwright test server
+(`lein run -m auto-ap.test-server`) is a fresh JVM compiling from disk — but kill any stale
+`:3333` first (`reuseExistingServer` reuses it), and kill **by port**
+(`ss -tlnp | grep :3333`), never `pkill -f test-server` (it matches its own command line).
+
+## Full-suite e2e flakes are shared-seed interference
+
+The test server seeds once at boot; edit tests **save** (mutate) those seed transactions.
+Run in parallel, workers race the same rows and earlier saves pollute later reads → phantom
+failures that pass in isolation. Clean signal: restart (re-seed) + **`--workers=1`**.
+Baseline is **38 pass / 1 fail**, the 1 being the pre-existing
+`transaction-navigation.spec.ts:92` date-range test (unrelated to the edit modal).
+
 ## Scorecard exceptions (ratchet violations with a reason)
 
-_None yet._ Append here if a migration must let a metric regress for a documented reason.
+**Heuristic 9 (Hiccup in render path) — partial exception (Phase 2-final).** The post-save
+`com/success-modal` confirmation dialogs in `save-handler` keep ~6 `[:p …]` Hiccup lines.
+They are terminal responses (shown after the form closes), reuse a shared dialog component,
+and sit outside the form's interactive render path. Migrating them means porting the shared
+`success-modal` to Selmer — a Phase 11 cross-cutting task, not a single-modal one.
diff --git a/.claude/skills/ssr-form-migration/reference/scorecard.md b/.claude/skills/ssr-form-migration/reference/scorecard.md
index 43583a21..f74491cf 100644
--- a/.claude/skills/ssr-form-migration/reference/scorecard.md
+++ b/.claude/skills/ssr-form-migration/reference/scorecard.md
@@ -40,6 +40,14 @@ Each migration appends one row (after-numbers), referencing the before in the di
 |-------|-------|-----|--------|-----------------|-------------|-----------------|-----|-----------|-------------------------|
 | 1 (baseline) | Transaction Edit `transaction/edit.clj` | 1608 | ~12 | 1 | 2 | ~75 | 0 | 8 | — / seeded 7 entries |
 | 2 | Transaction Edit `transaction/edit.clj` | 1593 | **~5** | **0** | **0** | **0 round-trip** | 0 | 8 (shared) | location-select / **1 Selmer** |
+| 2-final | Transaction Edit (full Selmer + wizard removed) | 1548 | **5** | 0 | 0 | 0 | 0 | **0** | full `sc/*` lib / **~30 partials** |
+
+### New heuristics introduced at 2-final (full Selmer)
+
+| # | Heuristic | Measure | Target |
+|---|-----------|---------|--------|
+| 9 | Hiccup HTML tags in the render path | `grep -cE '\[:(div\|span\|p\|a\|button\|input\|h[1-6]\|ul\|li\|label\|select\|option\|t(able\|head\|body\|r\|d\|h)\|form\|svg\|template)'` over the modal's render fns | → 0 (success-modal confirmation dialogs may keep the shared Hiccup component) |
+| 10 | mm wizard coupling | `grep -c 'mm/' the modal file` + `grep -c 'defrecord.*Wizard\|ModalWizardStep'` | → 0 for a single-step modal |
 
 > **Phase 2 progress.** Achieved with parity held (swap spec **6/6**, transaction-edit
 > spec **8/8**, full suite **38 pass / 1 unrelated fail / 0 skip**, up from 30/2/7):
@@ -59,3 +67,18 @@ Each migration appends one row (after-numbers), referencing the before in the di
 > Selmer sweep of the shared `com/typeahead`/`com/select`/`com/button-group-button` (those
 > shared call sites hold the last 8 mixed `@`/`:`-attr offenders; they clear when the
 > shared components move to Selmer — not a single-modal task, per Open decision 2).
+
+> **Phase 2-final — full Selmer + wizard removed.** Every component the modal renders
+> through was ported to a Selmer partial under `resources/templates/components/` with a
+> thin Clojure wrapper in `auto-ap.ssr.components.selmer` (`sc/*`); the modal's own
+> structure lives under `resources/templates/transaction-edit/`. The `mm` wizard
+> abstraction (`EditWizard`/`LinksStep` records, `MultiStepFormState`, `step-params[...]`
+> field names, `wrap-wizard`/`wrap-decode-multi-form-state` middleware) was deleted — there
+> was only ever one step, so it was pure overhead. Result: heuristic 8 (mixed hx-) and 9
+> (Hiccup in render) and 10 (mm coupling) all → **0**; the `edit-wizard-navigate` route is
+> gone (routes 5). Parity held: swap spec **6/6**, transaction-edit spec **8/8**, full
+> suite **38 pass / 1 pre-existing unrelated fail** (serial, fresh seed). The only Hiccup
+> left in the file is the post-save `com/success-modal` confirmation dialogs (terminal,
+> shared component — out of the form's render path). See `form-vs-wizard.md` (drop-the-
+> wizard test), `selmer-conventions.md` (composition mechanics), and `gotchas.md`
+> (stray-field decode leak; jetty reload staleness).
diff --git a/.claude/skills/ssr-form-migration/reference/selmer-conventions.md b/.claude/skills/ssr-form-migration/reference/selmer-conventions.md
index 31116e3b..85487bb8 100644
--- a/.claude/skills/ssr-form-migration/reference/selmer-conventions.md
+++ b/.claude/skills/ssr-form-migration/reference/selmer-conventions.md
@@ -75,11 +75,60 @@ Lessons:
 - **Embed via the bridge.** `render->hiccup` lets the Selmer fragment sit inside the
   still-Hiccup row (`com/validated-field` wraps it) — strangler, one component at a time.
 
-## Composition
+## Composition — verified mechanics (selmer 1.12.61)
 
-Selmer composes via `{% include %}` and `{% block %}`. Prefer small per-component templates
-referenced by classpath path. Keep `|safe` to values the server fully controls (rendered
-Hiccup, JSON for `x-data`), never raw user input.
+Proven by REPL before the full migration (do the same before relying on any of these):
+
+- **`{% include %}` works in FILE renders only.** `sel/render` = `selmer/render-file`, and
+  include/extends/block are *parse-stage* tags. Rendering a template **string** that
+  contains `{% include %}` throws `unrecognized tag: :include` (the runtime expr-tag has a
+  nil handler). So includes only work from a `.html` file, never from `render-str`.
+- **`{% include %}` sees `{% for %}` loop bindings.** Inside `{% for row in rows %}…{% include "components/x.html" %}…{% endfor %}` the partial can read `row.*`. Good for repeated
+  rows — though Clojure-composing the rows (below) is usually simpler.
+- **`{% include … with k=v %}` is IGNORED** in 1.12.61 (the `with` clause is dropped). To
+  parametrize, either wrap with the block tag `{% with k=v %}{% include … %}{% endwith %}`
+  (works), or — preferred — let a Clojure wrapper render the partial with an explicit ctx.
+
+## The Clojure-wrapper composition pattern (`auto-ap.ssr.components.selmer` / `sc`)
+
+Because `{% include with %}` can't pass args and the server computes most values anyway,
+each shared component is a **thin Clojure wrapper that renders its own partial** (the
+proven `location-select*` shape, generalised). The element *structure* lives 100% in the
+`.html`; the only Clojure is data assembly. The modal's render fns compose these wrappers
+and assemble a view-model, interpolating the pre-rendered fragments as `{{ frag|safe }}`.
+
+```clojure
+(sc/hidden {:name … :value …})            ; -> render "components/hidden.html"
+(sc/validated-field {:label … :errors …} body…)
+(sc/typeahead {:name … :url … :value … :content-fn …})   ; resolves label server-side
+(sc/data-grid {:headers […] :footer-tbody …} rows…)
+```
+
+### `attrs->str` — the dynamic-attribute bridge
+
+HTMX/Alpine attributes vary per call site, so a fixed template can't enumerate them.
+`sc/attrs->str` serialises an attribute *map* to an HTML attribute *string* injected with
+`{{ attrs|safe }}`: `<input type="hidden"{{ attrs|safe }}>`. Rules mirror hiccup2 — nil/false
+dropped, `true` → bare boolean attr, else `name="escaped"` (via `hu/escape-html`, so JSON
+`x-data` and `x-init` quotes become `&quot;`/`&apos;` and the browser decodes them back).
+Keyword keys keep their full name incl. namespaced/colon forms (`:x-hx-val:account-id` →
+`x-hx-val:account-id`). This keeps templates free of per-attribute `{% if %}` ladders while
+still emitting 100% Selmer markup — `attrs->str` serialises data, it does not build Hiccup.
+
+### Reuse the real class helpers
+
+Wrappers reuse `inputs/default-input-classes`, `inputs/use-size`, `hh/add-class`,
+`btn/bg-colors` so output matches the Hiccup component **modulo Tailwind class order**.
+Verify by class-**set** equality + e2e, never byte-parity (see the cookbook entries).
+
+### Trivial wrapper divs
+
+A bare `<div class="w-72">…</div>` around a fragment is composed with a `wrap-div` string
+helper (or put the class in the parent template), not a Hiccup vector — string composition
+of a structural wrapper is not Hiccup and avoids a micro-template per div.
+
+Keep `|safe` to values the server fully controls (rendered fragments, JSON for `x-data`),
+never raw user input.
 
 ## Scope (Open decision 2)
 
diff --git a/e2e/transaction-edit-swap.spec.ts b/e2e/transaction-edit-swap.spec.ts
index 8d1a251e..824594d8 100644
--- a/e2e/transaction-edit-swap.spec.ts
+++ b/e2e/transaction-edit-swap.spec.ts
@@ -5,7 +5,7 @@ import { test, expect } from '@playwright/test';
 // re-renders the entire form, and the client selects what to swap back -- with
 // no out-of-band swaps and no morph extension:
 //   - discrete changes (vendor, account, location, mode, add/remove row) swap
-//     all of #wizard-form (the active action/tab round-trips through the form,
+//     all of #edit-form (the active action/tab round-trips through the form,
 //     so it survives the swap);
 //   - typed fields never swap the input the user is in -- the amount field swaps
 //     only the #account-totals tbody (a sibling of the input rows), and the memo
@@ -32,7 +32,7 @@ async function openManualAdvanced(page: any, transactionIndex = 0) {
     .nth(transactionIndex)
     .click();
   await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
-  await page.waitForSelector('#wizardmodal');
+  await page.waitForSelector('#editmodal');
   await page.click('button:has-text("Manual")');
 
   // First transaction has no accounts so it opens in "simple" mode. Switch to
@@ -107,7 +107,7 @@ test.describe('Transaction Edit whole-form swap', () => {
       .toBeGreaterThan(0);
 
     // The form must survive the swap intact.
-    await expect(page.locator('#wizard-form')).toHaveCount(1);
+    await expect(page.locator('#edit-form')).toHaveCount(1);
     expect(errors, errors.join('\n')).toEqual([]);
   });
 
@@ -192,7 +192,7 @@ test.describe('Transaction Edit whole-form swap', () => {
     await page.goto('/transaction2');
     await page.waitForSelector('table tbody tr');
     await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
-    await page.waitForSelector('#wizardmodal');
+    await page.waitForSelector('#editmodal');
 
     const memo = page.locator('#edit-memo');
     await memo.waitFor();
@@ -301,7 +301,7 @@ test.describe('Transaction Edit whole-form swap', () => {
     await page.goto('/transaction2');
     await page.waitForSelector('table tbody tr');
     await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
-    await page.waitForSelector('#wizardmodal');
+    await page.waitForSelector('#editmodal');
     await page.click('button:has-text("Manual")');
     await page.waitForSelector('div[hx-vals*="vendor-changed"]');
 
@@ -350,7 +350,7 @@ test.describe('Transaction Edit whole-form swap', () => {
     await page.goto('/transaction2');
     await page.waitForSelector('table tbody tr');
     await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
-    await page.waitForSelector('#wizardmodal');
+    await page.waitForSelector('#editmodal');
     await page.click('button:has-text("Manual")');
     await page.waitForSelector('div[hx-vals*="vendor-changed"]');
 
diff --git a/e2e/transaction-edit.spec.ts b/e2e/transaction-edit.spec.ts
index fb4634d2..1d63aa8d 100644
--- a/e2e/transaction-edit.spec.ts
+++ b/e2e/transaction-edit.spec.ts
@@ -13,7 +13,7 @@ async function openEditModal(page: any, transactionIndex: number = 0) {
   
   // Wait for the modal to open
   await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
-  await page.waitForSelector('#wizardmodal');
+  await page.waitForSelector('#editmodal');
   
   // The modal is now single-page (Edit Transaction). Click "Manual" tab to ensure
   // the manual account coding form is active.
@@ -144,7 +144,7 @@ async function saveTransaction(page: any) {
 }
 
 async function toggleToPercentMode(page: any) {
-  const percentRadio = page.locator('input[name="step-params[amount-mode]"][value="%"]');
+  const percentRadio = page.locator('input[name="amount-mode"][value="%"]');
   await percentRadio.click();
   
   // Wait for HTMX to swap the grid body
@@ -155,7 +155,7 @@ async function toggleToPercentMode(page: any) {
 }
 
 async function toggleToDollarMode(page: any) {
-  const dollarRadio = page.locator('input[name="step-params[amount-mode]"][value="$"]');
+  const dollarRadio = page.locator('input[name="amount-mode"][value="$"]');
   await dollarRadio.click();
   
   // Wait for HTMX to swap the grid body
@@ -235,7 +235,7 @@ test.describe('Transaction Edit Full Workflow', () => {
     await openEditModal(page, 0);
     await page.waitForTimeout(500);
 
-    const dollarRadio = page.locator('input[name="step-params[amount-mode]"][value="$"]');
+    const dollarRadio = page.locator('input[name="amount-mode"][value="$"]');
     await expect(dollarRadio).toBeChecked();
 
     const val0 = await (await findAccountRow(page, 0)).locator('.account-amount-field').inputValue();
@@ -272,7 +272,7 @@ test.describe('Transaction Edit Validation', () => {
     await expect(page.locator('#modal-holder[x-show="open"]')).toBeVisible();
     
     // The form should still be present
-    const form = page.locator('#wizard-form');
+    const form = page.locator('#edit-form');
     await expect(form).toBeVisible();
     
     // Verify the account row is still there with our $50 value
@@ -304,7 +304,7 @@ async function openEditModalForTransaction(page: any, description: string) {
   // navigation), so the action tabs -- including "Link to payment" -- are available
   // immediately; callers click the tab they need.
   await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
-  await page.waitForSelector('#wizardmodal');
+  await page.waitForSelector('#editmodal');
 }
 
 async function selectVendorFromTypeahead(page: any, vendorName: string) {
@@ -447,7 +447,7 @@ async function openManualVendorSection(page: any, transactionIndex: number) {
   await editButton.click();
 
   await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
-  await page.waitForSelector('#wizardmodal');
+  await page.waitForSelector('#editmodal');
   await page.click('button:has-text("Manual")');
   await page.waitForSelector('div[hx-vals*="vendor-changed"]');
 }
@@ -472,7 +472,7 @@ test.describe('Transaction Edit Vendor Selection', () => {
     // The server-rendered hidden input must carry the newly selected vendor id.
     const hidden = page
       .locator(
-        'div[hx-vals*="vendor-changed"] input[type="hidden"][name="step-params[transaction/vendor]"]'
+        'div[hx-vals*="vendor-changed"] input[type="hidden"][name="transaction/vendor"]'
       )
       .first();
     await expect(hidden).toHaveValue(vendorId.toString());
diff --git a/resources/templates/components/a-button.html b/resources/templates/components/a-button.html
new file mode 100644
index 00000000..c746750c
--- /dev/null
+++ b/resources/templates/components/a-button.html
@@ -0,0 +1 @@
+<a class="{{ classes }}"{{ attrs|safe }}>{% if indicator %}<div class="htmx-indicator flex items-center">{% include "templates/components/spinner.html" %}<div class="ml-3">Loading...</div></div>{% endif %}<div class="inline-flex gap-2 items-center justify-center{% if indicator %} htmx-indicator-hidden{% endif %}">{{ body|safe }}</div></a>
diff --git a/resources/templates/components/a-icon-button.html b/resources/templates/components/a-icon-button.html
new file mode 100644
index 00000000..9265f2a5
--- /dev/null
+++ b/resources/templates/components/a-icon-button.html
@@ -0,0 +1 @@
+<a class="{{ classes }}"{{ attrs|safe }}><div class="h-4 w-4">{{ body|safe }}</div></a>
diff --git a/resources/templates/components/badge.html b/resources/templates/components/badge.html
new file mode 100644
index 00000000..cc8a6630
--- /dev/null
+++ b/resources/templates/components/badge.html
@@ -0,0 +1 @@
+<div class="{{ classes }}"{{ attrs|safe }}>{{ body|safe }}</div>
diff --git a/resources/templates/components/button-group-button.html b/resources/templates/components/button-group-button.html
new file mode 100644
index 00000000..fc8c23ac
--- /dev/null
+++ b/resources/templates/components/button-group-button.html
@@ -0,0 +1 @@
+<button class="{{ classes }}"{{ attrs|safe }}>{{ body|safe }}</button>
diff --git a/resources/templates/components/button-group.html b/resources/templates/components/button-group.html
new file mode 100644
index 00000000..8cd98844
--- /dev/null
+++ b/resources/templates/components/button-group.html
@@ -0,0 +1 @@
+<div class="inline-flex rounded-md shadow-sm" role="group" hx-on:click="this.querySelector(&quot;input&quot;).value = event.target.value; this.querySelector(&quot;input&quot;).dispatchEvent(new Event('change', {bubbles: true}));"><input type="hidden" name="{{ name }}">{{ body|safe }}</div>
diff --git a/resources/templates/components/button.html b/resources/templates/components/button.html
new file mode 100644
index 00000000..875664db
--- /dev/null
+++ b/resources/templates/components/button.html
@@ -0,0 +1 @@
+<button class="{{ classes }}"{{ attrs|safe }}><div class="htmx-indicator flex items-center absolute inset-0 justify-center">{% include "templates/components/spinner.html" %}{% if loading_label %}<div class="ml-3">Loading...</div>{% endif %}</div><div class="htmx-indicator-invisible inline-flex gap-2 items-center justify-center">{{ body|safe }}</div></button>
diff --git a/resources/templates/components/data-grid-cell.html b/resources/templates/components/data-grid-cell.html
new file mode 100644
index 00000000..96006923
--- /dev/null
+++ b/resources/templates/components/data-grid-cell.html
@@ -0,0 +1 @@
+<td class="px-4 py-2{% if klass %} {{ klass }}{% endif %}"{{ attrs|safe }}>{{ body|safe }}</td>
diff --git a/resources/templates/components/data-grid-header.html b/resources/templates/components/data-grid-header.html
new file mode 100644
index 00000000..7b2a904a
--- /dev/null
+++ b/resources/templates/components/data-grid-header.html
@@ -0,0 +1 @@
+<th class="px-4 py-3{% if klass %} {{ klass }}{% endif %}" scope="col" @click="{{ click|safe }}"{{ attrs|safe }}>{% if sort_key %}<a href="#">{{ body|safe }}</a>{% else %}{{ body|safe }}{% endif %}</th>
diff --git a/resources/templates/components/data-grid-row.html b/resources/templates/components/data-grid-row.html
new file mode 100644
index 00000000..8162179f
--- /dev/null
+++ b/resources/templates/components/data-grid-row.html
@@ -0,0 +1 @@
+<tr class="{{ classes }}"{{ attrs|safe }}>{{ body|safe }}</tr>
diff --git a/resources/templates/components/data-grid.html b/resources/templates/components/data-grid.html
new file mode 100644
index 00000000..6231a37f
--- /dev/null
+++ b/resources/templates/components/data-grid.html
@@ -0,0 +1 @@
+<div class="shrink overflow-y-scroll"><table class="{{ table_class }}"{{ table_attrs|safe }}><thead class="{{ thead_class }}"><tr>{{ headers|safe }}</tr></thead><tbody>{{ rows|safe }}</tbody>{{ footer_tbody|safe }}</table></div>
diff --git a/resources/templates/components/hidden.html b/resources/templates/components/hidden.html
new file mode 100644
index 00000000..1c8971d6
--- /dev/null
+++ b/resources/templates/components/hidden.html
@@ -0,0 +1,3 @@
+{# Hidden input. The Clojure wrapper (sc/hidden) serializes the full attribute map
+   (name, value, optional id/form/class/Alpine :value bind) into `attrs`. #}
+<input type="hidden"{{ attrs|safe }}>
diff --git a/resources/templates/components/link.html b/resources/templates/components/link.html
new file mode 100644
index 00000000..168a975d
--- /dev/null
+++ b/resources/templates/components/link.html
@@ -0,0 +1 @@
+<a class="{{ classes }}"{{ attrs|safe }}>{{ body|safe }}</a>
diff --git a/resources/templates/components/modal.html b/resources/templates/components/modal.html
new file mode 100644
index 00000000..497175e0
--- /dev/null
+++ b/resources/templates/components/modal.html
@@ -0,0 +1 @@
+<div class="{{ classes }}" @click.outside="open=false"{{ attrs|safe }}>{{ body|safe }}</div>
diff --git a/resources/templates/components/money-input.html b/resources/templates/components/money-input.html
new file mode 100644
index 00000000..99103792
--- /dev/null
+++ b/resources/templates/components/money-input.html
@@ -0,0 +1,2 @@
+{# Money input (number, step=0.01, right-aligned). sc/money-input builds `attrs`. #}
+<input{{ attrs|safe }}>
diff --git a/resources/templates/components/radio-card.html b/resources/templates/components/radio-card.html
new file mode 100644
index 00000000..e7b9e56e
--- /dev/null
+++ b/resources/templates/components/radio-card.html
@@ -0,0 +1 @@
+<ul class="{{ ul_class }}">{% for opt in options %}<li class="{{ li_class }}"><div class="{{ div_class }}"><input id="{{ opt.id }}" type="radio" value="{{ opt.value }}" name="{{ name }}" class="{{ input_class }}"{{ input_attrs|safe }}{% if opt.checked %} checked{% endif %}><label for="{{ opt.id }}" class="{{ label_class }}">{{ opt.content|safe }}</label></div></li>{% endfor %}</ul>
diff --git a/resources/templates/components/spinner.html b/resources/templates/components/spinner.html
new file mode 100644
index 00000000..2b408d87
--- /dev/null
+++ b/resources/templates/components/spinner.html
@@ -0,0 +1 @@
+<svg aria-hidden="true" class="animate-spin inline w-4 h-4 text-white" fill="none" role="status" viewbox="0 0 100 101" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path></svg>
diff --git a/resources/templates/components/svg-drop-down.html b/resources/templates/components/svg-drop-down.html
new file mode 100644
index 00000000..7c7f13f5
--- /dev/null
+++ b/resources/templates/components/svg-drop-down.html
@@ -0,0 +1 @@
+<svg aria-hidden="true" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
diff --git a/resources/templates/components/svg-external-link.html b/resources/templates/components/svg-external-link.html
new file mode 100644
index 00000000..6280d30b
--- /dev/null
+++ b/resources/templates/components/svg-external-link.html
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs></defs><title>navigation-next</title><path d="M23,9.5H12.387a4,4,0,0,0-4,4v2" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"></path><polyline fill="none" points="19 13.498 23 9.498 19 5.498" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"></polyline><path d="M14.387,13v5.5a1,1,0,0,1-1,1h-12a1,1,0,0,1-1-1V6.5a1,1,0,0,1,1-1h12a1,1,0,0,1,1,1V7" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"></path></svg>
diff --git a/resources/templates/components/svg-x.html b/resources/templates/components/svg-x.html
new file mode 100644
index 00000000..717e9253
--- /dev/null
+++ b/resources/templates/components/svg-x.html
@@ -0,0 +1 @@
+<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs></defs><title>delete-2</title><circle cx="12" cy="12" fill="none" r="11.5" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"></circle><line fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" x1="7" x2="17" y1="7" y2="17"></line><line fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" x1="17" x2="7" y1="7" y2="17"></line></svg>
diff --git a/resources/templates/components/text-input.html b/resources/templates/components/text-input.html
new file mode 100644
index 00000000..79f9dd58
--- /dev/null
+++ b/resources/templates/components/text-input.html
@@ -0,0 +1,3 @@
+{# Text input. sc/text-input builds the full attr map (type/autocomplete/class+size
+   already merged, reusing inputs/default-input-classes + hh/add-class) into `attrs`. #}
+<input{{ attrs|safe }}>
diff --git a/resources/templates/components/typeahead.html b/resources/templates/components/typeahead.html
new file mode 100644
index 00000000..7df07c9e
--- /dev/null
+++ b/resources/templates/components/typeahead.html
@@ -0,0 +1,4 @@
+{# Click-to-select typeahead (Alpine + tippy). Survives whole-form swaps; null-guarded
+   tippy?. / $refs.input? throughout. The Clojure wrapper (sc/typeahead) resolves the
+   initial {value,label} server-side and builds x_data + the hidden-input attrs. #}
+<div class="relative" x-data="{{ x_data }}" x-modelable="value.value"{% if x_model %} x-model="{{ x_model }}"{% endif %}{% if key %} key="{{ key }}"{% endif %}>{% if disabled %}<span x-text="value.label"></span>{% else %}<a class="{{ a_class }}" x-tooltip.on.click="{content: ()=>($refs.dropdown?.innerHTML ?? ''), placement: 'bottom', onMount(i) {htmx.process(i.popper); }, popperOptions: {strategy: 'fixed', modifiers: [{name: 'flip', options: {fallbackPlacements: ['top']}}]}, theme: 'dropdown', allowHTML: true, interactive:true}" @keydown.down.prevent.stop="tippy?.show();" @keydown.backspace="tippy?.hide(); value = {value: '', label: '' }" tabindex="0" x-init="{{ a_xinit }}" x-ref="input"><input{{ hidden_attrs|safe }}><div class="flex w-full justify-items-stretch"><span class="flex-grow text-left" x-text="value.label"></span><div class="w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center">{% include "templates/components/svg-drop-down.html" %}</div><div x-show="value.warning"><div class="peer absolute inline-flex items-center z-10 justify-center w-6 h-6 text-xs font-black text-white border-3 border-white rounded-full -top-2 -right-2 dark:border-gray-900 bg-red-300" x-tooltip="value.warning">!</div></div></div></a>{% endif %}<template x-ref="dropdown"><ul class="dropdown-contents bg-gray-100 dark:bg-gray-600  ring-1" @keydown.escape="$refs.input?.__x_tippy?.hide(); value = {value: '', label: '' };  " x-destroy="if ($refs.input) {$refs.input.focus();}"><input type="text" autofocus class="{{ search_class }}" x-model="search" placeholder="{{ placeholder }}" @change.stop="" @keydown.down.prevent="active ++; active = active >= elements.length - 1 ? elements.length - 1 : active" @keydown.up.prevent="active --; active = active < 0 ? 0 : active" @keydown.enter.prevent.stop="$refs.input?.__x_tippy?.hide(); value = elements.length > 0 ? $data.elements[active >= 0 ? active : 0] : {'value': '', label: ''}; $refs.input?.focus()" x-init="$el.focus(); $watch('search', s => { if($el.value.length > 2) {fetch(addQueryParam(baseUrl, 'q', s)).then(data=>data.json()).then(data => {elements = data; active=-1; $refs.input?.__x_tippy?.popperInstance?.update()}) }})"><div class="dropdown-options rounded-b-lg overflow-hidden"><template x-for="(element, index) in elements"><li><a class="px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-500 [&.active]:dark:bg-primary-700  text-gray-800  dark:text-gray-100" href="#" :class="active == index ? 'active' : ''" @mouseover="active = index" @mouseout="active = -1" @click.prevent="value = element; $refs.input?.__x_tippy?.hide(); setTimeout(() => $refs.input?.focus(), 10)" x-html="element.label"></a></li></template><template x-if="elements.length == 0"><li class="px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-500 text-gray-800  dark:text-gray-100 text-xs ">No results found</li></template></div></ul></template></div>
diff --git a/resources/templates/components/validated-field.html b/resources/templates/components/validated-field.html
new file mode 100644
index 00000000..96806adf
--- /dev/null
+++ b/resources/templates/components/validated-field.html
@@ -0,0 +1,6 @@
+{# Field wrapper with label + always-present error <p> (the errors- variant of field-).
+   `classes` already folds group / has-error / caller class via hh/add-class; `attrs`
+   carries any pass-through div attributes (the per-row location cell hangs its hx-* /
+   x-dispatch swap wiring here); `body` is the pre-rendered inner control HTML;
+   `errors_str` is the comma-joined string errors (empty when none). #}
+<div class="{{ classes }}"{{ attrs|safe }}>{% if label %}<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>{% endif %}{{ body|safe }}<p class="mt-2 text-xs text-red-600 dark:text-red-500 h-4">{{ errors_str }}</p></div>
diff --git a/resources/templates/transaction-edit/account-totals.html b/resources/templates/transaction-edit/account-totals.html
new file mode 100644
index 00000000..cdc8f1b8
--- /dev/null
+++ b/resources/templates/transaction-edit/account-totals.html
@@ -0,0 +1,3 @@
+{# Totals live in their own swappable <tbody> so an amount edit refreshes them with a
+   targeted swap, never replacing the input-bearing rows above (caret survives). #}
+<tbody id="account-totals">{{ rows|safe }}</tbody>
diff --git a/resources/templates/transaction-edit/approval-status.html b/resources/templates/transaction-edit/approval-status.html
new file mode 100644
index 00000000..58a7dc00
--- /dev/null
+++ b/resources/templates/transaction-edit/approval-status.html
@@ -0,0 +1 @@
+<div x-data="{{ x_data }}">{{ status_hidden|safe }}<div class="inline-flex rounded-md shadow-sm" role="group">{{ buttons|safe }}</div></div>
diff --git a/resources/templates/transaction-edit/details-panel.html b/resources/templates/transaction-edit/details-panel.html
new file mode 100644
index 00000000..6a584217
--- /dev/null
+++ b/resources/templates/transaction-edit/details-panel.html
@@ -0,0 +1,2 @@
+{# Read-only transaction summary shown in the modal's left side panel. #}
+<div class="p-4 space-y-4"><h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Details</h3><div class="space-y-3"><div><div class="text-xs font-medium text-gray-500">Amount</div><div class="text-sm font-medium text-gray-900">{{ amount }}</div></div><div><div class="text-xs font-medium text-gray-500">Date</div><div class="text-sm text-gray-900">{{ date }}</div></div><div><div class="text-xs font-medium text-gray-500">Bank Account</div><div class="text-sm text-gray-900">{{ bank_account }}</div></div><div><div class="text-xs font-medium text-gray-500">Post Date</div><div class="text-sm text-gray-900">{{ post_date }}</div></div><div><div class="text-xs font-medium text-gray-500">Description</div><div class="text-sm text-gray-900 truncate cursor-help" title="{{ description_original }}">{{ description_simple }}</div></div><div><div class="text-xs font-medium text-gray-500">Check Number</div><div class="text-sm text-gray-900">{{ check_number }}</div></div><div><div class="text-xs font-medium text-gray-500">Status</div><div class="text-sm text-gray-900">{{ status }}</div></div><div><div class="text-xs font-medium text-gray-500">Transaction Type</div><div class="text-sm text-gray-900">{{ type }}</div></div></div></div>
diff --git a/resources/templates/transaction-edit/edit-form.html b/resources/templates/transaction-edit/edit-form.html
new file mode 100644
index 00000000..64e7a2b6
--- /dev/null
+++ b/resources/templates/transaction-edit/edit-form.html
@@ -0,0 +1,4 @@
+{# Top-level plain form. The entity id rides in a hidden field; all other state is the
+   live form, re-derived against the entity each request (no serialized snapshot, no
+   wizard step-params). #}
+<form id="edit-form"{{ form_attrs|safe }}><input type="hidden" name="db/id" value="{{ db_id }}">{{ modal|safe }}</form>
diff --git a/resources/templates/transaction-edit/edit-modal.html b/resources/templates/transaction-edit/edit-modal.html
new file mode 100644
index 00000000..734ee8d1
--- /dev/null
+++ b/resources/templates/transaction-edit/edit-modal.html
@@ -0,0 +1,4 @@
+{# Modal card chrome (header / optional side panel / body / footer). Single-step, so
+   no timeline, no back/next nav -- just the Done button in the footer. Enter triggers
+   the save button via $refs.next. #}
+<div class="modal-card bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white  modal-content flex flex-col max-h-screen max-w-screen md:w-[950px] md:h-[650px] w-full h-full last-modal-step transition duration-150" @keydown.enter.prevent.stop="if ($refs.next) {$refs.next.click()}" x-data=""><div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 shrink-0">{{ head|safe }}</div><div class="flex shrink overflow-auto grow">{% if side_panel %}<div class="grow-0 w-64 bg-gray-50 border-r hidden md:block overflow-y-auto max-h-full">{{ side_panel|safe }}</div>{% endif %}<div class="px-6 py-2 space-y-6 overflow-y-scroll w-full shrink grow">{{ body|safe }}</div></div><div class="p-4 border-t">{{ footer|safe }}</div></div>
diff --git a/resources/templates/transaction-edit/invoice-option.html b/resources/templates/transaction-edit/invoice-option.html
new file mode 100644
index 00000000..ac85e955
--- /dev/null
+++ b/resources/templates/transaction-edit/invoice-option.html
@@ -0,0 +1 @@
+<div class="ml-3"><span class="block text-sm font-medium">{{ number }}</span><span class="block text-sm text-gray-500">{{ vendor }}</span><span class="block text-sm text-gray-500">{{ date }}</span><span class="block text-sm font-medium">{{ amount }}</span></div>
diff --git a/resources/templates/transaction-edit/linked-payment.html b/resources/templates/transaction-edit/linked-payment.html
new file mode 100644
index 00000000..7c695c62
--- /dev/null
+++ b/resources/templates/transaction-edit/linked-payment.html
@@ -0,0 +1 @@
+<div class="my-4 p-4 bg-blue-50 rounded"><h3 class="text-lg font-bold mb-2">Linked Payment{{ external_link|safe }}</h3><div class="space-y-2"><div class="flex justify-between"><div class="font-medium">Payment #</div><div>{{ number }}</div></div><div class="flex justify-between"><div class="font-medium">Vendor</div><div>{{ vendor }}</div></div><div class="flex justify-between"><div class="font-medium">Amount</div><div>{{ amount }}</div></div><div class="flex justify-between"><div class="font-medium">Status</div><div>{{ status }}</div></div><div class="flex justify-between"><div class="font-medium">Date</div><div>{{ date }}</div></div>{{ payment_id_hidden|safe }}<div class="mt-4"{{ unlink_attrs|safe }}>{{ unlink_button|safe }}</div></div></div>
diff --git a/resources/templates/transaction-edit/links-body.html b/resources/templates/transaction-edit/links-body.html
new file mode 100644
index 00000000..5332da45
--- /dev/null
+++ b/resources/templates/transaction-edit/links-body.html
@@ -0,0 +1,3 @@
+{# The single step's body: memo + the activeForm tab switcher (link payment / unpaid /
+   autopay / rule / manual) + the five x-show panels. Fragments are pre-rendered. #}
+<div class="space-y-1"><div>{{ memo_field|safe }}<div x-data="{{ x_data }}" @unlinked="canChange=true"><div class="flex space-x-2 mb-4">{{ action_hidden|safe }}{{ tabs|safe }}</div><div x-show="activeForm === 'link-payment'" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100">{{ panel_payment|safe }}</div><div x-show="activeForm === 'link-unpaid-invoices'" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100">{{ panel_unpaid|safe }}</div><div x-show="activeForm === 'link-autopay-invoices'" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100">{{ panel_autopay|safe }}</div><div x-show="activeForm === 'apply-rule'" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100">{{ panel_rule|safe }}</div><div x-show="activeForm === 'manual'" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100"><div>{{ panel_manual|safe }}</div></div></div></div></div>
diff --git a/resources/templates/transaction-edit/manual-coding.html b/resources/templates/transaction-edit/manual-coding.html
new file mode 100644
index 00000000..c9315560
--- /dev/null
+++ b/resources/templates/transaction-edit/manual-coding.html
@@ -0,0 +1,3 @@
+{# Vendor field (a change repopulates the default account via a whole-form swap) + either
+   the simple single-row coding or the advanced account grid. #}
+<div id="manual-coding-section">{{ mode_hidden|safe }}<div{{ vendor_changed_attrs|safe }}>{{ vendor_field|safe }}</div>{% if is_simple %}<div x-data="{{ simple_xdata }}">{{ simple_mode|safe }}</div>{% else %}<div>{{ toggle_link|safe }}{{ accounts_field|safe }}</div>{% endif %}</div>
diff --git a/resources/templates/transaction-edit/panel-empty.html b/resources/templates/transaction-edit/panel-empty.html
new file mode 100644
index 00000000..78e81f16
--- /dev/null
+++ b/resources/templates/transaction-edit/panel-empty.html
@@ -0,0 +1 @@
+<div class="text-center py-4 text-gray-500">{{ message }}</div>
diff --git a/resources/templates/transaction-edit/panel-list.html b/resources/templates/transaction-edit/panel-list.html
new file mode 100644
index 00000000..0bfe7219
--- /dev/null
+++ b/resources/templates/transaction-edit/panel-list.html
@@ -0,0 +1,3 @@
+{# Shared shell for the autopay/unpaid/rule match panels: heading + action hidden +
+   prompt label + a radio-card of options. #}
+<div><h3 class="text-lg font-bold mb-4">{{ heading }}</h3>{{ action_hidden|safe }}<div class="space-y-2"><label class="block text-sm font-medium mb-1">{{ prompt }}</label>{{ radio|safe }}</div></div>
diff --git a/resources/templates/transaction-edit/payment-matches.html b/resources/templates/transaction-edit/payment-matches.html
new file mode 100644
index 00000000..6d1ff5d5
--- /dev/null
+++ b/resources/templates/transaction-edit/payment-matches.html
@@ -0,0 +1,2 @@
+{# Outer wrapper for the payment tab; the unlink-payment route swaps #payment-matches. #}
+<div id="payment-matches">{{ inner|safe }}</div>
diff --git a/resources/templates/transaction-edit/rule-option.html b/resources/templates/transaction-edit/rule-option.html
new file mode 100644
index 00000000..1ecaaa23
--- /dev/null
+++ b/resources/templates/transaction-edit/rule-option.html
@@ -0,0 +1 @@
+<div class="ml-3"><span class="block text-sm font-medium">{{ note }}</span><span class="block text-sm text-gray-500">{{ description }}</span></div>
diff --git a/resources/templates/transaction-edit/simple-mode.html b/resources/templates/transaction-edit/simple-mode.html
new file mode 100644
index 00000000..aa72b073
--- /dev/null
+++ b/resources/templates/transaction-edit/simple-mode.html
@@ -0,0 +1,4 @@
+{# Simple mode: a single account row (account typeahead + location select) rendered at a
+   fixed index 0, plus the link to switch to the advanced grid. Selecting the account
+   swaps just the location cell (#simple-account-location). #}
+<div><span>{{ row_id_hidden|safe }}<div class="flex gap-2 mt-2">{{ account_field|safe }}<div id="simple-account-location">{{ location_field|safe }}</div>{{ amount_hidden|safe }}</div></span><div class="mt-1"><a class="text-sm text-blue-600 hover:underline cursor-pointer"{{ toggle_attrs|safe }}>Switch to advanced mode</a></div></div>
diff --git a/resources/templates/transaction-edit/transitioner.html b/resources/templates/transaction-edit/transitioner.html
new file mode 100644
index 00000000..f96ae53d
--- /dev/null
+++ b/resources/templates/transaction-edit/transitioner.html
@@ -0,0 +1,3 @@
+{# Wrapper the modal stack expects around the opened form (the wizard transition hooks
+   are gone -- there is only one step). #}
+<div id="transitioner" class="flex-1">{{ body|safe }}</div>
diff --git a/src/clj/auto_ap/ssr/components/selmer.clj b/src/clj/auto_ap/ssr/components/selmer.clj
new file mode 100644
index 00000000..1226145a
--- /dev/null
+++ b/src/clj/auto_ap/ssr/components/selmer.clj
@@ -0,0 +1,292 @@
+(ns auto-ap.ssr.components.selmer
+  "Selmer-rendered versions of the shared SSR components used by the Transaction Edit
+   modal (see .claude/skills/ssr-form-migration). Each wrapper assembles a plain-data
+   context and renders its own template under resources/templates/components/ via the
+   interop bridge -- the element structure lives entirely in the .html templates; the
+   only Clojure is data assembly. Dynamic HTMX/Alpine attributes (which vary per call
+   site) are serialized to an attribute string by `attrs->str` and injected with
+   {{ attrs|safe }}, so the templates stay free of per-attribute {% if %} ladders.
+
+   Reuses class logic from auto-ap.ssr.components.inputs so output matches the Hiccup
+   components byte-for-byte modulo Tailwind class ordering (verify by string-match +
+   e2e, never byte-parity -- see selmer-conventions.md)."
+  (:require
+   [auto-ap.ssr.components.buttons :as btn]
+   [auto-ap.ssr.components.inputs :as inputs]
+   [auto-ap.ssr.hiccup-helper :as hh]
+   [auto-ap.ssr.hx :as hx]
+   [auto-ap.ssr.selmer :as sel]
+   [clojure.string :as str]
+   [hiccup.util :as hu]))
+
+(defn- attr-name [k]
+  (if (keyword? k) (subs (str k) 1) (str k)))
+
+(defn attrs->str
+  "Serialize an attribute map to an HTML attribute string with a leading space, so it
+   concatenates after fixed template attributes: <input type=\"text\"{{ attrs|safe }}>.
+   nil/false values are dropped, true renders a bare boolean attribute, everything else
+   renders name=\"escaped-value\". Mirrors how hiccup2 emits attributes."
+  [m]
+  (->> m
+       (keep (fn [[k v]]
+               (cond
+                 (nil? v) nil
+                 (false? v) nil
+                 (true? v) (str " " (attr-name k))
+                 :else (str " " (attr-name k) "=\""
+                            (hu/escape-html (if (keyword? v) (name v) (str v)))
+                            "\""))))
+       (apply str)))
+
+(defn render
+  "Render a component partial and trim outer whitespace (so {# comments #} and the
+   file's trailing newline don't leak into the embedding tree). Returns a raw-wrapped
+   string ready to drop into Hiccup or another Selmer context value."
+  [template ctx]
+  (sel/raw (str/trim (sel/render template ctx))))
+
+(defn- body->html
+  "Render child content (Hiccup vectors and/or raw Selmer fragments) to an HTML string."
+  [body]
+  (->> (if (sequential? body) body [body])
+       (remove nil?)
+       (map sel/hiccup->html)
+       (apply str)))
+
+;; --- leaf inputs -----------------------------------------------------------------
+
+(defn hidden [{:keys [name value] :as params}]
+  (render "templates/components/hidden.html"
+          {:attrs (attrs->str (merge {:name name}
+                                     (when (some? value) {:value value})
+                                     (dissoc params :name :value)))}))
+
+(defn text-input [{:keys [size] :as params}]
+  (let [attrs (-> params
+                  (dissoc :error? :size)
+                  (assoc :type "text" :autocomplete "off")
+                  (update :class #(-> ""
+                                      (hh/add-class inputs/default-input-classes)
+                                      (hh/add-class %)))
+                  (update :class #(str % (inputs/use-size size))))]
+    (render "templates/components/text-input.html" {:attrs (attrs->str attrs)})))
+
+(defn money-input [{:keys [size] :as params}]
+  (let [attrs (-> params
+                  (dissoc :size)
+                  (update :class (fnil hh/add-class "") inputs/default-input-classes)
+                  (update :class hh/add-class "appearance-none text-right")
+                  (update :class #(str % (inputs/use-size size)))
+                  (assoc :type "number" :step "0.01"))]
+    (render "templates/components/money-input.html" {:attrs (attrs->str attrs)})))
+
+;; --- field wrapper ---------------------------------------------------------------
+
+(defn validated-field
+  "Selmer port of com/validated-field (the errors- variant of field-): label + body +
+   an always-present error <p>. Pass-through attrs land on the wrapping div (the account
+   row's location cell hangs its swap wiring here)."
+  [{:keys [label errors] :as params} & body]
+  (let [classes (cond-> (or (:class params) "")
+                  (sequential? errors) (hh/add-class "has-error")
+                  :always (hh/add-class "group"))
+        attrs (dissoc params :label :errors :error-source :error-key :class)
+        errors-str (when (sequential? errors)
+                     (str/join ", " (filter string? errors)))]
+    (render "templates/components/validated-field.html"
+            {:label label
+             :classes classes
+             :attrs (attrs->str attrs)
+             :body (body->html body)
+             :errors_str (or errors-str "")})))
+
+;; --- buttons / badges / links ----------------------------------------------------
+
+(defn badge [{:keys [color] :as params} & children]
+  (let [classes (-> (hh/add-class
+                     "absolute inline-flex items-center z-10 justify-center w-6 h-6 text-xs font-black text-white \n                               border-3 border-white rounded-full -top-2 -right-2 dark:border-gray-900"
+                     (:class params))
+                    (hh/add-class (or (some-> color (#(str "bg-" % "-300"))) "bg-red-300")))]
+    (render "templates/components/badge.html"
+            {:classes classes
+             :attrs (attrs->str (dissoc params :class))
+             :body (body->html children)})))
+
+(defn link [{:keys [class] :as params} & children]
+  (render "templates/components/link.html"
+          {:classes (str class " font-medium text-blue-600 dark:text-blue-500 hover:underline cursor-pointer")
+           :attrs (attrs->str (dissoc params :class))
+           :body (body->html children)}))
+
+(defn button [{:keys [color disabled minimal-loading?] :as params} & children]
+  (let [classes (cond-> (:class params)
+                  true (str " focus:ring-4 font-bold rounded-lg text-xs p-3 text-center mr-2 inline-flex items-center relative justify-center  disabled:opacity-50"
+                            (btn/bg-colors color disabled))
+                  (not disabled) (str " hover:scale-105 transition duration-100")
+                  disabled (str " cursor-not-allowed")
+                  (some? color) (str " text-white ")
+                  (nil? color) (str " bg-white dark:bg-gray-600 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100 font-medium border border-gray-300 dark:border-gray-700"))]
+    (render "templates/components/button.html"
+            {:classes classes
+             :attrs (attrs->str (dissoc params :class))
+             :loading_label (not minimal-loading?)
+             :body (body->html children)})))
+
+(defn a-button [{:keys [color disabled] :as params} & children]
+  (let [indicator? (:indicator? params true)
+        classes (cond-> (:class params)
+                  true (str " focus:ring-4 font-bold rounded-lg text-xs p-3 text-center mr-2 inline-flex items-center hover:scale-105 transition duration-100 justify-center")
+                  (= :secondary color) (str " text-white  bg-blue-500 hover:bg-blue-600 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700")
+                  (= :primary color) (str " text-white bg-green-500 hover:bg-green-600 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 ")
+                  (= :secondary-light color) (str " text-blue-800 bg-white-200 border-gray-100 border hover:bg-blue-100 focus:ring-blue-100 dark:bg-blue-400 dark:hover:bg-blue-800 ")
+                  (some? color) (str " text-white " (btn/bg-colors color disabled))
+                  (nil? color) (str " bg-white dark:bg-gray-600 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100 font-medium border border-gray-300 dark:border-gray-700"))]
+    (render "templates/components/a-button.html"
+            {:classes classes
+             :attrs (attrs->str (-> (dissoc params :class)
+                                    (assoc :tabindex 0 :href (:href params "#"))))
+             :indicator indicator?
+             :body (body->html children)})))
+
+(defn a-icon-button [{:keys [class] :as params} & children]
+  (let [class-str (or class "")
+        has-padding? (re-find #"\bp[xy]?-\d+(\.\d+)?\b" class-str)
+        classes (str class-str (if has-padding? "" " p-3")
+                     " inline-flex items-center justify-center bg-white dark:bg-gray-600 items-center text-sm font-medium border border-gray-300 dark:border-gray-700 text-center text-gray-500 hover:text-gray-800 rounded-lg dark:text-gray-400 dark:hover:text-gray-100")]
+    (render "templates/components/a-icon-button.html"
+            {:classes classes
+             :attrs (attrs->str (-> (dissoc params :class)
+                                    (assoc :href (or (:href params) ""))))
+             :body (body->html children)})))
+
+(defn button-group-button [{:keys [size] :or {size :normal} :as params} & children]
+  (let [classes (cond-> (:class params)
+                  true (str " font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-green-700 focus:text-green-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-green-500 dark:focus:text-white disabled:opacity-50")
+                  (= :small size) (str " text-xs px-3 py-2")
+                  (= :normal size) (str " text-sm px-4 py-2"))]
+    (render "templates/components/button-group-button.html"
+            {:classes classes
+             :attrs (attrs->str (-> (dissoc params :class :size)
+                                    (assoc :type (or (:type params) "button"))))
+             :body (body->html children)})))
+
+(defn button-group [{:keys [name]} & children]
+  (render "templates/components/button-group.html"
+          {:name name
+           :body (body->html children)}))
+
+;; --- radio-card ------------------------------------------------------------------
+
+(defn radio-card
+  "Selmer port of com/radio-card. NB: the Hiccup radio-card- has a dangling [:h3 title]
+   the let discards, so only the <ul> renders -- reproduced here. Only the documented
+   htmx keys ride onto each <input> (the same select-keys filter; :hx-vals / :hx-select
+   are intentionally dropped, matching existing behavior)."
+  [{:keys [options name title size orientation width] :or {size :medium width "w-48"}
+    selected-value :value :as params}]
+  (let [htmx-attrs (select-keys params [:hx-post :hx-target :hx-swap :hx-include :hx-trigger])
+        sel (cond-> selected-value (keyword? selected-value) clojure.core/name)
+        ul-class (cond-> " text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                   (= orientation :horizontal) (-> (hh/add-class "flex gap-2 flex-wrap")
+                                                   (hh/remove-wildcard ["w-" "rounded-lg" "border" "bg-"]))
+                   :always (str " " width " "))
+        li-class (cond-> "w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600"
+                   (= orientation :horizontal) (-> (hh/remove-wildcard ["w-full" "rounded-"])
+                                                   (hh/add-class "w-auto shrink-0 block rounded-lg border border-gray-200  dark:border-gray-600 px-3")))
+        div-class (cond-> "flex items-center"
+                    (not= orientation :horizontal) (hh/add-class "pl-3"))
+        input-class (cond-> "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
+                      (= size :small) (str " text-xs")
+                      (= size :medium) (str " text-sm"))
+        label-class (cond-> "w-full ml-2 font-medium text-gray-900 dark:text-gray-300"
+                      (= size :small) (str " text-xs py-2")
+                      (= size :medium) (str " text-sm py-3")
+                      (= orientation :horizontal) (hh/remove-class "w-full"))]
+    (render "templates/components/radio-card.html"
+            {:ul_class ul-class :li_class li-class :div_class div-class
+             :input_class input-class :label_class label-class
+             :name name
+             :input_attrs (attrs->str htmx-attrs)
+             :options (for [{:keys [value content]} options]
+                        {:id (str "list-" name "-" value)
+                         :value value
+                         :checked (= sel value)
+                         :content (body->html content)})})))
+
+;; --- data grid -------------------------------------------------------------------
+
+(defn data-grid-header [params & body]
+  (render "templates/components/data-grid-header.html"
+          {:klass (:class params)
+           :click (format "$dispatch('sorted', {key: '%s'})" (:sort-key params))
+           :sort_key (:sort-key params)
+           :attrs (attrs->str (cond-> {} (:style params) (assoc :style (:style params))))
+           :body (body->html body)}))
+
+(defn data-grid-row [params & body]
+  (render "templates/components/data-grid-row.html"
+          {:classes (str (:class params) " border-b dark:border-gray-600 group hover:bg-gray-100 dark:hover:bg-gray-700")
+           :attrs (attrs->str (dissoc params :class))
+           :body (body->html body)}))
+
+(defn data-grid-cell [params & body]
+  (render "templates/components/data-grid-cell.html"
+          {:klass (:class params)
+           :attrs (attrs->str (dissoc params :class))
+           :body (body->html body)}))
+
+(defn data-grid
+  "Table shell: outer scroll div > table > thead(headers) > tbody(rows) + optional
+   footer-tbody. `headers`, `rows`, and `footer-tbody` are pre-rendered fragments."
+  [{:keys [headers footer-tbody] :as params} & rows]
+  (render "templates/components/data-grid.html"
+          {:table_class "w-full text-sm text-left text-gray-500 dark:text-gray-400 shrink"
+           :table_attrs (attrs->str (dissoc params :headers :thead-params :footer-tbody))
+           :thead_class "text-xs text-gray-800 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 group-[.raw]:sticky group-[.raw]:z-10 group-[.raw]:top-0"
+           :headers (body->html headers)
+           :rows (body->html rows)
+           :footer_tbody (when footer-tbody (body->html footer-tbody))}))
+
+;; --- modal + typeahead -----------------------------------------------------------
+
+(defn modal [{:as params} & children]
+  (render "templates/components/modal.html"
+          {:classes (hh/add-class "" (:class params ""))
+           :attrs (attrs->str (dissoc params :handle-unexpected-error? :class))
+           :body (body->html children)}))
+
+(defn typeahead
+  "Selmer port of com/typeahead. Resolves the initial {value,label} server-side via
+   value-fn/content-fn (DB lookups), builds the Alpine x-data, and serializes the
+   hidden posting-input attributes. Preserves every tippy?. null-guard."
+  [{:keys [value value-fn content-fn x-model x-init id class placeholder disabled url]
+    :as params}]
+  (let [vf (or value-fn identity)
+        cf (or content-fn identity)
+        vval (vf value)
+        vlabel (cf value)
+        x-data (hx/json {:baseUrl (str url)
+                         :value {:value vval :label vlabel}
+                         :tippy nil :search "" :active -1
+                         :elements (if vval [{:value vval :label vlabel}] [])})
+        a-class (-> (hh/add-class (or class "") inputs/default-input-classes)
+                    (hh/add-class "cursor-pointer"))
+        a-xinit (str "$nextTick(() => tippy = $el.__x_tippy); " x-init)
+        search-class (-> (or class "")
+                         (hh/add-class inputs/default-input-classes)
+                         (hh/replace-wildcard ["rounded" "border"] "border-bottom bg-gray-100 rounded-t-lg w-full"))
+        hidden-attrs (-> params
+                         (dissoc :class :value-fn :content-fn :placeholder :x-model)
+                         (assoc "x-ref" "hidden" :type "hidden" ":value" "value.value"
+                                :x-init "$watch('value', v => { $el.value = (v && v.value != null) ? v.value : ''; $nextTick(() => $dispatch('change')); }); "))]
+    (render "templates/components/typeahead.html"
+            {:x_data x-data
+             :x_model x-model
+             :key (when id (str id "--" vval))
+             :disabled disabled
+             :a_class a-class
+             :a_xinit a-xinit
+             :search_class search-class
+             :placeholder placeholder
+             :hidden_attrs (attrs->str hidden-attrs)})))
diff --git a/src/clj/auto_ap/ssr/transaction/edit.clj b/src/clj/auto_ap/ssr/transaction/edit.clj
index fdd84fc8..40a50610 100644
--- a/src/clj/auto_ap/ssr/transaction/edit.clj
+++ b/src/clj/auto_ap/ssr/transaction/edit.clj
@@ -1,6 +1,5 @@
 (ns auto-ap.ssr.transaction.edit
   (:require
-   [auto-ap.cursor :as cursor]
    [auto-ap.datomic
     :refer [audit-transact conn pull-attr pull-ref]]
    [auto-ap.datomic.accounts :as d-accounts]
@@ -19,21 +18,20 @@
    [auto-ap.rule-matching :as rm]
    [auto-ap.solr :as solr]
    [auto-ap.ssr-routes :as ssr-routes]
-   [auto-ap.ssr.common-handlers :refer [add-new-entity-handler]]
    [auto-ap.ssr.components :as com]
    [auto-ap.ssr.components.inputs :as inputs]
+   [auto-ap.ssr.components.selmer :as sc]
    [auto-ap.ssr.grid-page-helper :as helper]
    [auto-ap.ssr.transaction.common :refer [grid-page]]
-   [auto-ap.ssr.components.multi-modal :as mm]
-   [auto-ap.ssr.form-cursor :as fc]
    [auto-ap.ssr.hx :as hx]
+   [auto-ap.ssr.nested-form-params :refer [wrap-nested-form-params]]
    [auto-ap.ssr.selmer :as sel]
-   [auto-ap.ssr.svg :as svg]
    [auto-ap.ssr.utils
-    :refer [->db-id apply-middleware-to-all-handlers check-allowance
-            check-location-belongs entity-id form-validation-error
-            html-response modal-response ref->enum-schema strip temp-id
-            wrap-entity wrap-schema-enforce]]
+    :refer [->db-id apply-middleware-to-all-handlers assert-schema
+            check-allowance check-location-belongs entity-id
+            form-validation-error html-response main-transformer
+            modal-response path->name2 ref->enum-schema strip temp-id
+            wrap-form-4xx-2 wrap-schema-enforce]]
    [auto-ap.time :as atime]
    [bidi.bidi :as bidi]
    [clj-time.coerce :as coerce]
@@ -45,7 +43,7 @@
    [iol-ion.tx :refer [random-tempid]]
    [malli.core :as mc]))
 
-(declare render-full-form)
+(declare render-full-form wrap-div)
 
 (def transaction-approval-status
   {:transaction-approval-status/unapproved "Unapproved"
@@ -182,36 +180,52 @@
 
 (defn account-typeahead*
   [{:keys [name value client-id x-model]}]
-  [:div.flex.flex-col
-   (com/typeahead {:name name
-                   :placeholder "Search..."
-                   :url (hu/url (bidi/path-for ssr-routes/only-routes :account-search)
-                                (cond-> {:purpose "transaction"}
-                                  client-id (assoc :client-id client-id)))
-                   :id name
-                   :x-model x-model
-                   :value value
-                   :content-fn (fn [value]
-                                 (:account/name (d-accounts/clientize (dc/pull (dc/db conn) d-accounts/default-read value)
-                                                                      client-id)))})])
+  (wrap-div
+   "flex flex-col"
+   (sc/typeahead {:name name
+                  :placeholder "Search..."
+                  :url (hu/url (bidi/path-for ssr-routes/only-routes :account-search)
+                               (cond-> {:purpose "transaction"}
+                                 client-id (assoc :client-id client-id)))
+                  :id name
+                  :x-model x-model
+                  :value value
+                  :content-fn (fn [value]
+                                (:account/name (d-accounts/clientize (dc/pull (dc/db conn) d-accounts/default-read value)
+                                                                     client-id)))})))
 
-(defn- account-field-name
-  "Explicit form-field name for account row `index`, field `field` -- the same string
-   the form cursor produces at path [:step-params :transaction/accounts index field]
-   (via path->name2), without faking a deep cursor to get there."
-  [index field]
-  (str "step-params[transaction/accounts][" index "]["
-       (if (keyword? field)
-         (str (when (namespace field) (str (namespace field) "/")) (name field))
-         field)
-       "]"))
+(def ^:dynamic *errors*
+  "Humanized form errors for the current render, keyed by edit-form-schema paths (e.g.
+   {:transaction/accounts {0 {:transaction-account/account [\"...\"]}}}). Bound by
+   render-form from the request's :form-errors. Plain map -- no wizard, no cursor."
+  {})
 
-(defn- account-field-errors
-  "Errors for account row `index`, field `field`, read straight from the form errors
-   at the same path the cursor would walk -- avoids re-rooting a cursor to look them up."
-  [index field]
-  (when (bound? #'fc/*form-errors*)
-    (get-in fc/*form-errors* [:step-params :transaction/accounts index field])))
+(defn fname
+  "Form-field name for a schema path, e.g. (fname :transaction/accounts 0
+   :transaction-account/account) => \"transaction/accounts[0][transaction-account/account]\".
+   No step-params prefix: posted fields decode straight into edit-form-schema."
+  [& path]
+  (apply path->name2 path))
+
+(defn ferr
+  "Field errors at a schema path, read from *errors* (no step-params prefix)."
+  [& path]
+  (get-in *errors* (vec path)))
+
+(defn- account-field-name [index field]
+  (fname :transaction/accounts index field))
+
+(defn- account-field-errors [index field]
+  (ferr :transaction/accounts index field))
+
+(defn wrap-div
+  "Trivial structural wrapper <div class=...> around already-rendered HTML fragments.
+   Plain-string composition (not Hiccup) -- the substantive markup lives in Selmer
+   component templates; this just nests their output."
+  [class & body]
+  (sel/raw (str "<div class=\"" class "\">"
+                (apply str (map str (remove nil? body)))
+                "</div>")))
 
 (defn simple-mode-fields*
   "Renders the simple-mode account + location row and the toggle-to-advanced link.
@@ -236,52 +250,47 @@
         row-id (or (:db/id existing-row) (str (java.util.UUID/randomUUID)))
         total (Math/abs (or (-> request :entity :transaction/amount)
                             (:transaction/amount snapshot)
-                            0.0))]
-    [:div
-     [:span
-      (com/hidden {:name (account-field-name 0 :db/id)
-                   :value row-id})
-      [:div.flex.gap-2.mt-2
-       (com/validated-field
-        {:label "Account"
-         :errors (account-field-errors 0 :transaction-account/account)}
-        [:div.w-72
-         (account-typeahead* {:value account-val
-                              :client-id client-id
-                              :name (account-field-name 0 :transaction-account/account)
-                              :x-model "simpleAccountId"})])
-       ;; Selecting the account only affects the valid Location options, so the
-       ;; change swaps just this cell -- nothing else needs to re-render.
-       [:div {:id "simple-account-location"}
-        (com/validated-field
-         {:label "Location"
-          :errors (account-field-errors 0 :transaction-account/location)
-          :x-hx-val:account-id "simpleAccountId"
-          :hx-vals (hx/json (cond-> {:name (account-field-name 0 :transaction-account/location)}
-                              client-id (assoc :client-id client-id)))
-          :x-dispatch:changed "simpleAccountId"
-          :hx-trigger "changed"
-          :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-          :hx-target "#simple-account-location"
-          :hx-select "#simple-account-location"
-          :hx-swap "outerHTML"
-          :hx-include "closest form"}
-         (location-select*
-          {:name (account-field-name 0 :transaction-account/location)
-           :account-location (:account/location account-id)
-           :client-locations (pull-attr (dc/db conn) :client/locations client-id)
-           :value location-val}))]
-       (com/hidden {:name (account-field-name 0 :transaction-account/amount)
-                    :value total})]]
-     [:div.mt-1
-      [:a.text-sm.text-blue-600.hover:underline.cursor-pointer
-       {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-        :hx-vals (hx/json {:op "toggle-mode"})
-        :hx-include "closest form"
-        :hx-target "#wizard-form"
-        :hx-select "#wizard-form"
-        :hx-swap "outerHTML"}
-       "Switch to advanced mode"]]]))
+                            0.0))
+        location-attrs {:x-hx-val:account-id "simpleAccountId"
+                        :hx-vals (hx/json (cond-> {:name (account-field-name 0 :transaction-account/location)}
+                                            client-id (assoc :client-id client-id)))
+                        :x-dispatch:changed "simpleAccountId"
+                        :hx-trigger "changed"
+                        :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                        :hx-target "#simple-account-location"
+                        :hx-select "#simple-account-location"
+                        :hx-swap "outerHTML"
+                        :hx-include "closest form"}]
+    (sel/render->hiccup
+     "templates/transaction-edit/simple-mode.html"
+     {:row_id_hidden (str (sc/hidden {:name (account-field-name 0 :db/id) :value row-id}))
+      ;; Selecting the account only affects the valid Location options, so the change
+      ;; swaps just the #simple-account-location cell -- nothing else re-renders.
+      :account_field (str (sc/validated-field
+                           {:label "Account"
+                            :errors (account-field-errors 0 :transaction-account/account)}
+                           (wrap-div "w-72"
+                                     (account-typeahead* {:value account-val
+                                                          :client-id client-id
+                                                          :name (account-field-name 0 :transaction-account/account)
+                                                          :x-model "simpleAccountId"}))))
+      :location_field (str (sc/validated-field
+                            (merge {:label "Location"
+                                    :errors (account-field-errors 0 :transaction-account/location)}
+                                   location-attrs)
+                            (location-select*
+                             {:name (account-field-name 0 :transaction-account/location)
+                              :account-location (:account/location account-id)
+                              :client-locations (pull-attr (dc/db conn) :client/locations client-id)
+                              :value location-val})))
+      :amount_hidden (str (sc/hidden {:name (account-field-name 0 :transaction-account/amount)
+                                      :value total}))
+      :toggle_attrs (sc/attrs->str {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                                    :hx-vals (hx/json {:op "toggle-mode"})
+                                    :hx-include "closest form"
+                                    :hx-target "#edit-form"
+                                    :hx-select "#edit-form"
+                                    :hx-swap "outerHTML"})})))
 
 (defn- manual-mode-initial
   "Returns :simple or :advanced based on existing account row count."
@@ -291,79 +300,78 @@
       :advanced
       :simple)))
 
-(defn transaction-account-row* [{:keys [value client-id amount-mode total index]}]
-  (com/data-grid-row
-   (-> {:class "account-row"
-        :id (str "account-row-" index)
-        :x-data (hx/json {:show (boolean (not (fc/field-value (:new? value))))
-                          :accountId (fc/field-value (:transaction-account/account value))})
-        :data-key "show"
-        :x-ref "p"}
-       hx/alpine-mount-then-appear)
-   (fc/with-field :db/id
-     (com/hidden {:name (fc/field-name)
-                  :value (fc/field-value)}))
-   (fc/with-field :transaction-account/account
-     (com/data-grid-cell
+(defn transaction-account-row*
+  "One row of the advanced account grid, from a plain account map (no cursor). The
+   location cell swaps just itself (#account-location-<index>, Rule 2); the amount cell
+   swaps only #account-totals (Rule 4); remove swaps the whole #edit-form (Rule 3)."
+  [{:keys [value client-id amount-mode index]}]
+  (let [account-val (let [av (:transaction-account/account value)]
+                      (if (map? av) (:db/id av) av))
+        location-attrs {:x-hx-val:account-id "accountId"
+                        :hx-vals (hx/json (cond-> {:name (account-field-name index :transaction-account/location)}
+                                            client-id (assoc :client-id client-id)))
+                        :x-dispatch:changed "accountId"
+                        :hx-trigger "changed"
+                        :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                        :hx-target (str "#account-location-" index)
+                        :hx-select (str "#account-location-" index)
+                        :hx-swap "outerHTML"
+                        :hx-include "closest form"}
+        amount-attrs {:name (account-field-name index :transaction-account/amount)
+                      :id (str "account-amount-" index)
+                      :class "w-16 account-amount-field"
+                      :value (:transaction-account/amount value)
+                      :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                      :hx-target "#account-totals"
+                      :hx-select "#account-totals"
+                      :hx-swap "outerHTML"
+                      :hx-trigger "keyup changed delay:300ms"
+                      :hx-include "closest form"}]
+    (sc/data-grid-row
+     (-> {:class "account-row"
+          :id (str "account-row-" index)
+          :x-data (hx/json {:show (boolean (not (:new? value)))
+                            :accountId account-val})
+          :data-key "show"
+          :x-ref "p"}
+         hx/alpine-mount-then-appear)
+     (sc/hidden {:name (account-field-name index :db/id)
+                 :value (:db/id value)})
+     (sc/data-grid-cell
       {}
-      (com/validated-field
-       {:errors (fc/field-errors)}
-       (account-typeahead* {:value (fc/field-value)
+      (sc/validated-field
+       {:errors (account-field-errors index :transaction-account/account)}
+       (account-typeahead* {:value account-val
                             :client-id client-id
-                            :name (fc/field-name)
-                            :x-model "accountId"}))))
-   (fc/with-field :transaction-account/location
-     (com/data-grid-cell
+                            :name (account-field-name index :transaction-account/account)
+                            :x-model "accountId"})))
+     (sc/data-grid-cell
       {:id (str "account-location-" index)}
-      ;; Selecting an account only affects this row's valid Location options, so the
-      ;; change swaps just this cell -- nothing else needs to re-render.
-      (com/validated-field
-       {:errors (fc/field-errors)
-        :x-hx-val:account-id "accountId"
-        :hx-vals (hx/json (cond-> {:name (fc/field-name)}
-                            client-id (assoc :client-id client-id)))
-        :x-dispatch:changed "accountId"
-        :hx-trigger "changed"
-        :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-        :hx-target (str "#account-location-" index)
-        :hx-select (str "#account-location-" index)
-        :hx-swap "outerHTML"
-        :hx-include "closest form"}
-       (location-select* {:name (fc/field-name)
-                          :account-location (:account/location (cond->> (:transaction-account/account @value)
-                                                                 (nat-int? (:transaction-account/account @value)) (dc/pull (dc/db conn)
-                                                                                                                           '[:account/location])))
+      (sc/validated-field
+       (merge {:errors (account-field-errors index :transaction-account/location)}
+              location-attrs)
+       (location-select* {:name (account-field-name index :transaction-account/location)
+                          :account-location (:account/location (when (nat-int? account-val)
+                                                                 (dc/pull (dc/db conn) '[:account/location] account-val)))
                           :client-locations (pull-attr (dc/db conn) :client/locations client-id)
-                          :value (fc/field-value)}))))
-   (fc/with-field :transaction-account/amount
-     (com/data-grid-cell
+                          :value (:transaction-account/location value)})))
+     (sc/data-grid-cell
       {}
-      (com/validated-field
-       {:errors (fc/field-errors)}
-       (let [amount-attrs {:name (fc/field-name)
-                           :id (str "account-amount-" index)
-                           :class "w-16 account-amount-field"
-                           :value (fc/field-value)
-                           :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-                           ;; Typing an amount posts the whole form but swaps back only the
-                           ;; #account-totals tbody -- a sibling of the input-bearing rows, so
-                           ;; the amount input is never replaced and the caret survives.
-                           :hx-target "#account-totals"
-                           :hx-select "#account-totals"
-                           :hx-swap "outerHTML"
-                           :hx-trigger "keyup changed delay:300ms"
-                           :hx-include "closest form"}]
-         (if (= "%" amount-mode)
-           (com/text-input (assoc amount-attrs :type "number" :step "0.01"))
-           (com/money-input amount-attrs))))))
-   (com/data-grid-cell {:class "align-top"}
-                       (com/a-icon-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-                                           :hx-vals (hx/json {:op "remove-account" :row-index (or index 0)})
-                                           :hx-target "#wizard-form"
-                                           :hx-select "#wizard-form"
-                                           :hx-swap "outerHTML"
-                                           :hx-include "closest form"
-                                           :class "account-remove-action"} svg/x))))
+      (sc/validated-field
+       {:errors (account-field-errors index :transaction-account/amount)}
+       (if (= "%" amount-mode)
+         (sc/text-input (assoc amount-attrs :type "number" :step "0.01"))
+         (sc/money-input amount-attrs))))
+     (sc/data-grid-cell
+      {:class "align-top"}
+      (sc/a-icon-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                         :hx-vals (hx/json {:op "remove-account" :row-index (or index 0)})
+                         :hx-target "#edit-form"
+                         :hx-select "#edit-form"
+                         :hx-swap "outerHTML"
+                         :hx-include "closest form"
+                         :class "account-remove-action"}
+                        (sc/render "templates/components/svg-x.html" {}))))))
 
 (defn location-select [{{:keys [name account-id client-id value] :as qp} :query-params}]
   (html-response (location-select* {:name name
@@ -396,9 +404,9 @@
                                (-> request :multi-form-state :snapshot :transaction/amount)
                                0.0))
                  total)]
-    [:span {:class (when-not (dollars= 0.0 balance)
-                     "text-red-300")}
-     (format "$%,.2f" balance)]))
+    (sel/raw (str "<span"
+                  (when-not (dollars= 0.0 balance) " class=\"text-red-300\"")
+                  ">" (format "$%,.2f" balance) "</span>"))))
 
 (defn ->percentage [amount total]
   (when (and amount total (not= total 0))
@@ -427,69 +435,79 @@
              ["%" "$"] (percentages->dollars amounts total)
              amounts)))))
 
+(defn- bold-right [label]
+  (sel/raw (str "<span class=\"font-bold text-right\">" label "</span>")))
+
+(defn account-totals-tbody*
+  "The separately-swappable totals <tbody> (Rule 4 target #account-totals)."
+  [request total]
+  (sel/render->hiccup
+   "templates/transaction-edit/account-totals.html"
+   {:rows (str
+           (sc/data-grid-row {:class "account-total-row"}
+                             (sc/data-grid-cell {})
+                             (sc/data-grid-cell {:class "text-right"} (bold-right "TOTAL"))
+                             (sc/data-grid-cell {:id "total" :class "text-right"} (account-total* request))
+                             (sc/data-grid-cell {}))
+           (sc/data-grid-row {:class "account-balance-row"}
+                             (sc/data-grid-cell {})
+                             (sc/data-grid-cell {:class "text-right"} (bold-right "BALANCE"))
+                             (sc/data-grid-cell {:id "balance" :class "text-right"} (account-balance* request))
+                             (sc/data-grid-cell {}))
+           (sc/data-grid-row {:class "account-grand-total-row"}
+                             (sc/data-grid-cell {})
+                             (sc/data-grid-cell {:class "text-right"} (bold-right "TRANSACTION TOTAL"))
+                             (sc/data-grid-cell {:class "text-right"} (format "$%,.2f" total))
+                             (sc/data-grid-cell {})))}))
+
 (defn account-grid-body* [request]
   (let [snapshot (-> request :multi-form-state :snapshot)
+        step-params (-> request :multi-form-state :step-params)
         amount-mode (or (:amount-mode snapshot) "$")
+        client-id (-> request :entity :transaction/client :db/id)
         total (Math/abs (or (-> request :entity :transaction/amount)
                             (:transaction/amount snapshot)
-                            0.0))]
-    (com/data-grid {:headers [(com/data-grid-header {} "Account")
-                              (com/data-grid-header {:class "w-32"} "Location")
-                              (com/data-grid-header {:class "w-16"}
-                                                    (com/radio-card {:options [{:value "$" :content "$"}
-                                                                               {:value "%" :content "%"}]
-                                                                     :value amount-mode
-                                                                     :name "step-params[amount-mode]"
-                                                                     :orientation :horizontal
-                                                                     :hx-vals (hx/json {:op "toggle-amount-mode"})
-                                                                     :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-                                                                     :hx-target "#wizard-form"
-                                                                     :hx-select "#wizard-form"
-                                                                     :hx-swap "outerHTML"
-                                                                     :hx-include "closest form"}))
-                              (com/data-grid-header {:class "w-16"})]
-                    ;; Totals live in their own <tbody id="account-totals"> so the amount
-                    ;; field refreshes them with a plain targeted swap, never swapping the
-                    ;; input-bearing rows above (which would drop the caret).
-                    :footer-tbody
-                    [:tbody {:id "account-totals"}
-                     (com/data-grid-row {:class "account-total-row"}
-                                        (com/data-grid-cell {})
-                                        (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "TOTAL"])
-                                        (com/data-grid-cell {:id "total"
-                                                             :class "text-right"}
-                                                            (account-total* request))
-                                        (com/data-grid-cell {}))
-                     (com/data-grid-row {:class "account-balance-row"}
-                                        (com/data-grid-cell {})
-                                        (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "BALANCE"])
-                                        (com/data-grid-cell {:id "balance"
-                                                             :class "text-right"}
-                                                            (account-balance* request))
-                                        (com/data-grid-cell {}))
-                     (com/data-grid-row {:class "account-grand-total-row"}
-                                        (com/data-grid-cell {})
-                                        (com/data-grid-cell {:class "text-right"} [:span.font-bold.text-right "TRANSACTION TOTAL"])
-                                        (com/data-grid-cell {:class "text-right"}
-                                                            (format "$%,.2f" total))
-                                        (com/data-grid-cell {}))]}
-                   (fc/cursor-map (fn [cursor]
-                                    (transaction-account-row* {:value cursor
-                                                               :client-id (-> request :entity :transaction/client :db/id)
-                                                               :amount-mode amount-mode
-                                                               :total total
-                                                               :index (last (cursor/path cursor))})))
-
-                   (com/data-grid-row {:class "new-row"}
-                                      (com/data-grid-cell {:colspan 4}
-                                                          (com/a-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-                                                                         :hx-vals (hx/json {:op "new-account"})
-                                                                         :hx-target "#wizard-form"
-                                                                         :hx-select "#wizard-form"
-                                                                         :hx-swap "outerHTML"
-                                                                         :hx-include "closest form"
-                                                                         :color :secondary}
-                                                                        "New account"))))))
+                            0.0))
+        accounts (vec (or (seq (:transaction/accounts step-params))
+                          (:transaction/accounts snapshot)
+                          []))]
+    (apply
+     sc/data-grid
+     {:headers [(sc/data-grid-header {} "Account")
+                (sc/data-grid-header {:class "w-32"} "Location")
+                (sc/data-grid-header {:class "w-16"}
+                                     (sc/radio-card {:options [{:value "$" :content "$"}
+                                                               {:value "%" :content "%"}]
+                                                     :value amount-mode
+                                                     :name "amount-mode"
+                                                     :orientation :horizontal
+                                                     :hx-vals (hx/json {:op "toggle-amount-mode"})
+                                                     :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                                                     :hx-target "#edit-form"
+                                                     :hx-select "#edit-form"
+                                                     :hx-swap "outerHTML"
+                                                     :hx-include "closest form"}))
+                (sc/data-grid-header {:class "w-16"})]
+      :footer-tbody (account-totals-tbody* request total)}
+     (concat
+      (map-indexed
+       (fn [index account]
+         (transaction-account-row* {:value account
+                                    :client-id client-id
+                                    :amount-mode amount-mode
+                                    :index index}))
+       accounts)
+      [(sc/data-grid-row
+        {:class "new-row"}
+        (sc/data-grid-cell {:colspan 4}
+                           (sc/a-button {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                                         :hx-vals (hx/json {:op "new-account"})
+                                         :hx-target "#edit-form"
+                                         :hx-select "#edit-form"
+                                         :hx-swap "outerHTML"
+                                         :hx-include "closest form"
+                                         :color :secondary}
+                                        "New account")))]))))
 
 (defn manual-coding-section*
   "Renders the vendor field + account/location section for the manual tab.
@@ -501,49 +519,51 @@
         step-params (-> request :multi-form-state :step-params)
         all-accounts (or (seq (:transaction/accounts step-params))
                          (seq (:transaction/accounts snapshot)))
-        row-count (count all-accounts)]
-    [:div#manual-coding-section
-     (com/hidden {:name "step-params[mode]" :value (name mode)})
-     [:div {:hx-trigger "change"
-            :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-            :hx-vals (hx/json {:op "vendor-changed"})
-            :hx-target "#wizard-form"
-            :hx-select "#wizard-form"
-            :hx-swap "outerHTML"
-            :hx-sync "this:replace"
-            :hx-include "closest form"}
-      (fc/with-field :transaction/vendor
-        (com/validated-field
-         {:label "Vendor" :errors (fc/field-errors)}
-         [:div.w-96
-          (com/typeahead {:name (fc/field-name)
-                          :error? (fc/error?)
-                          :class "w-96"
-                          :placeholder "Search..."
-                          :url (bidi/path-for ssr-routes/only-routes :vendor-search)
-                          :value (fc/field-value)
-                          :content-fn (fn [c] (pull-attr (dc/db conn) :vendor/name c))})]))]
-     (if (= mode :simple)
-       (let [simple-account-id (let [av (-> (first all-accounts) :transaction-account/account)]
-                                 (if (map? av) (:db/id av) av))]
-         [:div {:x-data (hx/json {:simpleAccountId simple-account-id})}
-          (simple-mode-fields* request)])
-       [:div
-        (when (<= row-count 1)
-          [:div.mb-2
-           [:a.text-sm.text-blue-600.hover:underline.cursor-pointer
-            {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
-             :hx-vals (hx/json {:op "toggle-mode"})
-             :hx-include "closest form"
-             :hx-target "#wizard-form"
-             :hx-select "#wizard-form"
-             :hx-swap "outerHTML"}
-            "Switch to simple mode"]])
-        (fc/with-field :transaction/accounts
-          (com/validated-field
-           {:errors (fc/field-errors)}
-           [:div#account-grid-body
-            (account-grid-body* request)]))])]))
+        row-count (count all-accounts)
+        vendor-val (:transaction/vendor step-params)
+        toggle-attrs (fn [] (sc/attrs->str {:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                                            :hx-vals (hx/json {:op "toggle-mode"})
+                                            :hx-include "closest form"
+                                            :hx-target "#edit-form"
+                                            :hx-select "#edit-form"
+                                            :hx-swap "outerHTML"}))]
+    (sel/render->hiccup
+     "templates/transaction-edit/manual-coding.html"
+     {:mode_hidden (str (sc/hidden {:name "mode" :value (name mode)}))
+      :vendor_changed_attrs (sc/attrs->str {:hx-trigger "change"
+                                            :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-form-changed)
+                                            :hx-vals (hx/json {:op "vendor-changed"})
+                                            :hx-target "#edit-form"
+                                            :hx-select "#edit-form"
+                                            :hx-swap "outerHTML"
+                                            :hx-sync "this:replace"
+                                            :hx-include "closest form"})
+      :vendor_field (str (sc/validated-field
+                          {:label "Vendor" :errors (ferr :transaction/vendor)}
+                          (wrap-div "w-96"
+                                    (sc/typeahead {:name (fname :transaction/vendor)
+                                                   :error? (boolean (seq (ferr :transaction/vendor)))
+                                                   :class "w-96"
+                                                   :placeholder "Search..."
+                                                   :url (bidi/path-for ssr-routes/only-routes :vendor-search)
+                                                   :value vendor-val
+                                                   :content-fn (fn [c] (pull-attr (dc/db conn) :vendor/name c))}))))
+      :is_simple (= mode :simple)
+      :simple_xdata (when (= mode :simple)
+                      (hx/json {:simpleAccountId (let [av (-> (first all-accounts) :transaction-account/account)]
+                                                   (if (map? av) (:db/id av) av))}))
+      :simple_mode (when (= mode :simple) (str (simple-mode-fields* request)))
+      :toggle_link (when (and (not= mode :simple) (<= row-count 1))
+                     (str (wrap-div "mb-2"
+                                    (sel/raw (str "<a class=\"text-sm text-blue-600 hover:underline cursor-pointer\""
+                                                  (toggle-attrs)
+                                                  ">Switch to simple mode</a>")))))
+      :accounts_field (when (not= mode :simple)
+                        (str (sc/validated-field
+                              {:errors (ferr :transaction/accounts)}
+                              (sel/raw (str "<div id=\"account-grid-body\">"
+                                            (str (account-grid-body* request))
+                                            "</div>")))))})))
 
 (defn apply-toggle-amount-mode
   "edit-form-changed op: convert account amounts between $ and % and record the new mode."
@@ -563,35 +583,17 @@
         (assoc-in [:multi-form-state :snapshot :amount-mode] new-mode))))
 
 (defn transaction-details-panel [tx]
-  [:div.p-4.space-y-4
-   [:h3.text-sm.font-semibold.text-gray-900.uppercase.tracking-wider "Details"]
-   [:div.space-y-3
-    [:div
-     [:div.text-xs.font-medium.text-gray-500 "Amount"]
-     [:div.text-sm.font-medium.text-gray-900 (format "$%,.2f" (Math/abs (or (:transaction/amount tx) 0.0)))]]
-    [:div
-     [:div.text-xs.font-medium.text-gray-500 "Date"]
-     [:div.text-sm.text-gray-900 (some-> tx :transaction/date coerce/to-date-time (atime/unparse-local atime/normal-date))]]
-    [:div
-     [:div.text-xs.font-medium.text-gray-500 "Bank Account"]
-     [:div.text-sm.text-gray-900 (or (-> tx :transaction/bank-account :bank-account/name) "-")]]
-    [:div
-     [:div.text-xs.font-medium.text-gray-500 "Post Date"]
-     [:div.text-sm.text-gray-900 (some-> tx :transaction/post-date coerce/to-date-time (atime/unparse-local atime/normal-date))]]
-    [:div
-     [:div.text-xs.font-medium.text-gray-500 "Description"]
-     [:div.text-sm.text-gray-900.truncate.cursor-help
-      {:title (or (:transaction/description-original tx) "No original description")}
-      (or (:transaction/description-simple tx) "-")]]
-    [:div
-     [:div.text-xs.font-medium.text-gray-500 "Check Number"]
-     [:div.text-sm.text-gray-900 (or (:transaction/check-number tx) "-")]]
-    [:div
-     [:div.text-xs.font-medium.text-gray-500 "Status"]
-     [:div.text-sm.text-gray-900 (or (some-> tx :transaction/status) "-")]]
-    [:div
-     [:div.text-xs.font-medium.text-gray-500 "Transaction Type"]
-     [:div.text-sm.text-gray-900 (or (some-> tx :transaction/type) "-")]]]])
+  (sel/render->hiccup
+   "templates/transaction-edit/details-panel.html"
+   {:amount (format "$%,.2f" (Math/abs (or (:transaction/amount tx) 0.0)))
+    :date (some-> tx :transaction/date coerce/to-date-time (atime/unparse-local atime/normal-date))
+    :bank_account (or (-> tx :transaction/bank-account :bank-account/name) "-")
+    :post_date (some-> tx :transaction/post-date coerce/to-date-time (atime/unparse-local atime/normal-date))
+    :description_original (or (:transaction/description-original tx) "No original description")
+    :description_simple (or (:transaction/description-simple tx) "-")
+    :check_number (or (:transaction/check-number tx) "-")
+    :status (or (some-> tx :transaction/status) "-")
+    :type (or (some-> tx :transaction/type) "-")}))
 
 (defn get-available-payments [request]
   (let [tx-id (or (get-in request [:form-params :transaction-id])
@@ -624,27 +626,40 @@
         (for [[_ invoice-id] matches]
           (d-invoices/get-by-id invoice-id))))))
 
+(defn- panel-wrap [inner]
+  (sel/raw (str "<div>" (str inner) "</div>")))
+
+(defn- panel-empty* [message]
+  (sel/render->hiccup "templates/transaction-edit/panel-empty.html" {:message message}))
+
+(defn- panel-list* [{:keys [heading action-hidden prompt radio]}]
+  (sel/render->hiccup "templates/transaction-edit/panel-list.html"
+                      {:heading heading
+                       :action_hidden (str action-hidden)
+                       :prompt prompt
+                       :radio (str radio)}))
+
+(defn- invoice-group-content [match-group]
+  (sel/raw (apply str (for [invoice match-group]
+                        (sel/render "templates/transaction-edit/invoice-option.html"
+                                    {:number (:invoice/invoice-number invoice)
+                                     :vendor (-> invoice :invoice/vendor :vendor/name)
+                                     :date (some-> invoice :invoice/date coerce/to-date-time (atime/unparse-local atime/normal-date))
+                                     :amount (format "$%.2f" (:invoice/outstanding-balance invoice))})))))
+
 (defn autopay-invoices-view [request]
   (let [invoice-matches (get-available-autopay-invoices request)]
-    [:div
+    (panel-wrap
      (if (seq invoice-matches)
-       [:div
-        [:h3.text-lg.font-bold.mb-4 "Available Autopay Invoices"]
-        (com/hidden {:name "action"
-                     :value "link-autopay-invoices"})
-        [:div.space-y-2
-         [:label.block.text-sm.font-medium.mb-1 "Select an autopay invoice to apply:"]
-         (com/radio-card {:options (for [match-group invoice-matches]
-                                     {:value (pr-str (map :db/id match-group))
-                                      :content (doall (for [invoice match-group]
-                                                        [:div.ml-3
-                                                         [:span.block.text-sm.font-medium (:invoice/invoice-number invoice)]
-                                                         [:span.block.text-sm.text-gray-500 (-> invoice :invoice/vendor :vendor/name)]
-                                                         [:span.block.text-sm.text-gray-500 (some-> invoice :invoice/date coerce/to-date-time (atime/unparse-local atime/normal-date))]
-                                                         [:span.block.text-sm.font-medium (format "$%.2f" (:invoice/outstanding-balance invoice))]]))})
-                          :name (fc/with-field :autopay-invoice-ids (fc/field-name))
-                          :width "w-full"})]]
-       [:div.text-center.py-4.text-gray-500 "No matching autopay invoices available for this transaction."])]))
+       (panel-list* {:heading "Available Autopay Invoices"
+                     :action-hidden (sc/hidden {:name "action" :value "link-autopay-invoices"})
+                     :prompt "Select an autopay invoice to apply:"
+                     :radio (sc/radio-card {:options (for [match-group invoice-matches]
+                                                       {:value (pr-str (map :db/id match-group))
+                                                        :content (invoice-group-content match-group)})
+                                            :name (fname :autopay-invoice-ids)
+                                            :width "w-full"})})
+       (panel-empty* "No matching autopay invoices available for this transaction.")))))
 
 (defn get-available-unpaid-invoices [request]
   (let [tx-id (or (-> request :multi-form-state :snapshot :db/id)
@@ -663,36 +678,17 @@
 
 (defn unpaid-invoices-view [request]
   (let [invoice-matches (get-available-unpaid-invoices request)]
-    [:div
+    (panel-wrap
      (if (seq invoice-matches)
-       [:div
-        [:h3.text-lg.font-bold.mb-4 "Available Unpaid Invoices"]
-        [:div #_{:hx-post (bidi/path-for ssr-routes/only-routes ::route/link-unpaid-invoices)
-                 :hx-include "this"
-                 :hx-params "transaction-id, action, unpaid-invoice-ids"
-                 :hx-trigger "linkUnpaidInvoices"
-                 :hx-target "#modal-holder"
-                 :hx-swap "outerHTML"}
-         (com/hidden {:name "action"
-                      :value "link-unpaid-invoices"
-                      :form ""})
-         #_(com/hidden {:name "transaction-id"
-                        :value (get-in request [:multi-form-state :snapshot :db/id])
-                        :form ""})
-         [:div.space-y-2
-          [:label.block.text-sm.font-medium.mb-1 "Select an unpaid invoice to apply:"]
-          (com/radio-card {:options (for [match-group invoice-matches]
-                                      {:value (pr-str (map :db/id match-group))
-                                       :content (doall (for [invoice match-group]
-                                                         [:div.ml-3
-                                                          [:span.block.text-sm.font-medium (:invoice/invoice-number invoice)]
-                                                          [:span.block.text-sm.text-gray-500 (-> invoice :invoice/vendor :vendor/name)]
-                                                          [:span.block.text-sm.text-gray-500 (some-> invoice :invoice/date coerce/to-date-time (atime/unparse-local atime/normal-date))]
-                                                          [:span.block.text-sm.font-medium (format "$%.2f" (:invoice/outstanding-balance invoice))]]))})
-                           :name (fc/with-field :unpaid-invoice-ids (fc/field-name))
-                           :width "w-full"})]
-         #_(com/a-button {:color :primary "@click" "$dispatch('linkUnpaidInvoices')"} "Link")]]
-       [:div.text-center.py-4.text-gray-500 "No matching unpaid invoices available for this transaction."])]))
+       (panel-list* {:heading "Available Unpaid Invoices"
+                     :action-hidden (sc/hidden {:name "action" :value "link-unpaid-invoices" :form ""})
+                     :prompt "Select an unpaid invoice to apply:"
+                     :radio (sc/radio-card {:options (for [match-group invoice-matches]
+                                                       {:value (pr-str (map :db/id match-group))
+                                                        :content (invoice-group-content match-group)})
+                                            :name (fname :unpaid-invoice-ids)
+                                            :width "w-full"})})
+       (panel-empty* "No matching unpaid invoices available for this transaction.")))))
 
 (defn get-available-rules [request]
   (let [tx-id (or (-> request :multi-form-state :snapshot :db/id)
@@ -722,25 +718,18 @@
 
 (defn transaction-rules-view [request]
   (let [matching-rules (get-available-rules request)]
-    [:div
+    (panel-wrap
      (if (seq matching-rules)
-       [:div
-        [:h3.text-lg.font-bold.mb-4 "Matching Transaction Rules"]
-        (fc/with-field :action
-          (com/hidden {:name (fc/field-name)
-                       :value "apply-rule"
-                       :form ""}))
-        [:div.space-y-2
-         [:label.block.text-sm.font-medium.mb-1 "Select a rule to apply:"]
-         (com/radio-card {:options (for [{:keys [:db/id :transaction-rule/note :transaction-rule/description]} matching-rules]
-                                     {:value id
-                                      :content [:div.ml-3
-                                                [:span.block.text-sm.font-medium note]
-                                                [:span.block.text-sm.text-gray-500 description]]})
-                          :name (fc/with-field :rule-id (fc/field-name))
-                          :width "w-full"})]
-        #_(com/a-button {"@click" "$dispatch('applyRule')"} "Apply")]
-       [:div.text-center.py-4.text-gray-500 "No matching rules found for this transaction."])]))
+       (panel-list* {:heading "Matching Transaction Rules"
+                     :action-hidden (sc/hidden {:name (fname :action) :value "apply-rule" :form ""})
+                     :prompt "Select a rule to apply:"
+                     :radio (sc/radio-card {:options (for [{:keys [:db/id :transaction-rule/note :transaction-rule/description]} matching-rules]
+                                                       {:value id
+                                                        :content (sel/render->hiccup "templates/transaction-edit/rule-option.html"
+                                                                                     {:note note :description description})})
+                                            :name (fname :rule-id)
+                                            :width "w-full"})})
+       (panel-empty* "No matching rules found for this transaction.")))))
 
 (defn payment-matches-view [request]
   (let [payments (get-available-payments request)
@@ -757,58 +746,43 @@
                     :payment/vendor [:vendor/name]}]
 
                  (-> tx :transaction/payment :db/id))]
-    [:div#payment-matches
-     (if (and payment (:db/id payment))
-       [:div.my-4.p-4.bg-blue-50.rounded
-        [:h3.text-lg.font-bold.mb-2 "Linked Payment"
-         (com/a-icon-button {:href (hu/url (bidi/path-for ssr-routes/only-routes ::payment-route/all-page)
-                                           {:exact-match-id (:db/id payment)})}
-                            svg/external-link)]
-        [:div.space-y-2
-         [:div.flex.justify-between
-          [:div.font-medium "Payment #"]
-          [:div (:payment/invoice-number payment)]]
-         [:div.flex.justify-between
-          [:div.font-medium "Vendor"]
-          [:div (-> payment :payment/vendor :vendor/name)]]
-         [:div.flex.justify-between
-          [:div.font-medium "Amount"]
-          [:div (some->> (:payment/amount payment) (format "$%.2f"))]]
-         [:div.flex.justify-between
-          [:div.font-medium "Status"]
-          [:div (some-> payment :payment/status name)]]
-         [:div.flex.justify-between
-          [:div.font-medium "Date"]
-          [:div (some-> payment :payment/date (atime/unparse-local atime/normal-date))]]
-         (fc/with-field :payment-id (com/hidden {:name (fc/field-name)
-                                                 :value (:db/id payment)}))
-         [:div.mt-4 {:hx-post (bidi/path-for ssr-routes/only-routes ::route/unlink-payment)
-                     :hx-trigger "unlinkPayment"
-                     :hx-target "#payment-matches"
-                     ;; include the whole form so the db/id hidden rides along (the plain
-                     ;; form derives state from db/id instead of a serialized snapshot)
-                     :hx-include "closest form"
-                     :hx-swap "outerHTML"
-                     :hx-confirm "Are you sure you want to unlink this payment?"}
-
-          (com/a-button {:color :red :size :small
-                         "@click" "$dispatch('unlinkPayment')"} "Unlink Payment")]]]
-       (if (seq payments)
-         [:div
-          [:h3.text-lg.font-bold.mb-4 "Available Payments"]
-          [:div.space-y-2
-           [:label.block.text-sm.font-medium.mb-1 "Select a payment to match:"]
-           (when payments
-             (let [payment-id-field (fc/with-field :payment-id (fc/field-name))]
-               (com/radio-card {:options (for [payment payments]
-                                           {:value (:db/id payment)
-                                            :content (str (:payment/invoice-number payment) " - "
-                                                          (-> payment :payment/vendor :vendor/name)
-                                                          " - Amount: $" (format "%.2f" (:payment/amount payment))
-                                                          " • Date: " (some-> payment :payment/date coerce/to-date-time (atime/unparse-local atime/normal-date)))})
-                                :name payment-id-field
-                                :width "w-full"})))]]
-         [:div.text-center.py-4.text-gray-500 "No matching payments available for this transaction."]))]))
+    (sel/render->hiccup
+     "templates/transaction-edit/payment-matches.html"
+     {:inner
+      (str
+       (if (and payment (:db/id payment))
+         (sel/render->hiccup
+          "templates/transaction-edit/linked-payment.html"
+          {:external_link (str (sc/a-icon-button {:href (hu/url (bidi/path-for ssr-routes/only-routes ::payment-route/all-page)
+                                                                {:exact-match-id (:db/id payment)})}
+                                                 (sc/render "templates/components/svg-external-link.html" {})))
+           :number (:payment/invoice-number payment)
+           :vendor (-> payment :payment/vendor :vendor/name)
+           :amount (some->> (:payment/amount payment) (format "$%.2f"))
+           :status (some-> payment :payment/status name)
+           :date (some-> payment :payment/date (atime/unparse-local atime/normal-date))
+           :payment_id_hidden (str (sc/hidden {:name (fname :payment-id) :value (:db/id payment)}))
+           :unlink_attrs (sc/attrs->str {:hx-post (bidi/path-for ssr-routes/only-routes ::route/unlink-payment)
+                                         :hx-trigger "unlinkPayment"
+                                         :hx-target "#payment-matches"
+                                         :hx-include "closest form"
+                                         :hx-swap "outerHTML"
+                                         :hx-confirm "Are you sure you want to unlink this payment?"})
+           :unlink_button (str (sc/a-button {:color :red :size :small "@click" "$dispatch('unlinkPayment')"}
+                                            "Unlink Payment"))})
+         (if (seq payments)
+           (panel-list* {:heading "Available Payments"
+                         :action-hidden ""
+                         :prompt "Select a payment to match:"
+                         :radio (sc/radio-card {:options (for [payment payments]
+                                                           {:value (:db/id payment)
+                                                            :content (str (:payment/invoice-number payment) " - "
+                                                                          (-> payment :payment/vendor :vendor/name)
+                                                                          " - Amount: $" (format "%.2f" (:payment/amount payment))
+                                                                          " • Date: " (some-> payment :payment/date coerce/to-date-time (atime/unparse-local atime/normal-date)))})
+                                                :name (fname :payment-id)
+                                                :width "w-full"})})
+           (panel-empty* "No matching payments available for this transaction."))))})))
 
 (defn count-payment-matches [request]
   (count (get-available-payments request)))
@@ -822,123 +796,115 @@
 (defn count-rule-matches [request]
   (count (get-available-rules request)))
 
-(defrecord LinksStep [linear-wizard]
-  mm/ModalWizardStep
-  (step-name [_]
-    "Transaction Actions")
-  (step-key [_]
-    :links)
+(defn- tab-button [{:keys [active value badge-count disabled? relative?] :or {relative? true}} label]
+  (sc/button-group-button
+   (cond-> {"@click" (str "activeForm = '" active "'")
+            :value value
+            ":class" (str "{ '!bg-primary-200 text-primary-800': activeForm === '" active "'}")}
+     relative? (assoc :class "relative")
+     disabled? (assoc ":disabled" "!canChange"))
+   (when (and badge-count (> badge-count 0))
+     (sc/badge {:color "green"} (str badge-count)))
+   label))
 
-  (edit-path [_ _]
-    [])
+(defn- tabs* [request]
+  (sc/button-group
+   {:name "method"}
+   (tab-button {:active "link-payment" :value "payment"
+                :badge-count (count-payment-matches request)} "Link to payment")
+   (tab-button {:active "link-unpaid-invoices" :value "unpaid" :disabled? true
+                :badge-count (count-unpaid-invoice-matches request)} "Link to unpaid invoices")
+   (tab-button {:active "link-autopay-invoices" :value "autopay" :disabled? true
+                :badge-count (count-autopay-invoice-matches request)} "Link to autopay invoices")
+   (tab-button {:active "apply-rule" :value "rule" :disabled? true
+                :badge-count (count-rule-matches request)} "Apply rule")
+   (tab-button {:active "manual" :value "manual" :disabled? true :relative? false} "Manual")))
 
-  (step-schema [_]
-    #_(require-approval (mut/select-keys (mm/form-schema linear-wizard) #{:transaction/client :transaction/vendor :transaction/memo :transaction/approval-status :db/id}))
-    (mm/form-schema linear-wizard))
+(defn- approval-status* [request]
+  (let [step-params (-> request :multi-form-state :step-params)
+        v (:transaction/approval-status step-params)
+        current-value (name (or (if (map? v) (:db/ident v) v)
+                                :transaction-approval-status/unapproved))]
+    (sc/validated-field
+     {:label "Status" :errors (ferr :transaction/approval-status)}
+     (sel/render->hiccup
+      "templates/transaction-edit/approval-status.html"
+      {:x_data (hx/json {:approvalStatus current-value})
+       :status_hidden (str (sc/hidden {:name (fname :transaction/approval-status)
+                                       :value current-value ":value" "approvalStatus"}))
+       :buttons (str
+                 (sc/button-group-button {"@click" "approvalStatus = 'approved'" ":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'approved' }" :class "rounded-l-lg"} "Approved")
+                 (sc/button-group-button {"@click" "approvalStatus = 'unapproved'" ":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'unapproved' }" :class "rounded-r-lg"} "Unapproved")
+                 (sc/button-group-button {"@click" "approvalStatus = 'suppressed'" ":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'suppressed' }" :class "rounded-r-lg"} "Client Review"))}))))
 
-  (render-step [this {{:keys [snapshot step-params] :as multi-form-state} :multi-form-state :as request}]
-    (let [tx-id (mm/get-mfs-field multi-form-state :db/id)
+(defn- links-body* [request mode]
+  (let [step-params (-> request :multi-form-state :step-params)
+        payment? (:transaction/payment (:entity request))
+        action-str (some-> (:action step-params) name)]
+    (sel/render->hiccup
+     "templates/transaction-edit/links-body.html"
+     {:memo_field (str (sc/validated-field
+                        {:label "Memo" :errors (ferr :transaction/memo)}
+                        (wrap-div "w-96"
+                                  (sc/text-input {:value (:transaction/memo step-params)
+                                                  :name (fname :transaction/memo)
+                                                  :id "edit-memo"
+                                                  :error? (ferr :transaction/memo)
+                                                  :placeholder "Optional note"}))))
+      :x_data (hx/json {:activeForm (if payment? "link-payment" (or action-str "manual"))
+                        :canChange (boolean (not payment?))})
+      :action_hidden (str (sc/hidden {:name (fname :action) :value action-str ":value" "activeForm"}))
+      :tabs (str (tabs* request))
+      :panel_payment (str (payment-matches-view request))
+      :panel_unpaid (str (unpaid-invoices-view request))
+      :panel_autopay (str (autopay-invoices-view request))
+      :panel_rule (str (transaction-rules-view request))
+      :panel_manual (str (manual-coding-section* mode request)
+                         (approval-status* request))})))
+
+(defn- form-errors-html [errors]
+  (str "<div id=\"form-errors\">"
+       (when (seq errors)
+         (str "<span class=\"error-content\"><p class=\"mt-2 text-xs text-red-600 dark:text-red-500 h-4\">"
+              (str/join ", " (filter string? errors))
+              "</p></span>"))
+       "</div>"))
+
+(defn- footer* [request]
+  (sel/raw
+   (str "<div class=\"flex justify-end\"><div class=\"flex items-baseline gap-x-4\">"
+        (form-errors-html (:errors (:form-errors request)))
+        (str (sc/button {:color :primary :x-ref "next" :class "w-32 wizard-save-action"} "Done"))
+        "</div></div>")))
+
+(defn render-form
+  "Renders the whole plain edit form (no wizard). Binds *errors* from the request's
+   :form-errors so the field-level error lookups (ferr) resolve."
+  [request]
+  (binding [*errors* (or (:form-errors request) {})]
+    (let [multi-form-state (:multi-form-state request)
+          snapshot (:snapshot multi-form-state)
+          step-params (:step-params multi-form-state)
+          tx-id (or (:db/id snapshot) (-> request :route-params :db/id))
           tx (d-transactions/get-by-id tx-id)
-          ;; Preserve explicit mode choice from step-params; only fall back to
-          ;; row-count heuristic on initial load when no mode has been chosen.
-          mode (keyword (or (:mode step-params)
-                            (name (manual-mode-initial snapshot))))]
-      (mm/default-render-step
-       linear-wizard this
-       :head [:div.p-2 "Edit Transaction"]
-       :width-height-class " md:w-[950px] md:h-[650px] "
-       :side-panel (transaction-details-panel tx)
-       :body (mm/default-step-body
-              {}
-              [:div
-               (fc/with-field :transaction/memo
-                 (com/validated-field
-                  {:label "Memo"
-                   :errors (fc/field-errors)}
-                  [:div.w-96
-                   ;; Memo affects nothing else, so it issues no request at all -- its
-                   ;; value just rides along in the form (posted with the next dependent
-                   ;; change, and merged into the snapshot on save).
-                   (com/text-input {:value (-> (fc/field-value))
-                                    :name (fc/field-name)
-                                    :id "edit-memo"
-                                    :error? (fc/field-errors)
-                                    :placeholder "Optional note"})]))
-               [:div {:x-data (hx/json {:activeForm (if (:transaction/payment (:entity request))
-                                                      "link-payment"
-                                                      (or (fc/with-field :action (fc/field-value))
-                                                          "manual"))
-                                        :canChange (boolean (not (:transaction/payment (:entity request))))})
-                      "@unlinked" "canChange=true"}
-                [:div {:class "flex space-x-2 mb-4"}
-                 (fc/with-field :action
-                   (com/hidden {:name (fc/field-name)
-                                :value (fc/field-value)
-                                ":value" "activeForm"}))
-                 (com/button-group {:name "method"}
-                                   (com/button-group-button {"@click" "activeForm = 'link-payment'" :value "payment" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'link-payment'}" :class "relative"}
-                                                            (let [count (count-payment-matches request)]
-                                                              (when (> count 0)
-                                                                (com/badge {:color "green"} (str count))))
-                                                            "Link to payment")
-                                   (com/button-group-button {"@click" "activeForm = 'link-unpaid-invoices'" :value "unpaid" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'link-unpaid-invoices'}" :class "relative"
-                                                             ":disabled" "!canChange"}
-                                                            (let [count (count-unpaid-invoice-matches request)]
-                                                              (when (> count 0)
-                                                                (com/badge {:color "green"} (str count))))
-                                                            "Link to unpaid invoices")
-                                   (com/button-group-button {"@click" "activeForm = 'link-autopay-invoices'" :value "autopay" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'link-autopay-invoices'}" :class "relative"
-                                                             ":disabled" "!canChange"}
-                                                            (let [count (count-autopay-invoice-matches request)]
-                                                              (when (> count 0)
-                                                                (com/badge {:color "green"} (str count))))
-                                                            "Link to autopay invoices")
-                                   (com/button-group-button {"@click" "activeForm = 'apply-rule'" :value "rule" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'apply-rule'}" :class "relative"
-                                                             ":disabled" "!canChange"}
-                                                            (let [count (count-rule-matches request)]
-                                                              (when (> count 0)
-                                                                (com/badge {:color "green"} (str count))))
-                                                            "Apply rule")
-                                   (com/button-group-button {"@click" "activeForm = 'manual'" :value "manual" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'manual'}"
-                                                             ":disabled" "!canChange"}
-                                                            "Manual"))]
-                [:div {:x-show "activeForm === 'link-payment'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"}
-                 (payment-matches-view request)]
-                [:div {:x-show "activeForm === 'link-unpaid-invoices'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"}
-                 (unpaid-invoices-view request)]
-                [:div {:x-show "activeForm === 'link-autopay-invoices'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"}
-                 (autopay-invoices-view request)]
-                [:div {:x-show "activeForm === 'apply-rule'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"}
-                 (transaction-rules-view request)]
-                [:div {:x-show "activeForm === 'manual'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"}
-                 [:div {}
-                  (manual-coding-section* mode request)
-                  (fc/with-field :transaction/approval-status
-                    (com/validated-field
-                     {:label "Status"
-                      :errors (fc/field-errors)}
-                     (let [current-value (name (or (fc/field-value) :transaction-approval-status/unapproved))]
-                       [:div {:x-data (hx/json {:approvalStatus current-value})}
-                        (com/hidden {:name (fc/field-name)
-                                     :value current-value
-                                     ":value" "approvalStatus"})
-                        [:div {:class "inline-flex rounded-md shadow-sm", :role "group"}
-                         (com/button-group-button {"@click" "approvalStatus = 'approved'"
-                                                   ":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'approved' }"
-                                                   :class "rounded-l-lg"}
-                                                  "Approved")
-                         (com/button-group-button {"@click" "approvalStatus = 'unapproved'"
-                                                   ":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'unapproved' }"
-                                                   :class "rounded-r-lg"}
-                                                  "Unapproved")
-                         (com/button-group-button {"@click" "approvalStatus = 'suppressed'"
-                                                   ":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'suppressed' }"
-                                                   :class "rounded-r-lg"}
-                                                  "Client Review")]])))]]]])
-       :footer
-       (mm/default-step-footer linear-wizard this :validation-route ::route/edit-wizard-navigate
-                               :next-button (com/button {:color :primary :x-ref "next" :class "w-32 wizard-save-action"} "Done"))
-       :validation-route ::route/edit-wizard-navigate))))
+          ;; Preserve an explicit mode choice; fall back to the row-count heuristic only
+          ;; on initial open.
+          mode (keyword (or (:mode step-params) (name (manual-mode-initial snapshot))))
+          modal-card (sel/render "templates/transaction-edit/edit-modal.html"
+                                 {:head "<div class=\"p-2\">Edit Transaction</div>"
+                                  :side_panel (str (transaction-details-panel tx))
+                                  :body (str (links-body* request mode))
+                                  :footer (str (footer* request))})]
+      (sel/render->hiccup
+       "templates/transaction-edit/edit-form.html"
+       {:db_id (:db/id snapshot)
+        :form_attrs (sc/attrs->str {:hx-ext "response-targets"
+                                    :hx-swap "outerHTML"
+                                    :hx-target-400 "#form-errors .error-content"
+                                    :hx-trigger "submit"
+                                    :hx-target "this"
+                                    :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-submit)})
+        :modal (str (sc/modal {:id "editmodal"} (sel/raw modal-card)))}))))
 
 (defmulti save-handler (fn [request]
                          (-> request :multi-form-state :snapshot :action)))
@@ -1262,112 +1228,70 @@
                  "hx-reswap" "outerHTML"}))))
 
 (defn unlink-payment [{{{transaction-id :db/id} :snapshot} :multi-form-state :as request}]
+  (let [transaction (dc/pull (dc/db conn)
+                             '[:transaction/approval-status
+                               :transaction/date
+                               :transaction/location
+                               :transaction/vendor
+                               :transaction/accounts
+                               :transaction/status
+                               :transaction/client [:db/id]
+                               {:transaction/payment [:payment/date
+                                                      {[:payment/status :xform iol-ion.query/ident] [:db/ident]} :db/id]}]
+                             transaction-id)
+        payment (-> transaction :transaction/payment)]
 
-  (fc/start-form (:multi-form-state request) (when (:form-errors request) {:step-params (:form-errors request)})
-                 (let [transaction (dc/pull (dc/db conn)
-                                            '[:transaction/approval-status
+    (exception->4xx #(assert-can-see-client (:identity request) (-> transaction :transaction/client :db/id)))
+    (exception->4xx #(assert-not-locked (-> transaction :transaction/client :db/id) (:transaction/date transaction)))
 
-                                              :transaction/date
-                                              :transaction/location
-                                              :transaction/vendor
-                                              :transaction/accounts
-                                              :transaction/status
-                                              :transaction/client [:db/id]
-                                              {:transaction/payment [:payment/date
-                                                                     {[:payment/status :xform iol-ion.query/ident] [:db/ident]} :db/id]}]
-                                            transaction-id)
-                       payment (-> transaction :transaction/payment)]
+    (when (not= :payment-status/cleared (-> payment :payment/status))
+      (throw (ex-info "Payment can't be undone because it isn't cleared."
+                      {:validation-error "Payment can't be undone because it isn't cleared."})))
 
-                   (exception->4xx #(assert-can-see-client (:identity request) (-> transaction :transaction/client :db/id)))
-                   (exception->4xx #(assert-not-locked (-> transaction :transaction/client :db/id) (:transaction/date transaction)))
+    (let [is-autopay-payment? (some->> (dc/q {:find ['?sp]
+                                              :in ['$ '?payment]
+                                              :where ['[?ip :invoice-payment/payment ?payment]
+                                                      '[?ip :invoice-payment/invoice ?i]
+                                                      '[(get-else $ ?i :invoice/scheduled-payment "N/A") ?sp]]}
+                                             (dc/db conn) (:db/id payment))
+                                       seq
+                                       (map first)
+                                       (every? #(instance? java.util.Date %)))]
+      (if is-autopay-payment?
+        (audit-transact
+         (-> [{:db/id (:db/id payment)
+               :payment/status :payment-status/pending}
+              [:upsert-transaction
+               {:db/id (:db/id transaction)
+                :transaction/approval-status :transaction-approval-status/unapproved
+                :transaction/payment nil
+                :transaction/vendor nil
+                :transaction/location nil
+                :transaction/accounts nil}]
+              [:db/retractEntity (:db/id payment)]]
+             (into (map (fn [[invoice-payment]]
+                          [:db/retractEntity invoice-payment])
+                        (dc/q {:find ['?ip]
+                               :in ['$ '?p]
+                               :where ['[?ip :invoice-payment/payment ?p]]}
+                              (dc/db conn)
+                              (:db/id payment)))))
+         (:identity request))
+        (audit-transact
+         [{:db/id (:db/id payment)
+           :payment/status :payment-status/pending}
+          [:upsert-transaction
+           {:db/id (:db/id transaction)
+            :transaction/approval-status :transaction-approval-status/unapproved
+            :transaction/payment nil
+            :transaction/vendor nil
+            :transaction/location nil
+            :transaction/accounts nil}]]
+         (:identity request))))
 
-                   (when (not= :payment-status/cleared (-> payment :payment/status))
-                     (throw (ex-info "Payment can't be undone because it isn't cleared."
-                                     {:validation-error "Payment can't be undone because it isn't cleared."})))
-
-                   (let [is-autopay-payment? (some->> (dc/q {:find ['?sp]
-                                                             :in ['$ '?payment]
-                                                             :where ['[?ip :invoice-payment/payment ?payment]
-                                                                     '[?ip :invoice-payment/invoice ?i]
-                                                                     '[(get-else $ ?i :invoice/scheduled-payment "N/A") ?sp]]}
-                                                            (dc/db conn) (:db/id payment))
-                                                      seq
-                                                      (map first)
-                                                      (every? #(instance? java.util.Date %)))]
-                     (if is-autopay-payment?
-                       (audit-transact
-                        (-> [{:db/id (:db/id payment)
-                              :payment/status :payment-status/pending}
-                             [:upsert-transaction
-                              {:db/id (:db/id transaction)
-                               :transaction/approval-status :transaction-approval-status/unapproved
-                               :transaction/payment nil
-                               :transaction/vendor nil
-                               :transaction/location nil
-                               :transaction/accounts nil}]
-                             [:db/retractEntity (:db/id payment)]]
-                            (into (map (fn [[invoice-payment]]
-                                         [:db/retractEntity invoice-payment])
-                                       (dc/q {:find ['?ip]
-                                              :in ['$ '?p]
-                                              :where ['[?ip :invoice-payment/payment ?p]]}
-                                             (dc/db conn)
-                                             (:db/id payment)))))
-                        (:identity request))
-                       (audit-transact
-                        [{:db/id (:db/id payment)
-                          :payment/status :payment-status/pending}
-                         [:upsert-transaction
-                          {:db/id (:db/id transaction)
-                           :transaction/approval-status :transaction-approval-status/unapproved
-                           :transaction/payment nil
-                           :transaction/vendor nil
-                           :transaction/location nil
-                           :transaction/accounts nil}]]
-                        (:identity request))))
-
-                   (solr/touch-with-ledger (:db/id transaction))
-                   (html-response (fc/with-field :step-params (payment-matches-view request))
-                                  :headers {"hx-trigger" "unlinked"}))))
-
-(defrecord EditWizard [_ current-step]
-  mm/LinearModalWizard
-  (hydrate-from-request
-    [this request]
-    this)
-  (navigate [this step-key]
-    (assoc this :current-step step-key))
-  (get-current-step [this]
-    (if current-step
-      (mm/get-step this current-step)
-      (mm/get-step this :links)))
-  (render-wizard [this {:keys [multi-form-state form-errors] :as request}]
-    ;; Plain-form render: no snapshot / edit-path / current-step hidden fields. The entity
-    ;; id rides in the form; all other state is the live form (step-params) re-derived
-    ;; against the entity on each request (see wrap-derive-state).
-    (let [step (mm/get-current-step this)]
-      [:form#wizard-form (-> mm/default-form-props
-                             (assoc :hx-post (str (bidi/path-for ssr-routes/only-routes ::route/edit-submit))
-                                    :hx-ext "response-targets"))
-       (fc/start-form multi-form-state (when form-errors {:step-params form-errors})
-                      (list
-                       (com/hidden {:name "db/id" :value (-> multi-form-state :snapshot :db/id)})
-                       (fc/with-field :step-params
-                         (com/modal {:id "wizardmodal"}
-                                    (mm/render-step step request)))))]))
-  (steps [_]
-    [:links])
-  (get-step [this step-key]
-    (let [step-key-result (mc/parse mm/step-key-schema step-key)
-          [step-key-type step-key] step-key-result]
-      (get {:links (->LinksStep this)}
-           step-key)))
-  (form-schema [_]
-    edit-form-schema)
-  (submit [this {:keys [multi-form-state request-method identity] :as request}]
-    (save-handler request)))
-
-(def edit-wizard (->EditWizard nil nil))
+    (solr/touch-with-ledger (:db/id transaction))
+    (html-response (payment-matches-view request)
+                   :headers {"hx-trigger" "unlinked"})))
 
 (defn entity->base
   "The persisted transaction, shaped like the form's base state (what the old snapshot was
@@ -1415,12 +1339,54 @@
           snapshot (if (seq posted) (merge entity-only posted) base)]
       (handler (-> request
                    (assoc :entity (d-transactions/get-by-id tx-id))
-                   (assoc :multi-form-state (mm/->MultiStepFormState snapshot [] step-params)))))))
+                   (assoc :multi-form-state {:snapshot snapshot :edit-path [] :step-params step-params}))))))
+
+(def ^:private edit-form-keys
+  "Top-level keys edit-form-schema recognises (the [:map] fields + every :multi branch
+   field). Posted fields outside this set -- e.g. the tab button-group's `method` hidden --
+   are dropped so they can't leak into the saved entity (the old step-params[...] prefix
+   excluded them implicitly)."
+  [:db/id :action :transaction/memo :transaction/vendor :transaction/approval-status
+   :amount-mode :mode :transaction/accounts
+   :rule-id :transaction-id :unpaid-invoice-ids :autopay-invoice-ids :payment-id])
+
+(defn wrap-decode-edit
+  "Replaces the wizard's two-key snapshot/step-params decode. Parses the posted (nested)
+   form params and decodes them straight into edit-form-schema -- the field names have no
+   step-params[...] prefix, so they map directly onto the schema keys. Strips stray
+   non-schema fields. wrap-derive-state then fills :snapshot from the entity."
+  [handler]
+  (-> (fn [request]
+        (let [decoded (mc/decode edit-form-schema (:form-params request) main-transformer)
+              decoded (if (map? decoded) (select-keys decoded edit-form-keys) {})]
+          (handler (assoc request :multi-form-state {:step-params decoded}))))
+      (wrap-nested-form-params)))
 
 (defn render-full-form
-  "Helper to render the complete transaction edit form for whole-form re-rendering."
+  "Renders the complete edit form for whole-form re-rendering."
   [request]
-  (mm/render-wizard edit-wizard request))
+  (render-form request))
+
+(defn open-handler
+  "Initial modal open (GET). Wraps the rendered form in the #transitioner shell expected
+   by the modal stack."
+  [request]
+  (modal-response
+   (sel/render->hiccup "templates/transaction-edit/transitioner.html"
+                       {:body (str (render-form request))})))
+
+(defn submit-edit
+  "Validates the merged record against edit-form-schema (field-level errors surface via
+   wrap-form-4xx-2), then dispatches to the save-handler for the chosen action."
+  [request]
+  (assert-schema edit-form-schema (-> request :multi-form-state :snapshot))
+  (save-handler request))
+
+(defn- render-form-response
+  "wrap-form-4xx-2 form-handler: re-render the whole form with field/form errors."
+  [request]
+  (html-response (render-form request)
+                 :headers {"HX-reswap" "outerHTML"}))
 
 (defn apply-vendor-changed [request]
   (let [multi-form-state (:multi-form-state request)
@@ -1554,24 +1520,20 @@
     (html-response
      (render-full-form request'))))
 
+(def ^:private get-client (fn [request] (-> request :entity :transaction/client)))
+
 (def key->handler
   (apply-middleware-to-all-handlers
-   {::route/edit-wizard (-> mm/open-wizard-handler
-                            (wrap-must {:activity :edit :subject :transaction} (fn get-client [request] (-> request :entity :transaction/client)))
+   {::route/edit-wizard (-> open-handler
+                            (wrap-must {:activity :edit :subject :transaction} get-client)
                             (wrap-derive-state)
-                            (mm/wrap-wizard edit-wizard)
-                            (mm/wrap-decode-multi-form-state)
+                            (wrap-decode-edit)
                             (wrap-schema-enforce :route-schema [:map [:db/id entity-id]]))
-    ::route/edit-wizard-navigate (-> mm/next-handler
-                                     (wrap-must {:activity :edit :subject :transaction} (fn get-client [request] (-> request :entity :transaction/client)))
-                                     (wrap-derive-state)
-                                     (mm/wrap-wizard edit-wizard)
-                                     (mm/wrap-decode-multi-form-state))
-    ::route/edit-submit (-> mm/submit-handler
-                            (wrap-must {:activity :edit :subject :transaction} (fn get-client [request] (-> request :entity :transaction/client)))
+    ::route/edit-submit (-> submit-edit
+                            (wrap-form-4xx-2 render-form-response)
+                            (wrap-must {:activity :edit :subject :transaction} get-client)
                             (wrap-derive-state)
-                            (mm/wrap-wizard edit-wizard)
-                            (mm/wrap-decode-multi-form-state))
+                            (wrap-decode-edit))
     ::route/location-select (-> location-select
                                 (wrap-schema-enforce :query-schema [:map
                                                                     [:name :string]
@@ -1581,13 +1543,11 @@
                                                                      [:maybe entity-id]]]))
     ::route/edit-form-changed (-> edit-form-changed-handler
                                   (wrap-derive-state)
-                                  (mm/wrap-wizard edit-wizard)
-                                  (mm/wrap-decode-multi-form-state))
+                                  (wrap-decode-edit))
     ::route/unlink-payment (-> unlink-payment
-                               (wrap-must {:activity :edit :subject :transaction} (fn get-client [request] (-> request :entity :transaction/client)))
+                               (wrap-must {:activity :edit :subject :transaction} get-client)
                                (wrap-derive-state)
-                               (mm/wrap-wizard edit-wizard)
-                               (mm/wrap-decode-multi-form-state))}
+                               (wrap-decode-edit))}
    (fn [h]
      (-> h
          (wrap-client-redirect-unauthenticated)))))
diff --git a/src/cljc/auto_ap/routes/transactions.cljc b/src/cljc/auto_ap/routes/transactions.cljc
index 246a207d..3dc68b26 100644
--- a/src/cljc/auto_ap/routes/transactions.cljc
+++ b/src/cljc/auto_ap/routes/transactions.cljc
@@ -1,7 +1,6 @@
 (ns auto-ap.routes.transactions)
 
 (def routes {"" {:get ::page
-                 :put ::edit-wizard-navigate
                  "/unapproved" ::unapproved-page
                  "/requires-feedback" ::requires-feedback-page
                  "/approved" ::approved-page
-- 
2.49.1