fix(ui): uniform header bar height on chat, sources, and the document viewer

tests/e2e/test_header_consistency.py

@@ -0,0 +1,167 @@
+"""Phase 12 E2E (Playwright): one header, same size on every page.
+
+Story: ``.agent/user_stories/header-consistency.md``
+Run in isolation (DB must be up: ``podman compose up -d db``):
+
+    uv run pytest tests/e2e/test_header_consistency.py -v --no-cov
+
+The sticky top bar must be exactly ``--header-h`` tall on Chat, Sources,
+and the document viewer (whose back button says "Sources" — the page
+users compare against chat): 64px desktop, 58px at ≤640px.
+
+Test → story mapping (Playwright Mapping Rule):
+1. ``test_header_height_identical_across_pages_desktop``
+2. ``test_header_height_identical_across_pages_mobile``
+3. ``test_viewer_header_content_still_fits`` (phase-10 regression guard)
+"""
+from __future__ import annotations
+
+import asyncio
+from pathlib import Path
+from threading import Thread
+from typing import Any
+
+from playwright.sync_api import Page, expect
+from sqlalchemy import text
+
+from app.config import Settings
+from app.db import SessionLocal
+from app.rag.importer import ImportSummary, import_sources
+from app.rag.llm import LLMClient
+
+REPO = Path(__file__).resolve().parents[2]
+FIXTURES = REPO / "tests" / "fixtures" / "docs"
+VIEWER_URL = "/document.html?source=docs&path=homelab%2Fkubernetes.md"
+SOURCES_URL = "/sources.html"
+
+#: The shared header-bar token values (frontend/assets/styles.css :root
+#: and the ≤640px media query).
+DESKTOP_HEADER_H = 64
+MOBILE_HEADER_H = 58
+
+
+async def _import_fixtures(mock_port: int) -> ImportSummary:
+    kwargs: dict[str, Any] = {"_env_file": None, "llm_base_url": f"http://127.0.0.1:{mock_port}/v1"}
+    settings = Settings(**kwargs)  # pyright: ignore[reportCallIssue]
+    return await import_sources([FIXTURES], LLMClient(settings))
+
+
+def _run_in_thread(coro: Any) -> Any:
+    """Run a coroutine on a worker thread (Playwright owns the test loop)."""
+    box: dict[str, Any] = {}
+
+    def runner() -> None:
+        try:
+            box["value"] = asyncio.run(coro)
+        except BaseException as e:  # noqa: BLE001 — re-raised on the test thread
+            box["error"] = e
+
+    t = Thread(target=runner)
+    t.start()
+    t.join()
+    if "error" in box:
+        raise box["error"]
+    return box["value"]
+
+
+def _seed_db(mock_port: int) -> None:
+    with SessionLocal() as db:
+        db.execute(text("TRUNCATE chunks, documents, query_log"))
+        db.commit()
+    _run_in_thread(_import_fixtures(mock_port))
+
+
+def _box_height(page: Page, selector: str) -> float:
+    box = page.locator(selector).bounding_box()
+    assert box is not None, f"{selector} not rendered"
+    return box["height"]
+
+
+def _header_heights(page: Page, app_url: str) -> dict[str, float]:
+    """Measured heights of the sticky top bar on the three pages."""
+    heights: dict[str, float] = {}
+
+    page.goto(app_url + "/")
+    heights["chat"] = _box_height(page, ".app-header")
+
+    page.goto(app_url + SOURCES_URL)
+    heights["sources"] = _box_height(page, ".app-header")
+
+    page.goto(app_url + VIEWER_URL)
+    expect(page.locator("#doc-title")).to_have_text("Kubernetes Homelab Cluster", timeout=15_000)
+    heights["document"] = _box_height(page, ".doc-header")
+    return heights
+
+
+# ---------------------------------------------------------------------------
+# 1. Desktop: all three pages, one identical 64px bar
+# ---------------------------------------------------------------------------
+
+
+def test_header_height_identical_across_pages_desktop(
+    page: Page, app_url: str, mock_llm: int, db_ready: None
+) -> None:
+    page.set_viewport_size({"width": 1280, "height": 800})
+    _seed_db(mock_llm)
+
+    heights = _header_heights(page, app_url)
+    assert heights["chat"] == DESKTOP_HEADER_H, f"chat header {heights['chat']}px"
+    assert heights["sources"] == DESKTOP_HEADER_H, f"sources header {heights['sources']}px"
+    assert heights["document"] == DESKTOP_HEADER_H, (
+        f"document header {heights['document']}px (was content-sized)"
+    )
+
+
+# ---------------------------------------------------------------------------
+# 2. Mobile (≤640px): all three pages, one identical 58px bar
+# ---------------------------------------------------------------------------
+
+
+def test_header_height_identical_across_pages_mobile(
+    page: Page, app_url: str, mock_llm: int, db_ready: None
+) -> None:
+    page.set_viewport_size({"width": 375, "height": 812})
+    _seed_db(mock_llm)
+
+    heights = _header_heights(page, app_url)
+    assert heights["chat"] == MOBILE_HEADER_H, f"chat header {heights['chat']}px"
+    assert heights["sources"] == MOBILE_HEADER_H, f"sources header {heights['sources']}px"
+    assert heights["document"] == MOBILE_HEADER_H, (
+        f"document header {heights['document']}px (meta row must clip, not wrap)"
+    )
+
+
+# ---------------------------------------------------------------------------
+# 3. Regression: the phase-10 viewer header still shows title, badges,
+#    back link — single-line on both desktop and mobile
+# ---------------------------------------------------------------------------
+
+
+def test_viewer_header_content_still_fits(
+    page: Page, app_url: str, mock_llm: int, db_ready: None
+) -> None:
+    _seed_db(mock_llm)
+
+    for width, expected_h in ((1280, DESKTOP_HEADER_H), (375, MOBILE_HEADER_H)):
+        page.set_viewport_size({"width": width, "height": 800})
+        page.goto(app_url + VIEWER_URL)
+        expect(
+            page.locator("#doc-title")
+        ).to_have_text("Kubernetes Homelab Cluster", timeout=15_000)
+
+        # Title on a single line (ellipsis, no wrap growth).
+        assert _box_height(page, "#doc-title") < 30  # one line at either size
+
+        # Meta row: badges + path present and visible, single line.
+        assert _box_height(page, ".doc-meta") < 26
+        expect(page.locator(".doc-source-badge", has_text="docs")).to_be_visible()
+        expect(page.locator(".format-badge", has_text="md")).to_be_visible()
+        expect(page.locator(".doc-path", has_text="homelab/kubernetes.md")).to_be_visible()
+
+        # Back link still there, ≥44px touch target, in the shared bar.
+        back = page.locator("#doc-back")
+        expect(back).to_be_visible()
+        assert _box_height(page, "#doc-back") >= 44
+        expect(page.locator(".doc-header")).to_have_css(
+            "height", f"{expected_h}px"
+        )