Send all responses as sexp wire format with client-side rendering

- Server sends sexp source text, client (sexp.js) renders everything
- SexpExpr marker class for nested sexp composition in serialize()
- sexp_page() HTML shell with data-mount="body" for full page loads
- sexp_response() returns text/sexp for OOB/partial responses
- ~app-body layout component replaces ~app-layout (no raw!)
- ~rich-text is the only component using raw! (for CMS HTML content)
- Fragment endpoints return text/sexp, auto-wrapped in SexpExpr
- All _*_html() helpers converted to _*_sexp() returning sexp source
- Head auto-hoist: sexp.js moves meta/title/link/script[ld+json]
  from rendered body to document.head automatically
- Unknown components render warning box instead of crashing page
- Component kwargs preserve AST for lazy rendering (fixes <> in kwargs)
- Fix unterminated paren in events/sexp/tickets.sexpr

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

orders/app.py

@@ -37,14 +37,14 @@ async def orders_context() -> dict:
     if ident["session_id"] is not None:
         cart_params["session_id"] = ident["session_id"]
 
-    cart_mini_html, auth_menu_html, nav_tree_html = await fetch_fragments([
+    cart_mini, auth_menu, nav_tree = await fetch_fragments([
         ("cart", "cart-mini", cart_params or None),
         ("account", "auth-menu", {"email": user.email} if user else None),
         ("blog", "nav-tree", {"app_name": "orders", "path": request.path}),
     ])
-    ctx["cart_mini_html"] = cart_mini_html
-    ctx["auth_menu_html"] = auth_menu_html
-    ctx["nav_tree_html"] = nav_tree_html
+    ctx["cart_mini"] = cart_mini
+    ctx["auth_menu"] = auth_menu
+    ctx["nav_tree"] = nav_tree
 
     return ctx
 

orders/bp/fragments/routes.py

@@ -14,12 +14,11 @@ def register():
 
     async def _account_nav_item():
         from shared.infrastructure.urls import orders_url
-        from shared.sexp.jinja_bridge import sexp as render_sexp
+        from shared.sexp.helpers import sexp_call
 
-        return render_sexp(
-            '(~account-nav-item :href href :label "orders")',
-            href=orders_url("/"),
-        )
+        return sexp_call("account-nav-item",
+                         href=orders_url("/"),
+                         label="orders")
 
     _handlers = {
         "account-nav-item": _account_nav_item,
@@ -34,8 +33,8 @@ def register():
     async def get_fragment(fragment_type: str):
         handler = _handlers.get(fragment_type)
         if handler is None:
-            return Response("", status=200, content_type="text/html")
-        html = await handler()
-        return Response(html, status=200, content_type="text/html")
+            return Response("", status=200, content_type="text/sexp")
+        src = await handler()
+        return Response(src, status=200, content_type="text/sexp")
 
     return bp

orders/bp/order/routes.py

@@ -55,9 +55,11 @@ def register() -> Blueprint:
 
         if not is_htmx_request():
             html = await render_order_page(ctx, order, calendar_entries, url_for)
+            return await make_response(html)
         else:
-            html = await render_order_oob(ctx, order, calendar_entries, url_for)
-        return await make_response(html)
+            from shared.sexp.helpers import sexp_response
+            sexp_src = await render_order_oob(ctx, order, calendar_entries, url_for)
+            return sexp_response(sexp_src)
 
     @bp.get("/pay/")
     async def order_pay(order_id: int):

orders/bp/orders/routes.py

@@ -131,17 +131,22 @@ def register(url_prefix: str) -> Blueprint:
                 ctx, orders, page, total_pages, search, total_count,
                 url_for, qs_fn,
             )
+            resp = await make_response(html)
         elif page > 1:
-            html = await render_orders_rows(
+            # Sexp wire format — client renders order rows
+            from shared.sexp.helpers import sexp_response
+            sexp_src = await render_orders_rows(
                 ctx, orders, page, total_pages, url_for, qs_fn,
             )
+            resp = sexp_response(sexp_src)
         else:
-            html = await render_orders_oob(
+            from shared.sexp.helpers import sexp_response
+            sexp_src = await render_orders_oob(
                 ctx, orders, page, total_pages, search, total_count,
                 url_for, qs_fn,
             )
+            resp = sexp_response(sexp_src)
 
-        resp = await make_response(html)
         resp.headers["Hx-Push-Url"] = _current_url_without_page()
         return _vary(resp)
 

orders/sexp/checkout.sexpr

@@ -6,27 +6,27 @@
     (p :class "text-xs sm:text-sm text-stone-600" "We tried to start your payment with SumUp but hit a problem.")))
 
 (defcomp ~orders-checkout-error-order-id (&key oid)
-  (p :class "text-xs text-rose-800/80" "Order ID: " (span :class "font-mono" (raw! oid))))
+  (p :class "text-xs text-rose-800/80" "Order ID: " (span :class "font-mono" oid)))
 
 (defcomp ~orders-checkout-error-pay-btn (&key url)
   (a :href url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 transition"
     (i :class "fa fa-credit-card mr-2" :aria-hidden "true") "Open payment page"))
 
-(defcomp ~orders-checkout-error-content (&key msg order-html back-url)
+(defcomp ~orders-checkout-error-content (&key msg order back-url)
   (div :class "max-w-full px-3 py-3 space-y-4"
     (div :class "rounded-2xl border border-rose-200 bg-rose-50/80 p-4 sm:p-6 text-sm text-rose-900 space-y-2"
       (p :class "font-medium" "Something went wrong.")
-      (p (raw! msg))
-      (raw! order-html))
+      (p msg)
+      order)
     (div
       (a :href back-url
         :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
         (i :class "fa fa-shopping-cart mr-2" :aria-hidden "true") "Back to cart"))))
 
-(defcomp ~orders-detail-filter (&key created status list-url recheck-url csrf pay-html)
+(defcomp ~orders-detail-filter (&key created status list-url recheck-url csrf pay)
   (header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
     (div :class "space-y-1"
-      (p :class "text-xs sm:text-sm text-stone-600" "Placed " (raw! created) " \u00b7 Status: " (raw! status)))
+      (p :class "text-xs sm:text-sm text-stone-600" "Placed " created " \u00b7 Status: " status))
     (div :class "flex w-full sm:w-auto justify-start sm:justify-end gap-2"
       (a :href list-url :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
         (i :class "fa-solid fa-list mr-2" :aria-hidden "true") "All orders")
@@ -35,4 +35,4 @@
         (button :type "submit"
           :class "inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
           (i :class "fa-solid fa-rotate mr-2" :aria-hidden "true") "Re-check status"))
-      (raw! pay-html))))
+      pay)))

