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] 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