feat(ui): virtualize #chat-history to fix long-chat lag

[touzenesmy]

Summary

Long chats get laggy and eventually freeze because every message stays in the DOM
forever and markdown/highlighting is re-run per message, so layout and paint cost
grows with the conversation. This adds a small, framework-free windowing layer
(static/js/chatVirtualizer.js) over #chat-history: messages near the viewport
stay live, and messages far off-screen have their children detached with their pixel
height pinned, then re-attached on scroll-back. Detach keeps the real nodes (not
innerHTML), so <details> state, code highlighting and listeners survive, and the
pinned height keeps scroll position stable. It never detaches a node that is actively
streaming (.stream-content), the agent-thinking-dots spinner, or the tail, so
in-flight output is never lost. On a ~170 message chat this takes scrolling from
janky to flat (about 165/171 messages collapsed off-screen).

Note on scope: this fixes lag that grows with message count and lets big finished
bubbles drop out of the live DOM. A single very large block while it is still
streaming is still heavy to render; that overlaps with #4644 and is intentionally
out of scope here.

Target branch

• This PR targets dev, not main.

Linked Issue

Part of #2869 (also relevant to #4644)

Type of Change

• Bug fix (non-breaking — fixes a confirmed issue)

Checklist

• I searched open issues and PRs — this is not a duplicate.
• This PR targets dev
• My changes are limited to the scope described above (one new module, a two-line
  wiring in static/app.js, one test). No unrelated refactors.
• I actually ran the app and verified the change works end-to-end.

How to Test

1. Check out the branch and run the app (docker compose up or uvicorn app:app).
2. Open a long chat (50+ messages; loading an existing big session is easiest).
3. Paste this in the DevTools console to watch live vs collapsed nodes:

   setInterval(() => { const k=[...document.querySelectorAll('#chat-history > .msg')]; console.log(`msgs:${k.length} collapsed:${k.filter(n=>n.style.minHeight).length}`); }, 1000);

4. Scroll up and down. collapsed climbs as messages leave the viewport and drops as
   you return to them. Scrolling stays smooth and the scroll position does not jump.
5. Send a new message and confirm the streaming reply and the thinking spinner render
   normally and are never collapsed.
6. Run the test: ./venv/bin/python -m pytest tests/test_chat_virtualizer_js.py -v
   → 6 passed.

Visual / UI changes

Functional only. It detaches/reattaches existing nodes and pins height; it adds no
colors, fonts, spacing, classes, components, or emoji.

• No new CSS variables, color values, font sizes, or spacing units.
• No new component patterns.
• No Unicode emoji in UI or code.
• Human-submitted, single-scope PR; the problem was discussed in Chat Freeze #2869 first.

Screenshots / clips

[touzenesmy]

Heads up, I just found #4661 which overlaps with this. It caps #chat-history at 150 and pages older messages off to the server, plus adds content-visibility:auto on the message elements, so it covers the same off-screen cost this PR targets (and a lot more, including the document streaming freeze and the thinking-block O(n^2)). It also predates this one, so I didn't catch it when I searched (different title and approach, it's framed as OOM not virtualization). So treat this as the maintainer's call. The one thing this PR does differently is keep every message in the DOM and just detach/reattach the real nodes on scroll, so scrolling back is instant with no "show older" click and no server round-trip, and <details>/highlight state survives. If that instant scroll-back is worth keeping as a complement to #4661, great. If #4661 already covers what you want, feel free to close this, no problem.

Maybe it would be better if the virtualization is added to his commit ?