fix(ui): thinking window no longer scrolls — live 320px view pinned to the stream tail

This commit is contained in:
2026-08-24 20:28:12 -04:00
parent 986e704eb1
commit 22a6121411
3 changed files with 224 additions and 0 deletions
@@ -0,0 +1,70 @@
# Task 02 — E2E story suite, story file, validation, commit
**Phase:** `21_thinking_no_scroll` · **Source:** `TODO.md` L4
## Objective
The story gate: `tests/e2e/test_thinking_no_scroll.py` proves the window
can't be user-scrolled but always tracks the live tail, plus regressions,
story file, final validation, and the single atomic commit.
## Work
1. `tests/e2e/test_thinking_no_scroll.py` (new — reuse
`test_thinking_display.py`'s mock-LLM streaming scaffolding; the mock
must stream a **long** thinking body, in many chunks, so
`.thinking-text` overflow exceeds its 320px box). Tests:
1. `test_thinking_window_not_user_scrollable` — open the block, wait
until `scrollHeight > clientHeight`; focus `.thinking-text`
(`el.focus()`), dispatch mouse wheel over it
(`page.mouse.wheel(0, -200)` after moving the mouse over the
element) and press `Home`/`ArrowUp`: `scrollTop` must not decrease
(assert `scrollTop` unchanged within 1px between actions).
2. `test_thinking_window_tracks_live_tail` — while chunks stream,
after the 2nd-to-last and last chunk:
`scrollTop === scrollHeight` (within 1px) — the visible window is
the live tail; the **last** chunk's text is within the visible
rectangle (its offsetTop + scrollTop geometry check, or
`elementFromPoint` at the box's bottom).
3. `test_thinking_window_css_contract` — computed style of
`.thinking-text`: `overflow-y === "hidden"`,
`max-height === "320px"`.
4. `test_answer_bubble_still_scrollable` (regression, phase 11) — a
long answer (use the long-answer mock from
`test_long_answers.py`): the answer bubble is still
user-scrollable (scrollTop moves on wheel) and
`overflow-y` is not `hidden` there.
5. `test_restored_collapsed_thinking_unaffected` (regression,
phase 17) — a turn with stored `thinking`, reload: the collapsed
Thinking block renders with its text (existing pin from
`test_thinking_display.py` — replicate, don't duplicate the file).
2. `.agent/user_stories/thinking-no-scroll.md` (new) — story file per
the repo format: goal, the bug report verbatim from `TODO.md` L4, the
owner-confirmed A2 decisions from `00_phase.md`, E2E mapping table.
3. Run the suite **in isolation** (prereq `podman compose up -d db`):
`uv run pytest tests/e2e/test_thinking_no_scroll.py -v --no-cov`.
4. Regressions, in isolation, one command each:
- `uv run pytest tests/e2e/test_thinking_display.py -v --no-cov`
- `uv run pytest tests/e2e/test_long_answers.py -v --no-cov`
5. Final validation: `uv run pytest` green; `uv run pytest --cov=app
--cov-report=term-missing` ≥ today's number (>90% gate);
`uv run ruff check . && uv run pyright` clean.
6. **UI Structure Check** (AGENTS.md rule 5): no new surface; the block
keeps its summary chevron, focus-visible ring, aria-live/label
contract, and the reduced-motion stillness (styles.css ~line 686).
7. Write the phase report (`.agent/reports/21_thinking_no_scroll/`).
8. Commit (one atomic commit) and move the phase:
```bash
git add -A .agent/ frontend/ tests/
git commit --no-gpg-sign -m "fix(ui): thinking window no longer scrolls — live 320px view pinned to the stream tail"
mv .agent/phases/todo/21_thinking_no_scroll .agent/phases/complete/
```
## Testing & Quality
- Story suite green **in isolation**; both regression suites green in
isolation; full unit+integration suite green; `app/` coverage at or
above today's number (>90%); ruff + pyright clean.
## Completion Criteria
- [ ] `test_thinking_no_scroll.py` 5/5 in isolation.
- [ ] Regressions (thinking display, long answers) green in isolation.
- [ ] Story file + phase report exist.
- [ ] One `--no-gpg-sign` commit; phase directory in `complete/`.