Add s-expression wire format support and test detail view

- HTMX beforeSwap hook intercepts text/sexp responses and renders
  them client-side via sexp.js before HTMX swaps the result in
- sexp_response() helper for returning text/sexp from route handlers
- Test detail page (/test/<nodeid>) with clickable test names
- HTMX navigation to detail returns sexp wire format (4x smaller
  than pre-rendered HTML), full page loads render server-side
- ~test-detail component with back link, outcome badge, and
  error traceback display

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

shared/sexp/helpers.py

@@ -9,6 +9,7 @@ from __future__ import annotations
 from typing import Any
 
 from markupsafe import escape
+from quart import Response
 
 from .jinja_bridge import render
 from .page import SEARCH_HEADERS_MOBILE, SEARCH_HEADERS_DESKTOP
@@ -225,6 +226,24 @@ def full_page(ctx: dict, *, header_rows_html: str,
     )
 
 
+def sexp_response(sexp_source: str, status: int = 200,
+                   headers: dict | None = None) -> Response:
+    """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")')
+    """
+    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/static/scripts/sexp.js

@@ -1261,6 +1261,18 @@
       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

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