orders/sexp/detail.sexpr

@@ -6,49 +6,49 @@
 (defcomp ~orders-item-no-image ()
   (div :class "w-full h-full flex items-center justify-center text-[9px] text-stone-400" "No image"))
 
-(defcomp ~orders-item-row (&key href img-html title pid qty price)
+(defcomp ~orders-item-row (&key href img title pid qty price)
   (li (a :class "w-full py-2 flex gap-3" :href href
-    (div :class "w-12 h-12 sm:w-14 sm:h-14 rounded-md bg-stone-100 flex-shrink-0 overflow-hidden" (raw! img-html))
+    (div :class "w-12 h-12 sm:w-14 sm:h-14 rounded-md bg-stone-100 flex-shrink-0 overflow-hidden" img)
     (div :class "flex-1 flex justify-between gap-3"
       (div
-        (p :class "font-medium" (raw! title))
-        (p :class "text-[11px] text-stone-500" "Product ID: " (raw! pid)))
+        (p :class "font-medium" title)
+        (p :class "text-[11px] text-stone-500" "Product ID: " pid))
       (div :class "text-right whitespace-nowrap"
-        (p "Qty: " (raw! qty))
-        (p (raw! price)))))))
+        (p "Qty: " qty)
+        (p price))))))
 
-(defcomp ~orders-items-section (&key items-html)
+(defcomp ~orders-items-section (&key items)
   (div :class "rounded-2xl border border-stone-200 bg-white/80 p-4 sm:p-6"
     (h2 :class "text-sm sm:text-base font-semibold mb-3" "Items")
-    (ul :class "divide-y divide-stone-100 text-xs sm:text-sm" (raw! items-html))))
+    (ul :class "divide-y divide-stone-100 text-xs sm:text-sm" items)))
 
 (defcomp ~orders-calendar-item (&key name pill state ds cost)
   (li :class "px-4 py-3 flex items-start justify-between text-sm"
     (div
       (div :class "font-medium flex items-center gap-2"
-        (raw! name)
-        (span :class pill (raw! state)))
-      (div :class "text-xs text-stone-500" (raw! ds)))
-    (div :class "ml-4 font-medium" (raw! cost))))
+        name
+        (span :class pill state))
+      (div :class "text-xs text-stone-500" ds))
+    (div :class "ml-4 font-medium" cost)))
 
-(defcomp ~orders-calendar-section (&key items-html)
+(defcomp ~orders-calendar-section (&key items)
   (section :class "mt-6 space-y-3"
     (h2 :class "text-base sm:text-lg font-semibold" "Calendar bookings in this order")
-    (ul :class "divide-y divide-stone-200 rounded-2xl border border-stone-200 bg-white/80" (raw! items-html))))
+    (ul :class "divide-y divide-stone-200 rounded-2xl border border-stone-200 bg-white/80" items)))
 
