diff --git a/hosts/ocaml/bin/sx_server.ml b/hosts/ocaml/bin/sx_server.ml
index 29a2698f..13e040fc 100644
--- a/hosts/ocaml/bin/sx_server.ml
+++ b/hosts/ocaml/bin/sx_server.ml
@@ -2052,12 +2052,26 @@ let http_mode port =
(try Unix.close client with _ -> ())
in
+ (* Check if request has SX-Request or HX-Request header (AJAX navigation) *)
+ let is_sx_request data =
+ let lower = String.lowercase_ascii data in
+ let has_substring s sub =
+ let slen = String.length s and sublen = String.length sub in
+ if sublen > slen then false
+ else let rec check i = if i > slen - sublen then false
+ else if String.sub s i sublen = sub then true else check (i + 1)
+ in check 0
+ in
+ has_substring lower "sx-request" || has_substring lower "hx-request"
+ in
+
(* Handle one HTTP request *)
let handle_client env client =
let buf = Bytes.create 8192 in
let n = try Unix.read client buf 0 8192 with _ -> 0 in
if n > 0 then begin
let data = Bytes.sub_string buf 0 n in
+ let is_ajax = is_sx_request data in
let response =
try
match parse_http_request data with
@@ -2072,18 +2086,50 @@ let http_mode port =
else
let is_sx = path = "/sx/" || path = "/sx"
|| (String.length path > 4 && String.sub path 0 4 = "/sx/") in
- if is_sx then
- (* Check cache first *)
+ if is_sx then begin
+ if is_ajax then
+ (* AJAX navigation — return just the content fragment,
+ not the full page shell. The client swaps #main-panel. *)
+ (match http_render_page env path with
+ | Some html ->
+ (* Extract #main-panel from the full page HTML *)
+ let panel_start = try
+ let idx = ref 0 in
+ let found = ref false in
+ while not !found && !idx < String.length html - 20 do
+ if String.sub html !idx 18 = "id=\"main-panel\"" then
+ found := true
+ else
+ idx := !idx + 1
+ done;
+ if !found then begin
+ (* Walk back to find the opening < *)
+ let start = ref !idx in
+ while !start > 0 && html.[!start] <> '<' do
+ start := !start - 1
+ done;
+ Some !start
+ end else None
+ with _ -> None in
+ (match panel_start with
+ | Some start ->
+ (* Find matching close tag — scan for or end *)
+ let fragment = String.sub html start (String.length html - start) in
+ http_response ~content_type:"text/html; charset=utf-8" fragment
+ | None -> http_response html)
+ | None -> http_response ~status:404 "Not Found
")
+ else
+ (* Full page request — check cache *)
match Hashtbl.find_opt response_cache path with
| Some cached -> cached
| None ->
- (* Cache miss — render, cache, return *)
(match http_render_page env path with
| Some html ->
let resp = http_response html in
Hashtbl.replace response_cache path resp;
resp
| None -> http_response ~status:404 "Not Found
")
+ end
else if String.length path > 8 && String.sub path 0 8 = "/static/" then
serve_static_file static_dir path
else
diff --git a/tests/playwright/navigation.spec.js b/tests/playwright/navigation.spec.js
new file mode 100644
index 00000000..89dbb444
--- /dev/null
+++ b/tests/playwright/navigation.spec.js
@@ -0,0 +1,109 @@
+// Navigation tests for sx-docs
+// Verifies client-side navigation works correctly after sx-host migration.
+
+const { test, expect } = require('playwright/test');
+const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';
+
+test.describe('Client-side Navigation', () => {
+
+ test('layout stays vertical after clicking nav link', async ({ page }) => {
+ await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
+ await page.waitForTimeout(2000);
+
+ // Click "Reactive Islands" nav link
+ await page.click('a[href*="geography.(reactive"]:not([href*="runtime"])');
+ await page.waitForTimeout(3000);
+
+ // Page should have navigated
+ expect(page.url()).toContain('reactive');
+
+ // After navigation, the page title/heading should be visible and centered
+ // NOT pushed to the right side by the header
+ const heading = await page.locator('h1, h2').first().boundingBox();
+ const viewport = page.viewportSize();
+
+ if (heading && viewport) {
+ // The heading should be centered-ish, not pushed far right
+ // If it's past 60% of viewport width, layout is broken (side-by-side)
+ expect(heading.x).toBeLessThan(viewport.width * 0.5);
+ }
+
+ // The page should NOT have two visible columns where header and content
+ // are side by side
+ const screenshot = await page.screenshot();
+ // Just verify the content area starts near the top
+ if (heading) {
+ expect(heading.y).toBeLessThan(400); // Content should be within first 400px
+ }
+ });
+
+ test('content updates after navigation', async ({ page }) => {
+ await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
+
+ // Geography page should have "Geography" heading
+ const geoText = await page.textContent('body');
+ expect(geoText).toContain('Geography');
+
+ // Click on "CEK Machine" link
+ const cekLink = page.locator('a:has-text("CEK Machine")');
+ if (await cekLink.count() > 0) {
+ await cekLink.first().click();
+ await page.waitForTimeout(3000);
+
+ // Content should now mention CEK
+ const bodyText = await page.textContent('body');
+ expect(bodyText).toContain('CEK');
+ }
+ });
+
+ test('no raw SX component calls visible after navigation', async ({ page }) => {
+ await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
+
+ // Click a nav link
+ await page.click('a[href*="hypermedia"]:not([href*="example"])');
+ await page.waitForTimeout(3000);
+
+ // Check no raw SX calls visible in the main content area
+ const mainText = await page.locator('#main-panel, #root-panel, main').first().textContent();
+ // ~cssx/tw calls should be expanded, not visible as text
+ const rawCssx = (mainText.match(/~cssx\/tw/g) || []).length;
+ expect(rawCssx).toBeLessThan(3); // Allow a few in documentation text
+ });
+
+ test('header island survives navigation', async ({ page }) => {
+ await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
+ await page.waitForSelector('[data-sx-island="layouts/header"]', { timeout: 10000 });
+
+ // Header should have the logo
+ const headerText = await page.locator('[data-sx-island="layouts/header"]').textContent();
+ expect(headerText).toContain('sx');
+
+ // Navigate
+ await page.click('a[href*="hypermedia"]:not([href*="example"])');
+ await page.waitForTimeout(3000);
+
+ // Header should still be present and have content
+ const headerAfter = await page.locator('[data-sx-island="layouts/header"]');
+ await expect(headerAfter).toBeVisible();
+ const headerTextAfter = await headerAfter.textContent();
+ expect(headerTextAfter).toContain('sx');
+ });
+
+ test('full page width is used (no side-by-side split)', async ({ page }) => {
+ await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'networkidle' });
+
+ // Navigate to a child page
+ await page.click('a[href*="reactive"]:not([href*="runtime"])');
+ await page.waitForTimeout(3000);
+
+ // The main content area should use most of the viewport width
+ const viewport = page.viewportSize();
+ const content = await page.locator('h1, h2, [id="main-panel"]').first().boundingBox();
+
+ if (content && viewport) {
+ // Content should not be squeezed to one side
+ // It should start within the first 40% of viewport width
+ expect(content.x).toBeLessThan(viewport.width * 0.4);
+ }
+ });
+});