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/html.py

@@ -396,7 +396,9 @@ def _render_list(expr: list, env: dict[str, Any]) -> str:
             parts = []
             for arg in expr[1:]:
                 val = _eval(arg, env)
-                if isinstance(val, str):
+                if isinstance(val, _RawHTML):
+                    parts.append(val.html)
+                elif isinstance(val, str):
                     parts.append(val)
                 elif val is not None and val is not NIL:
                     parts.append(str(val))

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

@@ -0,0 +1,205 @@
+"""Test sexp.js string renderer matches Python renderer output.
+
+Runs sexp.js through Node.js and compares output with Python.
+"""
+from __future__ import annotations
+
+import json
+import subprocess
+from pathlib import Path
+
+import pytest
+
+from shared.sexp.parser import parse, parse_all
+from shared.sexp.html import render as py_render
+from shared.sexp.evaluator import evaluate
+
+SEXP_JS = Path(__file__).resolve().parents[2] / "static" / "scripts" / "sexp.js"
+
+
+def _js_render(sexp_text: str, components_text: str = "") -> str:
+    """Run sexp.js in Node and return the renderToString result."""
+    # Build a small Node script
+    script = f"""
+    global.document = undefined;  // no DOM needed for string render
+    {SEXP_JS.read_text()}
+    if ({json.dumps(components_text)}) Sexp.loadComponents({json.dumps(components_text)});
+    var result = Sexp.renderToString({json.dumps(sexp_text)});
+    process.stdout.write(result);
+    """
+    result = subprocess.run(
+        ["node", "-e", script],
+        capture_output=True, text=True, timeout=5,
+    )
+    if result.returncode != 0:
+        pytest.fail(f"Node.js error:\n{result.stderr}")
+    return result.stdout
+
+
+class TestParserParity:
+    """Parser produces equivalent structures."""
+
+    def test_simple_element(self):
+        assert _js_render('(div "hello")') == '<div>hello</div>'
+
+    def test_nested_elements(self):
+        html = _js_render('(div :class "card" (p "text"))')
+        assert html == '<div class="card"><p>text</p></div>'
+
+    def test_void_element(self):
+        assert _js_render('(img :src "a.jpg")') == '<img src="a.jpg">'
+        assert _js_render('(br)') == '<br>'
+
+    def test_boolean_attr(self):
+        assert _js_render('(input :disabled true :type "text")') == '<input disabled type="text">'
+
+    def test_nil_attr_omitted(self):
+        assert _js_render('(div :class nil "hi")') == '<div>hi</div>'
+
+    def test_false_attr_omitted(self):
+        assert _js_render('(div :class false "hi")') == '<div>hi</div>'
+
+    def test_numbers(self):
+        assert _js_render('(span 42)') == '<span>42</span>'
+
+    def test_escaping(self):
+        html = _js_render('(div "<script>alert(1)</script>")')
+        assert "&lt;script&gt;" in html
+
+
+class TestSpecialForms:
+    """Special forms render correctly."""
+
+    def test_if_true(self):
+        assert _js_render('(if true (span "yes") (span "no"))') == '<span>yes</span>'
+
+    def test_if_false(self):
+        assert _js_render('(if false (span "yes") (span "no"))') == '<span>no</span>'
+
+    def test_if_nil(self):
+        assert _js_render('(if nil (span "yes") (span "no"))') == '<span>no</span>'
+
+    def test_when_true(self):
+        assert _js_render('(when true (span "yes"))') == '<span>yes</span>'
+
+    def test_when_false(self):
+        assert _js_render('(when false (span "yes"))') == ''
+
+    def test_str(self):
+        assert _js_render('(div (str "a" "b" "c"))') == '<div>abc</div>'
+
+    def test_fragment(self):
+        assert _js_render('(<> (span "a") (span "b"))') == '<span>a</span><span>b</span>'
+
+    def test_let(self):
+        assert _js_render('(let ((x "hello")) (div x))') == '<div>hello</div>'
+
+    def test_let_clojure_style(self):
+        assert _js_render('(let (x "hello" y "world") (div (str x " " y)))') == '<div>hello world</div>'
+
+    def test_and(self):
+        assert _js_render('(when (and true true) (span "ok"))') == '<span>ok</span>'
+        assert _js_render('(when (and true false) (span "ok"))') == ''
+
+    def test_or(self):
+        assert _js_render('(div (or nil "fallback"))') == '<div>fallback</div>'
+
+
+class TestComponents:
+    """Component definition and rendering."""
+
+    CARD = '(defcomp ~card (&key title) (div :class "card" (h2 title)))'
+
+    def test_simple_component(self):
+        html = _js_render('(~card :title "Hello")', self.CARD)
+        assert html == '<div class="card"><h2>Hello</h2></div>'
+
+    def test_component_with_children(self):
+        comp = '(defcomp ~box (&key &rest children) (div :class "box" (raw! children)))'
+        html = _js_render('(~box (p "inside"))', comp)
+        assert html == '<div class="box"><p>inside</p></div>'
+
+    def test_component_with_conditional(self):
+        comp = '(defcomp ~badge (&key show label) (when show (span label)))'
+        assert _js_render('(~badge :show true :label "ok")', comp) == '<span>ok</span>'
+        assert _js_render('(~badge :show false :label "ok")', comp) == ''
+
+    def test_nested_components(self):
+        comps = """
+        (defcomp ~inner (&key text) (span text))
+        (defcomp ~outer (&key label) (div (~inner :text label)))
+        """
+        html = _js_render('(~outer :label "hi")', comps)
+        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."""
+
+    CASES = [
+        '(div :class "main" (p "hello"))',
+        '(div (if true "yes" "no"))',
+        '(div (when false "hidden"))',
+        '(span (str "a" "-" "b"))',
+        '(<> (div "one") (div "two"))',
+        '(ul (li "a") (li "b") (li "c"))',
+        '(input :type "text" :disabled true :value "x")',
+        '(div :class nil :id "ok" "text")',
+        '(img :src "photo.jpg" :alt "A photo")',
+        '(table (tr (td "cell")))',
+    ]
+
+    @pytest.mark.parametrize("sexp_text", CASES)
+    def test_matches_python(self, sexp_text):
+        py_html = py_render(parse(sexp_text))
+        js_html = _js_render(sexp_text)
+        assert js_html == py_html, f"Mismatch for {sexp_text!r}:\n  PY: {py_html!r}\n  JS: {js_html!r}"
+
+    COMP_CASES = [
+        (
+            '(defcomp ~tag (&key label colour) (span :class (str "tag-" colour) label))',
+            '(~tag :label "new" :colour "red")',
+        ),
+        (
+            '(defcomp ~wrap (&key &rest children) (div :class "w" (raw! children)))',
+            '(~wrap (p "a") (p "b"))',
+        ),
+    ]
+
+    @pytest.mark.parametrize("comp_text,call_text", COMP_CASES)
+    def test_component_matches_python(self, comp_text, call_text):
+        env = {}
+        evaluate(parse(comp_text), env)
+        py_html = py_render(parse(call_text), env)
+        js_html = _js_render(call_text, comp_text)
+        assert js_html == py_html

test/Dockerfile

@@ -12,7 +12,7 @@ ENV PYTHONDONTWRITEBYTECODE=1 \
 WORKDIR /app
 
 RUN apt-get update && apt-get install -y --no-install-recommends \
-      ca-certificates \
+      ca-certificates nodejs \
     && rm -rf /var/lib/apt/lists/*
 
 COPY shared/requirements.txt ./requirements.txt

test/Dockerfile.unit

@@ -8,6 +8,10 @@ ENV PYTHONDONTWRITEBYTECODE=1 \
 
 WORKDIR /app
 
+# Node.js for sexp.js parity tests
+RUN apt-get update && apt-get install -y --no-install-recommends nodejs && \
+    rm -rf /var/lib/apt/lists/*
+
 # Install shared deps (includes pytest, pytest-asyncio)
 COPY shared/requirements.txt ./requirements-shared.txt
 RUN pip install --no-cache-dir -r requirements-shared.txt pytest-watch

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}))"
+    )