-(defcomp ~orders-detail-panel (&key summary-html items-html calendar-html)
+(defcomp ~orders-detail-panel (&key summary items calendar)
   (div :class "max-w-full px-3 py-3 space-y-4"
-    (raw! summary-html) (raw! items-html) (raw! calendar-html)))
+    summary items calendar))
 
-(defcomp ~orders-detail-header-stack (&key auth-html orders-html order-html)
+(defcomp ~orders-detail-header-stack (&key auth orders order)
   (div :id "root-header-child" :class "flex flex-col w-full items-center"
-    (raw! auth-html)
+    auth
     (div :id "auth-header-child" :class "flex flex-col w-full items-center"
-      (raw! orders-html)
+      orders
       (div :id "orders-header-child" :class "flex flex-col w-full items-center"
-        (raw! order-html)))))
+        order))))
 
-(defcomp ~orders-header-child-oob (&key inner-html)
-  (div :id "orders-header-child" :hx-swap-oob "outerHTML"
+(defcomp ~orders-header-child-oob (&key inner)
+  (div :id "orders-header-child" :sx-swap-oob "outerHTML"
     :class "flex flex-col w-full items-center"
-    (raw! inner-html)))
+    inner))

orders/sexp/list.sexpr

@@ -2,11 +2,11 @@
 
 (defcomp ~orders-row-desktop (&key oid created desc total pill status url)
   (tr :class "hidden sm:table-row border-t border-stone-100 hover:bg-stone-50/60"
-    (td :class "px-3 py-2 align-top" (span :class "font-mono text-[11px] sm:text-xs" (raw! oid)))
-    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" (raw! created))
-    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" (raw! desc))
-    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" (raw! total))
-    (td :class "px-3 py-2 align-top" (span :class pill (raw! status)))
+    (td :class "px-3 py-2 align-top" (span :class "font-mono text-[11px] sm:text-xs" oid))
+    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" created)
+    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" desc)
+    (td :class "px-3 py-2 align-top text-stone-700 text-xs sm:text-sm" total)
+    (td :class "px-3 py-2 align-top" (span :class pill status))
     (td :class "px-3 py-0.5 align-top text-right"
       (a :href url :class "inline-flex items-center px-3 py-1.5 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition" "View"))))
 
@@ -15,11 +15,11 @@
     (td :colspan "5" :class "px-3 py-3"
       (div :class "flex flex-col gap-2 text-xs"
         (div :class "flex items-center justify-between gap-2"
-          (span :class "font-mono text-[11px] text-stone-700" (raw! oid))
-          (span :class pill (raw! status)))
-        (div :class "text-[11px] text-stone-500 break-words" (raw! created))
+          (span :class "font-mono text-[11px] text-stone-700" oid)
+          (span :class pill status))
+        (div :class "text-[11px] text-stone-500 break-words" created)
         (div :class "flex items-center justify-between gap-2"
-          (div :class "font-medium text-stone-800" (raw! total))
+          (div :class "font-medium text-stone-800" total)
           (a :href url :class "inline-flex items-center px-2 py-1 text-[11px] rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition shrink-0" "View"))))))
 
 (defcomp ~orders-end-row ()
@@ -30,7 +30,7 @@
     (div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-4 sm:p-6 text-sm text-stone-700"
       "No orders yet.")))
 
-(defcomp ~orders-table (&key rows-html)
+(defcomp ~orders-table (&key rows)
   (div :class "max-w-full px-3 py-3 space-y-3"
     (div :class "overflow-x-auto rounded-2xl border border-stone-200 bg-white/80"
       (table :class "min-w-full text-xs sm:text-sm"
@@ -42,19 +42,19 @@
             (th :class "px-3 py-2 text-left font-medium" "Total")
             (th :class "px-3 py-2 text-left font-medium" "Status")
             (th :class "px-3 py-2 text-left font-medium" "")))
-        (tbody (raw! rows-html))))))
+        (tbody rows)))))
 
-(defcomp ~orders-summary (&key search-mobile-html)
+(defcomp ~orders-summary (&key search-mobile)
   (header :class "mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4"
     (div :class "space-y-1" (p :class "text-xs sm:text-sm text-stone-600" "Recent orders placed via the checkout."))
-    (div :class "md:hidden" (raw! search-mobile-html))))
+    (div :class "md:hidden" search-mobile)))
 
 ;; Header child wrapper
-(defcomp ~orders-header-child (&key inner-html)
+(defcomp ~orders-header-child (&key inner)
   (div :id "root-header-child" :class "flex flex-col w-full items-center"
-    (raw! inner-html)))
+    inner))
 
