@@ -0,0 +1,455 @@
""" Phase 21 E2E (Playwright, mock-only): the Thinking window is a live tail.
Story: ``.agent/user_stories/thinking-no-scroll.md``
Run in isolation (DB must be up: ``podman compose up -d db``):
uv run pytest tests/e2e/test_thinking_no_scroll.py -v --no-cov
MOCK-ONLY suite: ``E2E_REAL_LLM=1`` is not supported here — the real
``turbo`` decides its own reasoning length and pacing, and this story ' s
contract (fixed 320px clip, no user scroll back, programmatic pin to the
live tail) needs the deterministic mock ' s long, paced scratchpad.
The whole functional change is one CSS property
(``details.thinking .thinking-text``: ``overflow-y: auto`` → ``hidden``);
``overflow: hidden`` still allows the phase-17 programmatic bottom-pin
(``scrollTop = scrollHeight`` per thinking chunk), which is the sole
scroller. This suite proves the browser behavior the unit pins
(``tests/unit/test_thinking_no_scroll.py``) can only pin at source level.
Determinism note: phase 21 lengthened the mock ' s ``compose_thinking``
body to ~2 700 chars (≈230 frames at the mock ' s 12-char/0.02s pacing ≈
4.5s) so the rendered scratchpad overflows the 320px window by ~2x.
Tests 1– ' s ``think out loud then hesitate`` trigger:
after the thinking stream ends there is a deterministic 4s pre-content
pause with the block still OPEN and no further pin frames — a frozen
live tail, the only state where a (regressed, working) user scroll would
persist and be observable. During live streaming the per-chunk re-pin
masks any user scroll within one frame (≈20ms), so that state is covered
by the tail-tracking invariant instead (test 2, sampled mid-stream).
Test → story mapping (Playwright Mapping Rule):
1. ``test_thinking_window_not_user_scrollable`` — wheel / drag / keyboard
on the frozen live tail do not move the window.
2. ``test_thinking_window_tracks_live_tail`` — after the 2nd-to-last and
the last thinking chunk the window is pinned to the tail and the last
chunk ' s text sits inside the visible rectangle.
3. ``test_thinking_window_css_contract`` — computed ``overflow-y`` is
``hidden``, ``max-height`` is 320px, and the clip is real.
4. ``test_answer_bubble_still_scrollable`` — regression (phase 11): the
answer bubble ' s overflow is untouched and the page still scrolls.
5. ``test_restored_collapsed_thinking_unaffected`` — regression
(phase 17): a stored thinking turn restores a collapsed block.
"""
from __future__ import annotations
import asyncio
import json
import re
from collections . abc import Iterator
from pathlib import Path
from threading import Thread
from typing import Any
import pytest
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
from e2e . mock_llm import compose_thinking
REPO = Path ( __file__ ) . resolve ( ) . parents [ 2 ]
FIXTURES = REPO / " tests " / " fixtures " / " docs "
#: Phase-17 trigger question (grounded turn, thinking + short answer).
THINK_QUESTION = " think out loud — how is my kubernetes cluster set up? "
#: Phase-20 hesitation trigger: the long phase-17/21 thinking stream, then
#: a deterministic 4s pause before the first content frame — a frozen
#: live tail with the block still open (the no-scroll test window).
HESITATE_QUESTION = " think out loud then hesitate — how is my kubernetes cluster set up? "
#: Phase-11 long-answer trigger (regression test 4).
LONG_QUESTION = " How is my Kubernetes cluster set up? write a long answer "
LONG_ANSWER_END = " LONG-ANSWER-END "
MOCK_ANSWER_MARKER = " Deterministic mock answer for E2E "
THINKING_FRAGMENT = " Step 2: Check my notes "
STORAGE_KEY = " bor.chat.v1 "
SELECTOR = " .msg.brain details.thinking .thinking-text "
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 _reset_db ( mock_port : int , seed : bool ) - > ImportSummary | None :
""" Truncate the KB (and query log), then optionally re-import fixtures. """
with SessionLocal ( ) as db :
db . execute ( text ( " TRUNCATE chunks, documents, query_log " ) )
db . commit ( )
if not seed :
return None
return _run_in_thread ( _import_fixtures ( mock_port ) )
@pytest.fixture ( )
def seeded_kb ( mock_llm : int , db_ready : None ) - > Iterator [ None ] :
""" A fresh KB seeded from ``tests/fixtures/docs`` (8 docs, A9 formats),
truncated again on teardown (same fixture shape as the phase-17 suite). """
summary = _reset_db ( mock_llm , seed = True )
assert summary is not None and summary . added == 8
yield
_reset_db ( mock_llm , seed = False )
def send_and_wait ( page : Page , question : str ) - > None :
""" Type into #message-input, submit via #composer, then wait until the
last brain message settles (send button re-enabled, label " Send " ). """
page . fill ( " #message-input " , question )
page . evaluate ( " () => document.querySelector( ' #composer ' ).requestSubmit() " )
expect ( page . locator ( " .msg.user .bubble " ) . last ) . to_contain_text ( question )
# Thinking (~4.5s, phase 21) + answer land in a few seconds.
expect ( page . locator ( " .msg.brain .bubble " ) . last ) . not_to_have_text ( " " , timeout = 30_000 )
expect ( page . locator ( " #send-btn " ) ) . to_be_enabled ( timeout = 30_000 )
expect ( page . locator ( " #send-label " ) ) . to_have_text ( " Send " )
def _scroll_sample ( page : Page ) - > dict [ str , float ] :
""" scrollTop / scrollHeight / clientHeight of the live Thinking window. """
return page . evaluate (
f """ () => {{ const el = document.querySelector( ' { SELECTOR } ' );
return {{ top: el.scrollTop, height: el.scrollHeight, client: el.clientHeight }} ; }} """
)
def _at_tail ( sample : dict [ str , float ] ) - > bool :
""" True when the window is pinned to the live tail: the bottom of the
content is visible (scrollTop clamped at scrollHeight - clientHeight,
within 1px — the phase-17 pin ' s effect). """
return abs ( sample [ " top " ] - ( sample [ " height " ] - sample [ " client " ] ) ) < = 1
def _wait_text_stable ( page : Page , timeout_ms : int = 30_000 ) - > None :
""" Wait until the scratchpad text stops growing for 300ms.
The mock paces frames at 0.02s, so a 300ms still length means the
thinking stream has ended — with the hesitation trigger, the 4s
pre-content pause (block still open, no further pin frames) is then
running. """
page . wait_for_function (
f """ () => {{ const el = document.querySelector( ' { SELECTOR } ' );
if (!el) return false;
const len = el.innerText.length;
const now = performance.now();
if (!window.__thinkProbe) window.__thinkProbe = {{ len, at: now }} ;
const p = window.__thinkProbe;
if (len !== p.len) {{ p.len = len; p.at = now; return false; }}
return now - p.at >= 300; }} """ ,
timeout = timeout_ms ,
)
def _wait_text_contains ( page : Page , marker : str , timeout_ms : int = 30_000 ) - > None :
""" Wait until the rendered scratchpad (whitespace-insensitive) contains
``marker`` — a deterministic probe for a given point in the stream. """
page . wait_for_function (
f """ (tail) => {{ const el = document.querySelector( ' { SELECTOR } ' );
return !!el && el.innerText.replace(/ \\ s+/g, ' ' ).includes(tail); }} """ ,
arg = marker ,
timeout = timeout_ms ,
)
# ---------------------------------------------------------------------------
# 1. No user scroll back: wheel, drag, and keyboard on the frozen live tail
# do not move the window
# ---------------------------------------------------------------------------
def test_thinking_window_not_user_scrollable (
page : Page , app_url : str , seeded_kb : None
) - > None :
page . set_default_timeout ( 30_000 )
page . goto ( app_url )
page . fill ( " #message-input " , HESITATE_QUESTION )
page . evaluate ( " () => document.querySelector( ' #composer ' ).requestSubmit() " )
expect ( page . locator ( " .msg.user .bubble " ) . last ) . to_contain_text ( HESITATE_QUESTION )
details = page . locator ( " .msg.brain " ) . last . locator ( " details.thinking " )
details . wait_for ( state = " attached " , timeout = 10_000 )
text_el = details . locator ( " .thinking-text " )
# Premise: the long scratchpad overflows the 320px clip.
page . wait_for_function (
f " () => {{ const el = document.querySelector( ' { SELECTOR } ' ); "
" return !!el && el.scrollHeight > el.clientHeight; } " ,
timeout = 30_000 ,
)
# The thinking stream has ENDED (4s hesitation pause running): no more
# pin frames, the block is still open, and the tail is frozen — any
# user scroll would persist and be observable here.
_wait_text_stable ( page )
expect ( details ) . to_have_attribute ( " open " , " " )
expect ( page . locator ( " .msg.brain .bubble " ) . last ) . to_have_text ( " " )
# Precondition: the phase-17 pin left the window at the live tail.
before = _scroll_sample ( page )
assert before [ " height " ] > before [ " client " ] , " the window must overflow "
assert _at_tail ( before ) , " the pin must have left the window at the tail "
# Focus the window (a plain div is not focusable — el.focus() is a
# no-op; the keyboard presses below land on the page focus instead.
# Neither path may move the window).
text_el . evaluate ( " el => el.focus() " )
box = text_el . bounding_box ( )
assert box
cx , cy = box [ " x " ] + box [ " width " ] / 2 , box [ " y " ] + box [ " height " ] / 2
page . mouse . move ( cx , cy )
# Wheel back (up) — must not scroll the window.
page . mouse . wheel ( 0 , - 200 )
# Keyboard: Home + ArrowUp — must not scroll the window.
page . keyboard . press ( " Home " )
page . keyboard . press ( " ArrowUp " )
page . keyboard . press ( " ArrowUp " )
# Mouse drag over the window — must not scroll the window
# (there is no scrollbar to grab with overflow hidden).
page . mouse . down ( )
page . mouse . move ( cx , cy - 100 , steps = 5 )
page . mouse . up ( )
# Wheel again, then let a would-be (regressed) scroll settle.
page . mouse . wheel ( 0 , - 200 )
page . wait_for_timeout ( 150 )
# Still inside the pure-thinking window (the assertions below are only
# meaningful while the block is open and no content frame has landed).
expect ( details ) . to_have_attribute ( " open " , " " )
after = _scroll_sample ( page )
assert abs ( after [ " top " ] - before [ " top " ] ) < = 1 , (
f " user scroll moved the window: { before [ ' top ' ] } -> { after [ ' top ' ] } "
)
assert _at_tail ( after ) , " the window must still show the live tail "
# ---------------------------------------------------------------------------
# 2. Live tail tracking: the per-chunk pin keeps the window glued to the
# newest content (sampled at the 2nd-to-last and last chunks), and the
# last chunk's text is inside the visible rectangle
# ---------------------------------------------------------------------------
def test_thinking_window_tracks_live_tail (
page : Page , app_url : str , seeded_kb : None
) - > None :
page . set_default_timeout ( 30_000 )
page . goto ( app_url )
page . fill ( " #message-input " , HESITATE_QUESTION )
page . evaluate ( " () => document.querySelector( ' #composer ' ).requestSubmit() " )
expect ( page . locator ( " .msg.user .bubble " ) . last ) . to_contain_text ( HESITATE_QUESTION )
details = page . locator ( " .msg.brain " ) . last . locator ( " details.thinking " )
details . wait_for ( state = " attached " , timeout = 10_000 )
# The exact deterministic scratchpad the mock will stream, sliced the
# same way the mock's _sse_stream does (12-char chunks).
expected = compose_thinking (
{ " messages " : [ { " role " : " user " , " content " : HESITATE_QUESTION } ] }
)
pieces = re . findall ( r " . { 1,12} " , expected , re . S )
ws = re . sub ( r " \ s+ " , " " , " " . join ( pieces ) )
#: 12 rendered chars ending at the 2nd-to-last chunk.
marker_second_last = re . sub ( r " \ s+ " , " " , " " . join ( pieces [ : - 1 ] ) ) [ - 12 : ]
#: 12 rendered chars at the very end (the last chunk).
marker_last = ws [ - 12 : ]
# During the stream: once the 2nd-to-last chunk has landed, the
# window is pinned to the tail (the invariant holds at EVERY chunk;
# the pin runs per chunk while the block is open).
_wait_text_contains ( page , marker_second_last )
assert _at_tail ( _scroll_sample ( page ) ) , " not at the tail after chunk N-1 "
# After the last chunk: the 4s hesitation pause holds this state with
# the block still open — sample the tail pin, then the geometry.
_wait_text_contains ( page , marker_last )
_wait_text_stable ( page )
expect ( details ) . to_have_attribute ( " open " , " " )
sample = _scroll_sample ( page )
assert _at_tail ( sample ) , f " not at the tail after the last chunk: { sample } "
# Geometry: the last chunk's text (the final text node of the
# scratchpad) renders INSIDE the visible rectangle, and a hit-test at
# the box's bottom lands inside .thinking-text.
geo = page . evaluate (
f """ () => {{ const el = document.querySelector( ' { SELECTOR } ' );
const box = el.getBoundingClientRect();
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
let last = null;
while (walker.nextNode()) last = walker.currentNode;
const range = document.createRange();
range.selectNodeContents(last);
const r = range.getBoundingClientRect();
const hit = document.elementFromPoint(box.left + 10, box.bottom - 5);
return {{
nodeVisible: r.bottom > box.top && r.top < box.bottom,
nodeBottomInBox: r.bottom <= box.bottom + 1,
hitInside: hit ? el.contains(hit) : false,
}} ; }} """
)
assert geo [ " nodeVisible " ] , " the last chunk ' s text is outside the window "
assert geo [ " nodeBottomInBox " ] , " the last chunk ' s text is clipped off the bottom "
assert geo [ " hitInside " ] , " a hit-test at the box bottom missed .thinking-text "
# ---------------------------------------------------------------------------
# 3. CSS contract: overflow-y hidden, 320px max-height, and the clip is real
# ---------------------------------------------------------------------------
def test_thinking_window_css_contract (
page : Page , app_url : str , seeded_kb : None
) - > None :
page . set_default_timeout ( 30_000 )
page . goto ( app_url )
send_and_wait ( page , THINK_QUESTION )
details = page . locator ( " .msg.brain " ) . last . locator ( " details.thinking " )
expect ( details ) . not_to_have_attribute ( " open " ) # auto-collapsed
details . locator ( " summary " ) . click ( ) # open for measurement
expect ( details ) . to_have_attribute ( " open " , " " )
style = page . evaluate (
f """ () => {{ const el = document.querySelector( ' { SELECTOR } ' );
const cs = getComputedStyle(el);
return {{ overflowY: cs.overflowY, maxHeight: cs.maxHeight,
scrollHeight: el.scrollHeight, clientHeight: el.clientHeight }} ; }} """
)
assert style [ " overflowY " ] == " hidden " , " the window must not be user-scrollable "
assert style [ " maxHeight " ] == " 320px " , " the 320px clip must stay "
# The clip is real, not cosmetic: the long scratchpad overflows it.
assert style [ " scrollHeight " ] > style [ " clientHeight " ]
# ---------------------------------------------------------------------------
# 4. Regression (phase 11): the answer bubble is untouched — a long answer
# still grows the page, and normal (user) scrolling of the answer works
# ---------------------------------------------------------------------------
def test_answer_bubble_still_scrollable (
page : Page , app_url : str , seeded_kb : None
) - > None :
page . set_default_timeout ( 45_000 )
page . goto ( app_url )
page . fill ( " #message-input " , LONG_QUESTION )
page . click ( " #send-btn " )
expect ( page . locator ( " .msg.user .bubble " ) . last ) . to_contain_text ( LONG_QUESTION )
# The ~900-word answer streams to completion (phase-11 contract).
bubble = page . locator ( " .msg.brain .bubble " ) . last
expect ( bubble ) . to_contain_text ( LONG_ANSWER_END , timeout = 60_000 )
expect ( page . locator ( " #send-btn " ) ) . to_be_enabled ( )
# The answer bubble keeps its existing overflow (phase 21 only touched
# .thinking-text) — it is NOT the hidden clip.
overflow_y = page . evaluate (
" () => { const els = document.querySelectorAll( ' .msg.brain .bubble ' ); "
" return getComputedStyle(els[els.length - 1]).overflowY; } "
)
assert overflow_y != " hidden " , " the answer bubble must keep its scroll behavior "
# A long answer grows the PAGE — and the page still scrolls normally.
state0 = page . evaluate (
" () => ( { y: window.scrollY, sh: document.documentElement.scrollHeight, "
" ch: window.innerHeight }) "
)
assert state0 [ " sh " ] > state0 [ " ch " ] , " the long answer must make the page scrollable "
box = bubble . bounding_box ( )
assert box
viewport = page . viewport_size
assert viewport # the conftest `page` fixture is fixed at 1280x800
# A point in the visible lower part of the answer area (the page is
# pinned at the bottom, so the bubble's lower edge is in the viewport).
mx = box [ " x " ] + box [ " width " ] / 2
my = max ( 50.0 , min ( box [ " y " ] + box [ " height " ] - 60.0 , viewport [ " height " ] - 100 ) )
hit = page . evaluate (
" ([x, y]) => { const e = document.elementFromPoint(x, y); "
" return e ? e.tagName + ' . ' + String(e.className) : ' none ' ; } " ,
[ mx , my ] ,
)
page . mouse . move ( mx , my )
# Headless Chromium applies wheel scrolling through an async momentum
# pipeline — let each gesture settle before reading the position.
page . mouse . wheel ( 0 , - 400 ) # wheel up: away from the newest content
page . wait_for_timeout ( 500 )
y_up = page . evaluate ( " () => window.scrollY " )
page . mouse . wheel ( 0 , 400 ) # wheel back down
page . wait_for_timeout ( 500 )
y_down = page . evaluate ( " () => window.scrollY " )
assert y_up < state0 [ " y " ] - 100 , (
f " the page must scroll up on wheel (wheel over { hit !r} ): "
f " y { state0 [ ' y ' ] } -> { y_up } "
)
assert y_down > y_up , f " the page must scroll back down on wheel: { y_up } -> { y_down } "
# ---------------------------------------------------------------------------
# 5. Regression (phase 17): a stored thinking turn restores a COLLAPSED
# block with its full text (replicates the phase-17 reload pin — the
# restore path is untouched by phase 21, where overflow is moot)
# ---------------------------------------------------------------------------
def test_restored_collapsed_thinking_unaffected (
page : Page , app_url : str , seeded_kb : None
) - > None :
page . set_default_timeout ( 30_000 )
page . goto ( app_url )
send_and_wait ( page , THINK_QUESTION )
details = page . locator ( " .msg.brain " ) . last . locator ( " details.thinking " )
expect ( details ) . not_to_have_attribute ( " open " ) # auto-collapsed
captured = details . locator ( " .thinking-text " ) . text_content ( )
assert captured
page . reload ( )
expect ( page . locator ( " #empty-state " ) ) . to_be_hidden ( )
restored = page . locator ( " .msg.brain " ) . last . locator ( " details.thinking " )
expect ( restored ) . to_have_count ( 1 )
expect ( restored ) . not_to_have_attribute ( " open " ) # restored COLLAPSED
expect ( restored . locator ( " .thinking-text " ) ) . to_have_text ( captured )
# Opening the restored block still shows the full scratchpad, and the
# answer + persistence are intact.
restored . locator ( " summary " ) . click ( )
expect ( restored ) . to_have_attribute ( " open " , " " )
expect ( restored . locator ( " .thinking-text " ) ) . to_contain_text ( THINKING_FRAGMENT )
expect ( page . locator ( " .msg.brain .bubble " ) . last ) . to_contain_text ( MOCK_ANSWER_MARKER )
raw = json . loads ( page . evaluate ( f " () => localStorage.getItem( ' { STORAGE_KEY } ' ) " ) ) [
" messages "
] [ 1 ] [ " thinking " ]
assert re . sub ( r " \ s+ " , " " , raw ) == re . sub ( r " \ s+ " , " " , captured )
