Use lazy import for quart.Response in sexp_response helper

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

shared/sexp/helpers.py

@@ -225,6 +225,25 @@ def full_page(ctx: dict, *, header_rows_html: str,
     )
 
 
+def sexp_response(sexp_source: str, status: int = 200,
+                   headers: dict | None = None):
+    """Return an s-expression wire-format response.
+
+    The client-side sexp.js will intercept responses with Content-Type
+    text/sexp and render them before HTMX swaps the result in.
+
+    Usage in a route handler::
+
+        return sexp_response('(~test-row :nodeid "test_foo" :outcome "passed")')
+    """
+    from quart import Response
+    resp = Response(sexp_source, status=status, content_type="text/sexp")
+    if headers:
+        for k, v in headers.items():
+            resp.headers[k] = v
+    return resp
+
+
 def oob_page(ctx: dict, *, oobs_html: str = "",
              filter_html: str = "", aside_html: str = "",
              content_html: str = "", menu_html: str = "") -> str:

shared/sexp/jinja_bridge.py

@@ -201,6 +201,40 @@ def _get_request_context():
 # Quart integration
 # ---------------------------------------------------------------------------
 
+def client_components_tag(*names: str) -> str:
+    """Emit a <script type="text/sexp"> tag with component definitions.
+
+    Reads the source definitions from loaded .sexpr files and sends them
+    to the client so sexp.js can render them identically.
+
+    Usage in Python::
+
+        body_end_html = client_components_tag("test-filter-card", "test-row")
+
+    Or send all loaded components::
+
+        body_end_html = client_components_tag()
+    """
+    from .parser import serialize
+    parts = []
+    for key, val in _COMPONENT_ENV.items():
+        if not isinstance(val, Component):
+            continue
+        if names and val.name not in names and key.lstrip("~") not in names:
+            continue
+        # Reconstruct defcomp source from the Component object
+        param_strs = ["&key"] + list(val.params)
+        if val.has_children:
+            param_strs.extend(["&rest", "children"])
+        params_sexp = "(" + " ".join(param_strs) + ")"
+        body_sexp = serialize(val.body, pretty=True)
+        parts.append(f"(defcomp ~{val.name} {params_sexp} {body_sexp})")
+    if not parts:
+        return ""
+    source = "\n".join(parts)
+    return f'<script type="text/sexp" data-components>{source}</script>'
+
+
 def setup_sexp_bridge(app: Any) -> None:
     """Register s-expression helpers with a Quart app's Jinja environment.
 

shared/sexp/templates/layout.sexp

@@ -70,6 +70,7 @@
                     (when content-html (raw! content-html))
                     (div :class "pb-8"))))))
           (when body-end-html (raw! body-end-html))
+          (script :src (str asset-url "/scripts/sexp.js"))
           (script :src (str asset-url "/scripts/body.js")))))))
 
 (defcomp ~oob-response (&key oobs-html filter-html aside-html menu-html content-html)

shared/sexp/tests/test_sexp_js.py

@@ -133,6 +133,36 @@ class TestComponents:
         assert html == '<div><span>hi</span></div>'
 
 
+class TestClientComponentsTag:
+    """client_components_tag() generates valid sexp for JS consumption."""
+
+    def test_emits_script_tag(self):
+        from shared.sexp.jinja_bridge import client_components_tag, register_components, _COMPONENT_ENV
+        # Register a test component
+        register_components('(defcomp ~test-cct (&key label) (span label))')
+        try:
+            tag = client_components_tag("test-cct")
+            assert tag.startswith('<script type="text/sexp" data-components>')
+            assert tag.endswith('</script>')
+            assert "defcomp ~test-cct" in tag
+        finally:
+            _COMPONENT_ENV.pop("~test-cct", None)
+
+    def test_roundtrip_through_js(self):
+        """Component emitted by client_components_tag renders identically in JS."""
+        from shared.sexp.jinja_bridge import client_components_tag, register_components, _COMPONENT_ENV
+        register_components('(defcomp ~test-rt (&key title) (div :class "rt" title))')
+        try:
+            tag = client_components_tag("test-rt")
+            # Extract the sexp source from the script tag
+            sexp_source = tag.replace('<script type="text/sexp" data-components>', '').replace('</script>', '')
+            js_html = _js_render('(~test-rt :title "hello")', sexp_source)
+            py_html = py_render(parse('(~test-rt :title "hello")'), _COMPONENT_ENV)
+            assert js_html == py_html
+        finally:
+            _COMPONENT_ENV.pop("~test-rt", None)
+
+
 class TestPythonParity:
     """JS string renderer matches Python renderer output."""
 

shared/static/scripts/sexp.js

@@ -1141,6 +1141,97 @@
     isTruthy: isSexpTruthy,
     isNil: isNil,
 
+    /**
+     * Mount a sexp expression into a DOM element, replacing its contents.
+     *   Sexp.mount(el, '(~card :title "Hi")')
+     *   Sexp.mount("#target", '(~card :title "Hi")')
+     *   Sexp.mount(el, '(~card :title name)', {name: "Jo"})
+     */
+    mount: function (target, exprOrText, extraEnv) {
+      var el = typeof target === "string" ? document.querySelector(target) : target;
+      if (!el) return;
+      var node = Sexp.render(exprOrText, extraEnv);
+      el.textContent = "";
+      el.appendChild(node);
+    },
+
+    /**
+     * Process all <script type="text/sexp"> tags in the document.
+     * Tags with data-components load component definitions.
+     * Tags with data-mount="<selector>" render into that element.
+     */
+    processScripts: function (root) {
+      var scripts = (root || document).querySelectorAll('script[type="text/sexp"]');
+      for (var i = 0; i < scripts.length; i++) {
+        var s = scripts[i];
+        if (s._sexpProcessed) continue;
+        s._sexpProcessed = true;
+
+        var text = s.textContent;
+        if (!text || !text.trim()) continue;
+
+        // data-components: load as component definitions
+        if (s.hasAttribute("data-components")) {
+          Sexp.loadComponents(text);
+          continue;
+        }
+
+        // data-mount="<selector>": render into target
+        var mountSel = s.getAttribute("data-mount");
+        if (mountSel) {
+          var target = document.querySelector(mountSel);
+          if (target) Sexp.mount(target, text);
+          continue;
+        }
+
+        // Default: load as components
+        Sexp.loadComponents(text);
+      }
+    },
+
+    /**
+     * Bind client-side sexp rendering to elements with data-sexp-* attrs.
+     *
+     * Pattern:
+     *   <div data-sexp="(~card :title title)" data-sexp-env='{"title":"Hi"}'>
+     *     <!-- server-rendered HTML (hydration target) -->
+     *   </div>
+     *
+     * Call Sexp.update(el, {title: "New"}) to re-render with new data.
+     */
+    update: function (target, newEnv) {
+      var el = typeof target === "string" ? document.querySelector(target) : target;
+      if (!el) return;
+      var source = el.getAttribute("data-sexp");
+      if (!source) return;
+      var baseEnv = {};
+      var envAttr = el.getAttribute("data-sexp-env");
+      if (envAttr) {
+        try { baseEnv = JSON.parse(envAttr); } catch (e) { /* ignore */ }
+      }
+      var env = merge({}, _componentEnv, baseEnv, newEnv || {});
+      var node = renderDOM(parse(source), env);
+      el.textContent = "";
+      el.appendChild(node);
+      if (newEnv) {
+        merge(baseEnv, newEnv);
+        el.setAttribute("data-sexp-env", JSON.stringify(baseEnv));
+      }
+    },
+
+    /**
+     * Find all [data-sexp] elements within root and render them.
+     * Useful after HTMX swaps bring in new sexp-enabled elements.
+     */
+    hydrate: function (root) {
+      var els = (root || document).querySelectorAll("[data-sexp]");
+      for (var i = 0; i < els.length; i++) {
+        if (els[i]._sexpHydrated) continue;
+        els[i]._sexpHydrated = true;
+        Sexp.update(els[i]);
+      }
+    },
+
     // For testing
     _types: { NIL: NIL, Symbol: Symbol, Keyword: Keyword, Lambda: Lambda, Component: Component, RawHTML: RawHTML },
     _eval: sexpEval,
@@ -1150,4 +1241,38 @@
 
   global.Sexp = Sexp;
 
+  // =========================================================================
+  // Auto-init in browser
+  // =========================================================================
+
+  if (typeof document !== "undefined") {
+    var init = function () {
+      Sexp.processScripts();
+      Sexp.hydrate();
+    };
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", init);
+    } else {
+      init();
+    }
+
+    // Re-process after HTMX swaps
+    document.addEventListener("htmx:afterSwap", function (e) {
+      Sexp.processScripts(e.detail.target);
+      Sexp.hydrate(e.detail.target);
+    });
+
+    // S-expression wire format: intercept text/sexp responses and render to HTML
+    // before HTMX swaps them in.  Server sends Content-Type: text/sexp with
+    // s-expression body; sexp.js renders to HTML string for HTMX to swap.
+    document.addEventListener("htmx:beforeSwap", function (e) {
+      var xhr = e.detail.xhr;
+      var ct = xhr.getResponseHeader("Content-Type") || "";
+      if (ct.indexOf("text/sexp") === -1) return;
+      // Render s-expression response to HTML string
+      var html = Sexp.renderToString(xhr.responseText);
+      e.detail.serverResponse = html;
+    });
+  }
+
 })(typeof window !== "undefined" ? window : this);

test/bp/dashboard/routes.py

@@ -48,6 +48,32 @@ def register(url_prefix: str = "/") -> Blueprint:
         from quart import redirect as qredirect
         return qredirect("/")
 
+    @bp.get("/test/<path:nodeid>")
+    async def test_detail(nodeid: str):
+        """Test detail view — full page or sexp wire format."""
+        import runner
+
+        test = runner.get_test(nodeid)
+        if not test:
+            from quart import abort
+            abort(404)
+
+        is_htmx = bool(request.headers.get("HX-Request"))
+
+        if is_htmx:
+            # S-expression wire format — sexp.js renders client-side
+            from shared.sexp.helpers import sexp_response
+            from sexp.sexp_components import test_detail_sexp
+            return sexp_response(test_detail_sexp(test))
+
+        # Full page render (direct navigation / refresh)
+        from shared.sexp.page import get_template_context
+        from sexp.sexp_components import render_test_detail_page
+
+        ctx = await get_template_context()
+        html = await render_test_detail_page(ctx, test)
+        return await make_response(html, 200)
+
     @bp.get("/results")
     async def results():
         """HTMX partial — poll target for results table."""

test/sexp/dashboard.sexpr

@@ -77,7 +77,15 @@
               (if (= outcome "failed") "bg-rose-50"
               (if (= outcome "skipped") "bg-sky-50"
               "bg-orange-50"))))
-    (td :class "px-3 py-2 text-sm font-mono text-stone-700 max-w-0 truncate" :title nodeid nodeid)
+    (td :class "px-3 py-2 text-sm font-mono text-stone-700 max-w-0 truncate" :title nodeid
+      (a :href (str "/test/" nodeid)
+         :hx-get (str "/test/" nodeid)
+         :hx-target "#main-panel"
+         :hx-select "#main-panel"
+         :hx-swap "outerHTML"
+         :hx-push-url "true"
+         :class "hover:underline hover:text-sky-600"
+        nodeid))
     (td :class "px-3 py-2 text-center"
       (span :class (str "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium "
                     (if (= outcome "passed") "border-emerald-300 bg-emerald-50 text-emerald-700"
@@ -111,3 +119,30 @@
     (div :class "text-center"
       (div :class "text-4xl mb-2" "?")
       (div :class "text-sm" "No test results yet. Click Run Tests to start."))))
+
+(defcomp ~test-detail (&key nodeid outcome duration longrepr)
+  (div :class "space-y-6 p-4"
+    (div :class "flex items-center gap-3"
+      (a :href "/"
+         :hx-get "/"
+         :hx-target "#main-panel"
+         :hx-select "#main-panel"
+         :hx-swap "outerHTML"
+         :hx-push-url "true"
+         :class "text-sky-600 hover:text-sky-800 text-sm"
+        "← Back to results")
+      (span :class (str "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium "
+                    (if (= outcome "passed") "border-emerald-300 bg-emerald-50 text-emerald-700"
+                    (if (= outcome "failed") "border-rose-300 bg-rose-50 text-rose-700"
+                    (if (= outcome "skipped") "border-sky-300 bg-sky-50 text-sky-700"
+                    "border-orange-300 bg-orange-50 text-orange-700"))))
+        outcome))
+    (div :class "rounded border border-stone-200 bg-white p-4 space-y-3"
+      (h2 :class "text-lg font-mono font-semibold text-stone-800 break-all" nodeid)
+      (div :class "flex gap-4 text-sm text-stone-500"
+        (span (str "Duration: " duration "s")))
+      (when longrepr
+        (div :class "mt-4"
+          (h3 :class "text-sm font-semibold text-rose-700 mb-2" "Error Output")
+          (pre :class "bg-stone-50 border border-stone-200 rounded p-3 text-xs text-stone-700 overflow-x-auto whitespace-pre-wrap"
+            longrepr))))))

test/sexp/sexp_components.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 import os
 from datetime import datetime
 
-from shared.sexp.jinja_bridge import render, load_service_components
+from shared.sexp.jinja_bridge import render, load_service_components, client_components_tag
 from shared.sexp.helpers import root_header_html, full_page
 
 # Load test-specific .sexpr components at import time
@@ -196,7 +196,9 @@ async def render_dashboard_page(ctx: dict, result: dict | None,
     hdr = _header_stack_html(ctx, active_service)
     inner = _results_partial_html(result, running, csrf, active_filter, active_service)
     content = _wrap_results_div(inner, running)
-    return full_page(ctx, header_rows_html=hdr, content_html=content)
+    body_end = client_components_tag()
+    return full_page(ctx, header_rows_html=hdr, content_html=content,
+                     body_end_html=body_end)
 
 
 async def render_results_partial(result: dict | None, running: bool,
@@ -206,3 +208,46 @@ async def render_results_partial(result: dict | None, running: bool,
     """HTMX partial: just the results section (wrapped in polling div)."""
     inner = _results_partial_html(result, running, csrf, active_filter, active_service)
     return _wrap_results_div(inner, running)
+
+
+async def render_test_detail_page(ctx: dict, test: dict) -> str:
+    """Full page: test detail view."""
+    hdr = _header_stack_html(ctx)
+    detail_row = render(
+        "menu-row",
+        id="test-detail-row", level=2, colour="sky",
+        link_href=f"/test/{test['nodeid']}",
+        link_label=test["nodeid"].rsplit("::", 1)[-1],
+    )
+    hdr += render("header-child", id="test-header-child",
+                  inner_html=detail_row)
+    content = render(
+        "test-detail",
+        nodeid=test["nodeid"],
+        outcome=test["outcome"],
+        duration=str(test["duration"]),
+        longrepr=test.get("longrepr", ""),
+    )
+    body_end = client_components_tag()
+    return full_page(ctx, header_rows_html=hdr, content_html=content,
+                     body_end_html=body_end)
+
+
+def test_detail_sexp(test: dict) -> str:
+    """Return s-expression wire format for a test detail view.
+
+    When a client has sexp.js loaded (HTMX navigation from the dashboard),
+    we can send the raw s-expression instead of pre-rendered HTML.
+    sexp.js will render it client-side.
+    """
+    from shared.sexp.parser import serialize
+    nodeid = serialize(test["nodeid"])
+    outcome = serialize(test["outcome"])
+    duration = serialize(str(test["duration"]))
+    longrepr = serialize(test.get("longrepr", ""))
+    return (
+        f"(section :id \"main-panel\""
+        f" :class \"flex-1 md:h-full md:min-h-0 overflow-y-auto overscroll-contain js-grid-viewport\""
+        f" (~test-detail :nodeid {nodeid} :outcome {outcome}"
+        f" :duration {duration} :longrepr {longrepr}))"
+    )