-(defcomp ~orders-auth-header-child-oob (&key inner-html)
-  (div :id "auth-header-child" :hx-swap-oob "outerHTML"
+(defcomp ~orders-auth-header-child-oob (&key inner)
+  (div :id "auth-header-child" :sx-swap-oob "outerHTML"
     :class "flex flex-col w-full items-center"
-    (raw! inner-html)))
+    inner))

orders/sexp/sexp_components.py

@@ -10,10 +10,12 @@ from __future__ import annotations
 import os
 from typing import Any
 
-from shared.sexp.jinja_bridge import render, load_service_components
+from shared.sexp.jinja_bridge import load_service_components
 from shared.sexp.helpers import (
-    call_url, get_asset_url, root_header_html,
-    search_mobile_html, search_desktop_html, full_page, oob_page,
+    call_url, root_header_sexp,
+    full_page_sexp, header_child_sexp, oob_page_sexp,
+    sexp_call, SexpExpr,
+    search_mobile_sexp, search_desktop_sexp,
 )
 from shared.infrastructure.urls import market_product_url, cart_url
 
@@ -22,39 +24,40 @@ load_service_components(os.path.dirname(os.path.dirname(__file__)))
 
 
 # ---------------------------------------------------------------------------
-# Header helpers (shared auth + orders-specific)
+# Header helpers (shared auth + orders-specific) — sexp-native
 # ---------------------------------------------------------------------------
 
-def _auth_nav_html(ctx: dict) -> str:
-    """Auth section desktop nav items."""
-    html = render(
-        "nav-link",
-        href=call_url(ctx, "account_url", "/newsletters/"),
-        label="newsletters",
-        select_colours=ctx.get("select_colours", ""),
-    )
-    account_nav_html = ctx.get("account_nav_html", "")
-    if account_nav_html:
-        html += account_nav_html
-    return html
+def _auth_nav_sexp(ctx: dict) -> str:
+    """Auth section desktop nav items as sexp."""
+    parts = [
+        sexp_call("nav-link",
+            href=call_url(ctx, "account_url", "/newsletters/"),
+            label="newsletters",
+            select_colours=ctx.get("select_colours", ""),
+        ),
+    ]
+    account_nav = ctx.get("account_nav")
+    if account_nav:
+        parts.append(str(account_nav))
+    return "(<> " + " ".join(parts) + ")"
 
 
-def _auth_header_html(ctx: dict, *, oob: bool = False) -> str:
-    """Build the account section header row."""
-    return render(
-        "menu-row",
+def _auth_header_sexp(ctx: dict, *, oob: bool = False) -> str:
+    """Build the account section header row as sexp."""
+    return sexp_call(
+        "menu-row-sx",
         id="auth-row", level=1, colour="sky",
         link_href=call_url(ctx, "account_url", "/"),
         link_label="account", icon="fa-solid fa-user",
-        nav_html=_auth_nav_html(ctx),
+        nav=SexpExpr(_auth_nav_sexp(ctx)),
         child_id="auth-header-child", oob=oob,
     )
 
 
-def _orders_header_html(ctx: dict, list_url: str) -> str:
-    """Build the orders section header row."""
-    return render(
-        "menu-row",
+def _orders_header_sexp(ctx: dict, list_url: str) -> str:
+    """Build the orders section header row as sexp."""
+    return sexp_call(
+        "menu-row-sx",
         id="orders-row", level=2, colour="sky",
         link_href=list_url, link_label="Orders", icon="fa fa-gbp",
         child_id="orders-header-child",
@@ -75,64 +78,64 @@ def _status_pill_cls(status: str) -> str:
     return "border-stone-300 bg-stone-50 text-stone-700"
 
 
-def _order_row_html(order: Any, detail_url: str) -> str:
-    """Render a single order as desktop table row + mobile card."""
+def _order_row_data(order: Any, detail_url: str) -> dict:
+    """Extract display data from an order model object."""
     status = order.status or "pending"
     pill = _status_pill_cls(status)
     created = order.created_at.strftime("%-d %b %Y, %H:%M") if order.created_at else "\u2014"
     total = f"{order.currency or 'GBP'} {order.total_amount or 0:.2f}"
-
-    desktop = render(
-        "orders-row-desktop",
+    return dict(
         oid=f"#{order.id}", created=created,
         desc=order.description or "", total=total,
-        pill=f"inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] sm:text-xs {pill}",
+        pill_desktop=f"inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] sm:text-xs {pill}",
+        pill_mobile=f"inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] {pill}",
         status=status, url=detail_url,
     )
 
-    mobile = render(
-        "orders-row-mobile",
-        oid=f"#{order.id}", created=created, total=total,
-        pill=f"inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] {pill}",
-        status=status, url=detail_url,
-    )
-
-    return desktop + mobile
 
 
-def _orders_rows_html(orders: list, page: int, total_pages: int,
+def _orders_rows_sexp(orders: list, page: int, total_pages: int,
                       url_for_fn: Any, qs_fn: Any) -> str:
-    """Render order rows + infinite scroll sentinel."""
+    """S-expression wire format for order rows (client renders)."""
     from shared.utils import route_prefix
     pfx = route_prefix()
 
-    parts = [
-        _order_row_html(o, pfx + url_for_fn("orders.order.order_detail", order_id=o.id))
-        for o in orders
-    ]
+    parts = []
+    for o in orders:
+        d = _order_row_data(o, pfx + url_for_fn("orders.order.order_detail", order_id=o.id))
+        parts.append(sexp_call("orders-row-desktop",
+                               oid=d["oid"], created=d["created"],
+                               desc=d["desc"], total=d["total"],
+                               pill=d["pill_desktop"], status=d["status"],
+                               url=d["url"]))
+        parts.append(sexp_call("orders-row-mobile",
+                               oid=d["oid"], created=d["created"],
+                               total=d["total"], pill=d["pill_mobile"],
+                               status=d["status"], url=d["url"]))
 
     if page < total_pages:
         next_url = pfx + url_for_fn("orders.list_orders") + qs_fn(page=page + 1)
-        parts.append(render(
-            "infinite-scroll",
-            url=next_url, page=page, total_pages=total_pages, id_prefix="orders", colspan=5,
-        ))
+        parts.append(sexp_call("infinite-scroll",
+                               url=next_url, page=page,
+                               total_pages=total_pages,
+                               id_prefix="orders", colspan=5))
     else:
-        parts.append(render("orders-end-row"))
+        parts.append(sexp_call("orders-end-row"))
 
-    return "".join(parts)
+    return "(<> " + " ".join(parts) + ")"
 
 
-def _orders_main_panel_html(orders: list, rows_html: str) -> str:
-    """Main panel with table or empty state."""
+def _orders_main_panel_sexp(orders: list, rows_sexp: str) -> str:
+    """Main panel with table or empty state (sexp)."""
     if not orders:
-        return render("orders-empty-state")
-    return render("orders-table", rows_html=rows_html)
+        return sexp_call("orders-empty-state")
+    return sexp_call("orders-table", rows=SexpExpr(rows_sexp))
 
 
-def _orders_summary_html(ctx: dict) -> str:
-    """Filter section for orders list."""
-    return render("orders-summary", search_mobile_html=search_mobile_html(ctx))
+def _orders_summary_sexp(ctx: dict) -> str:
+    """Filter section for orders list (sexp)."""
+    return sexp_call("orders-summary", search_mobile=SexpExpr(search_mobile_sexp(ctx)))
+
 
 
 # ---------------------------------------------------------------------------
@@ -143,97 +146,94 @@ async def render_orders_page(ctx: dict, orders: list, page: int,
                              total_pages: int, search: str | None,
                              search_count: int, url_for_fn: Any,
                              qs_fn: Any) -> str:
-    """Full page: orders list."""
+    """Full page: orders list (sexp wire format)."""
     from shared.utils import route_prefix
 
     ctx["search"] = search
     ctx["search_count"] = search_count
     list_url = route_prefix() + url_for_fn("orders.list_orders")
 
-    rows = _orders_rows_html(orders, page, total_pages, url_for_fn, qs_fn)
-    main = _orders_main_panel_html(orders, rows)
+    rows = _orders_rows_sexp(orders, page, total_pages, url_for_fn, qs_fn)
+    main = _orders_main_panel_sexp(orders, rows)
 
-    hdr = root_header_html(ctx)
-    hdr += render(
-        "orders-header-child",
-        inner_html=_auth_header_html(ctx) + _orders_header_html(ctx, list_url),
-    )
+    hdr = root_header_sexp(ctx)
+    inner = "(<> " + _auth_header_sexp(ctx) + " " + _orders_header_sexp(ctx, list_url) + ")"
+    hdr = "(<> " + hdr + " " + header_child_sexp(inner) + ")"
 
-    return full_page(ctx, header_rows_html=hdr,
-                     filter_html=_orders_summary_html(ctx),
-                     aside_html=search_desktop_html(ctx),
-                     content_html=main)
+    return full_page_sexp(ctx, header_rows=hdr,
+                          filter=_orders_summary_sexp(ctx),
+                          aside=search_desktop_sexp(ctx),
+                          content=main)
 
 
 async def render_orders_rows(ctx: dict, orders: list, page: int,
                              total_pages: int, url_for_fn: Any,
                              qs_fn: Any) -> str:
-    """Pagination: just the table rows."""
-    return _orders_rows_html(orders, page, total_pages, url_for_fn, qs_fn)
+    """Pagination: just the table rows (sexp wire format)."""
+    return _orders_rows_sexp(orders, page, total_pages, url_for_fn, qs_fn)
+
 
 
 async def render_orders_oob(ctx: dict, orders: list, page: int,
                             total_pages: int, search: str | None,
                             search_count: int, url_for_fn: Any,
                             qs_fn: Any) -> str:
-    """OOB response for HTMX navigation to orders list."""
+    """OOB response for HTMX navigation to orders list (sexp)."""
     from shared.utils import route_prefix
 
     ctx["search"] = search
     ctx["search_count"] = search_count
     list_url = route_prefix() + url_for_fn("orders.list_orders")
 
-    rows = _orders_rows_html(orders, page, total_pages, url_for_fn, qs_fn)
-    main = _orders_main_panel_html(orders, rows)
+    rows = _orders_rows_sexp(orders, page, total_pages, url_for_fn, qs_fn)
+    main = _orders_main_panel_sexp(orders, rows)
 
-    oobs = (
-        _auth_header_html(ctx, oob=True)
-        + render(
-            "orders-auth-header-child-oob",
-            inner_html=_orders_header_html(ctx, list_url),
-        )
-        + root_header_html(ctx, oob=True)
-    )
+    auth_hdr = _auth_header_sexp(ctx, oob=True)
+    auth_child_oob = sexp_call("orders-auth-header-child-oob",
+                                inner=SexpExpr(_orders_header_sexp(ctx, list_url)))
+    root_hdr = root_header_sexp(ctx, oob=True)
+    oobs = "(<> " + auth_hdr + " " + auth_child_oob + " " + root_hdr + ")"
 
-    return oob_page(ctx, oobs_html=oobs,
-                    filter_html=_orders_summary_html(ctx),
-                    aside_html=search_desktop_html(ctx),
-                    content_html=main)
+    return oob_page_sexp(oobs=oobs,
+                         filter=_orders_summary_sexp(ctx),
+                         aside=search_desktop_sexp(ctx),
+                         content=main)
 
 
 # ---------------------------------------------------------------------------
 # Single order detail
 # ---------------------------------------------------------------------------
 
-def _order_items_html(order: Any) -> str:
-    """Render order items list."""
+def _order_items_sexp(order: Any) -> str:
+    """Render order items list as sexp."""
     if not order or not order.items:
         return ""
     items = []
     for item in order.items:
         prod_url = market_product_url(item.product_slug)
         if item.product_image:
-            img = render(
+            img = sexp_call(
                 "orders-item-image",
                 src=item.product_image, alt=item.product_title or "Product image",
             )
         else:
-            img = render("orders-item-no-image")
+            img = sexp_call("orders-item-no-image")
 
-        items.append(render(
+        items.append(sexp_call(
             "orders-item-row",
-            href=prod_url, img_html=img,
+            href=prod_url, img=SexpExpr(img),
             title=item.product_title or "Unknown product",
             pid=str(item.product_id),
             qty=str(item.quantity),
             price=f"{item.currency or order.currency or 'GBP'} {item.unit_price or 0:.2f}",
         ))
 
-    return render("orders-items-section", items_html="".join(items))
+    items_sexp = "(<> " + " ".join(items) + ")"
+    return sexp_call("orders-items-section", items=SexpExpr(items_sexp))
 
 
-def _calendar_items_html(calendar_entries: list | None) -> str:
-    """Render calendar bookings for an order."""
+def _calendar_items_sexp(calendar_entries: list | None) -> str:
+    """Render calendar bookings for an order as sexp."""
     if not calendar_entries:
         return ""
     items = []
@@ -248,7 +248,7 @@ def _calendar_items_html(calendar_entries: list | None) -> str:
         ds = e.start_at.strftime("%-d %b %Y, %H:%M") if e.start_at else ""
         if e.end_at:
             ds += f" \u2013 {e.end_at.strftime('%-d %b %Y, %H:%M')}"
-        items.append(render(
+        items.append(sexp_call(
             "orders-calendar-item",
             name=e.name,
             pill=f"inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium {pill}",
@@ -256,47 +256,52 @@ def _calendar_items_html(calendar_entries: list | None) -> str:
             cost=f"\u00a3{e.cost or 0:.2f}",
         ))
 
-    return render("orders-calendar-section", items_html="".join(items))
+    items_sexp = "(<> " + " ".join(items) + ")"
+    return sexp_call("orders-calendar-section", items=SexpExpr(items_sexp))
 
 
-def _order_main_html(order: Any, calendar_entries: list | None) -> str:
-    """Main panel for single order detail."""
-    summary = render(
+def _order_main_sexp(order: Any, calendar_entries: list | None) -> str:
+    """Main panel for single order detail (sexp)."""
+    summary = sexp_call(
         "order-summary-card",
         order_id=order.id,
         created_at=order.created_at.strftime("%-d %b %Y, %H:%M") if order.created_at else None,
         description=order.description, status=order.status, currency=order.currency,
         total_amount=f"{order.total_amount:.2f}" if order.total_amount else None,
     )
-    return render(
+    items = _order_items_sexp(order)
+    calendar = _calendar_items_sexp(calendar_entries)
+    return sexp_call(
         "orders-detail-panel",
-        summary_html=summary, items_html=_order_items_html(order),
-        calendar_html=_calendar_items_html(calendar_entries),
+        summary=SexpExpr(summary),
+        items=SexpExpr(items) if items else None,
+        calendar=SexpExpr(calendar) if calendar else None,
     )
 
 
-def _order_filter_html(order: Any, list_url: str, recheck_url: str,
+def _order_filter_sexp(order: Any, list_url: str, recheck_url: str,
                        pay_url: str, csrf_token: str) -> str:
-    """Filter section for single order detail."""
+    """Filter section for single order detail (sexp)."""
     created = order.created_at.strftime("%-d %b %Y, %H:%M") if order.created_at else "\u2014"
     status = order.status or "pending"
 
-    pay_html = ""
+    pay = ""
     if status != "paid":
-        pay_html = render("orders-checkout-error-pay-btn", url=pay_url)
+        pay = sexp_call("orders-checkout-error-pay-btn", url=pay_url)
 
-    return render(
+    return sexp_call(
         "orders-detail-filter",
         created=created, status=status,
         list_url=list_url, recheck_url=recheck_url,
-        csrf=csrf_token, pay_html=pay_html,
+        csrf=csrf_token,
+        pay=SexpExpr(pay) if pay else None,
     )
 
 
 async def render_order_page(ctx: dict, order: Any,
                             calendar_entries: list | None,
                             url_for_fn: Any) -> str:
-    """Full page: single order detail."""
+    """Full page: single order detail (sexp wire format)."""
     from shared.utils import route_prefix
     from shared.browser.app.csrf import generate_csrf_token
 
@@ -306,30 +311,31 @@ async def render_order_page(ctx: dict, order: Any,
     recheck_url = pfx + url_for_fn("orders.order.order_recheck", order_id=order.id)
     pay_url = pfx + url_for_fn("orders.order.order_pay", order_id=order.id)
 
-    main = _order_main_html(order, calendar_entries)
-    filt = _order_filter_html(order, list_url, recheck_url, pay_url, generate_csrf_token())
+    main = _order_main_sexp(order, calendar_entries)
+    filt = _order_filter_sexp(order, list_url, recheck_url, pay_url, generate_csrf_token())
 
     # Header stack: root -> auth -> orders -> order
-    hdr = root_header_html(ctx)
-    order_row = render(
-        "menu-row",
+    hdr = root_header_sexp(ctx)
+    order_row = sexp_call(
+        "menu-row-sx",
         id="order-row", level=3, colour="sky", link_href=detail_url,
         link_label="Order", icon="fa fa-gbp",
     )
-    hdr += render(
+    detail_header = sexp_call(
         "orders-detail-header-stack",
-        auth_html=_auth_header_html(ctx),
-        orders_html=_orders_header_html(ctx, list_url),
-        order_html=order_row,
+        auth=SexpExpr(_auth_header_sexp(ctx)),
+        orders=SexpExpr(_orders_header_sexp(ctx, list_url)),
+        order=SexpExpr(order_row),
     )
+    hdr = "(<> " + hdr + " " + detail_header + ")"
 
-    return full_page(ctx, header_rows_html=hdr, filter_html=filt, content_html=main)
+    return full_page_sexp(ctx, header_rows=hdr, filter=filt, content=main)
 
 
 async def render_order_oob(ctx: dict, order: Any,
                            calendar_entries: list | None,
                            url_for_fn: Any) -> str:
-    """OOB response for single order detail."""
+    """OOB response for single order detail (sexp)."""
     from shared.utils import route_prefix
     from shared.browser.app.csrf import generate_csrf_token
 
@@ -339,49 +345,49 @@ async def render_order_oob(ctx: dict, order: Any,
     recheck_url = pfx + url_for_fn("orders.order.order_recheck", order_id=order.id)
     pay_url = pfx + url_for_fn("orders.order.order_pay", order_id=order.id)
 
-    main = _order_main_html(order, calendar_entries)
-    filt = _order_filter_html(order, list_url, recheck_url, pay_url, generate_csrf_token())
+    main = _order_main_sexp(order, calendar_entries)
+    filt = _order_filter_sexp(order, list_url, recheck_url, pay_url, generate_csrf_token())
 
-    order_row_oob = render(
-        "menu-row",
+    order_row_oob = sexp_call(
+        "menu-row-sx",
         id="order-row", level=3, colour="sky", link_href=detail_url,
         link_label="Order", icon="fa fa-gbp", oob=True,
     )
-    oobs = (
-        render("orders-header-child-oob", inner_html=order_row_oob)
-        + root_header_html(ctx, oob=True)
-    )
+    header_child_oob = sexp_call("orders-header-child-oob",
+                                  inner=SexpExpr(order_row_oob))
+    root_hdr = root_header_sexp(ctx, oob=True)
+    oobs = "(<> " + header_child_oob + " " + root_hdr + ")"
 
-    return oob_page(ctx, oobs_html=oobs, filter_html=filt, content_html=main)
+    return oob_page_sexp(oobs=oobs, filter=filt, content=main)
 
 
 # ---------------------------------------------------------------------------
 # Public API: Checkout error
 # ---------------------------------------------------------------------------
 
-def _checkout_error_filter_html() -> str:
-    return render("orders-checkout-error-header")
+def _checkout_error_filter_sexp() -> str:
+    return sexp_call("orders-checkout-error-header")
 
 
-def _checkout_error_content_html(error: str | None, order: Any | None) -> str:
+def _checkout_error_content_sexp(error: str | None, order: Any | None) -> str:
     err_msg = error or "Unexpected error while creating the hosted checkout session."
-    order_html = ""
+    order_sexp = ""
     if order:
-        order_html = render("orders-checkout-error-order-id", oid=f"#{order.id}")
+        order_sexp = sexp_call("orders-checkout-error-order-id", oid=f"#{order.id}")
     back_url = cart_url("/")
-    return render(
+    return sexp_call(
         "orders-checkout-error-content",
-        msg=err_msg, order_html=order_html, back_url=back_url,
+        msg=err_msg,
+        order=SexpExpr(order_sexp) if order_sexp else None,
+        back_url=back_url,
     )
 
 
 async def render_checkout_error_page(ctx: dict, error: str | None = None, order: Any | None = None) -> str:
-    """Full page: checkout error."""
-    hdr = root_header_html(ctx)
-    hdr += render(
-        "orders-header-child",
-        inner_html=_auth_header_html(ctx),
-    )
-    filt = _checkout_error_filter_html()
-    content = _checkout_error_content_html(error, order)
-    return full_page(ctx, header_rows_html=hdr, filter_html=filt, content_html=content)
+    """Full page: checkout error (sexp wire format)."""
+    hdr = root_header_sexp(ctx)
+    inner = _auth_header_sexp(ctx)
+    hdr = "(<> " + hdr + " " + header_child_sexp(inner) + ")"
+    filt = _checkout_error_filter_sexp()
+    content = _checkout_error_content_sexp(error, order)
+    return full_page_sexp(ctx, header_rows=hdr, filter=filt, content=content)

orders/templates/_types/orders/_rows.html

@@ -102,43 +102,10 @@
 {% if page < total_pages|int %}
   <tr
     id="orders-sentinel-{{ page }}"
-    hx-get="{{ (current_local_href ~ {'page': page + 1}|qs)|host }}"
-    hx-trigger="intersect once delay:250ms, sentinel:retry"
-    hx-swap="outerHTML"
-    _="
-      init
-        if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end
-
-      on sentinel:retry
-        remove .hidden from .js-loading in me
-        add .hidden to .js-neterr in me
-        set me.style.pointerEvents to 'none'
-        set me.style.opacity to '0'
-        trigger htmx:consume on me
-        call htmx.trigger(me, 'intersect')
-      end
-
-      def backoff()
-        add .hidden to .js-loading in me
-        remove .hidden from .js-neterr in me
-        set myMs to Number(me.dataset.retryMs)
-        if myMs < 10000 then set me.dataset.retryMs to myMs * 2 end
-        js setTimeout(() => htmx.trigger(me, 'sentinel:retry'), myMs)
-      end
-
-      on htmx:beforeRequest
-        set me.style.pointerEvents to 'none'
-        set me.style.opacity to '0'
-      end
-
-      on htmx:afterSwap
-        set me.dataset.retryMs to 1000
-      end
-
-      on htmx:sendError     call backoff()
-      on htmx:responseError call backoff()
-      on htmx:timeout       call backoff()
-    "
+    sx-get="{{ (current_local_href ~ {'page': page + 1}|qs)|host }}"
+    sx-trigger="intersect once delay:250ms"
+    sx-swap="outerHTML"
+    sx-retry="exponential:1000:30000"
     role="status"
     aria-live="polite"
     aria-hidden="true"