fix(ui): stop collapsible content flashing on collapse, keep transcript focus ring hidden / 修复折叠块收起闪烁与聊天记录焦点框

[sumanx]

What / 改动内容

Two small, independent UI glitches (one commit each):

1. fix(ui) – collapsible content flashes on collapse. tw-animate-css's animate-out runs with animation-fill-mode: none, so the moment the exit animation ends the content snaps back to its resting style (full opacity, no slide). The unmount only landed in a later task, after that frame had painted, so every collapse showed one fully visible frame of the content that was just folded away. Now the exit's last keyframe is held (animation-fill-mode: forwards) until the node is removed, and the node is removed synchronously from the animationend handler so it is gone before the next paint. A reopen during the exit restores the node's own fill mode. Affects every user of ui/instant-collapsible (reasoning blocks, tool groups, tool cards, …).

2. fix(chat) – transcript focus ring comes back after a click. Follow-up to fix(messages): hide pointer-triggered focus ring #338. Clicking the transcript sets data-focus-origin="pointer" on the scroll viewport so the focus-visible ring stays off, but the marker was dropped while the viewport was still focused:

   • on keydown, so any key (Esc included) brought the ring back — a key press makes the browser match :focus-visible;
   • on blur, which also fires when the whole window loses focus. The viewport stays the document's active element and the browser re-focuses it when the window returns (e.g. when resizing it), now without the marker.

   The keydown listener is gone, and on blur we wait for it to settle and only clear the marker if the viewport is really no longer the active element. Tabbing into the viewport still shows the ring (that focus never sets the marker).

Testing / 测试

• pnpm lint ., pnpm test (560 files / 8391 tests) and pnpm build pass.
• virtualized-message-thread.test.tsx: the old "keyboard input clears the marker" case now asserts the opposite, plus new cases for "focus really moves away → marker cleared" and "window blur only → marker kept".
• Focus ring: checked by hand in the browser and the desktop app (click → Esc; click → switch app → resize the window).
• Collapse flash: the fix follows from the animation analysis above; I did not capture before/after frame traces for it.
• Tested on Linux only (GNOME / Wayland, WebKitGTK desktop build, and Chrome); not tried on macOS or Windows.

---

中文说明

两个互相独立的小问题，各一个提交：

1. fix(ui)：折叠块收起时闪一帧。 tw-animate-css 的 animate-out 的 animation-fill-mode 为 none，退出动画一结束，内容就会回到静止样式（完全不透明、无位移），而卸载发生在之后的任务里，那一帧已经绘制出来，所以每次收起都会多显示一帧刚折叠的内容。现在让动画停在最后一帧（forwards），并在 animationend 里同步卸载节点，保证下一次绘制前内容已被移除；动画途中重新展开时会还原节点自己的 fill-mode。所有使用 ui/instant-collapsible 的地方（思考块、工具组、工具卡片等）都受益。

2. fix(chat)：点击聊天记录后焦点框又出现。 是 fix(messages): hide pointer-triggered focus ring #338 的后续。点击聊天记录会给滚动容器打上 data-focus-origin="pointer" 来隐藏 focus-visible 焦点框，但容器仍有焦点时这个标记被清掉了：

   • keydown 时清除：任何按键（包括 Esc）都会让浏览器匹配 :focus-visible，焦点框随之出现；
   • blur 时清除：整个窗口失去焦点（切到别的应用）也会触发 blur，但容器仍是当前焦点元素，窗口回到前台（例如拖动调整窗口大小）时浏览器会把焦点还给它，此时标记已经没了。

   现在去掉了 keydown 监听，blur 时等事件稳定后再判断，只有容器确实不再是焦点元素才清除标记。用 Tab 键切入时仍然显示焦点框（那种焦点不会设置标记）。

测试：pnpm lint .、pnpm test（560 个文件 / 8391 个用例）、pnpm build 均通过；相关单元测试已更新并新增用例。焦点框问题在浏览器和桌面端手动验证过（点击后按 Esc、点击后切换应用再调整窗口大小）；折叠闪烁是依据上述动画分析修复的，没有采集修复前后的逐帧数据。仅在 Linux（GNOME / Wayland、WebKitGTK 桌面版和 Chrome）测试，未在 macOS、Windows 上试过。

🤖 Generated with Claude Code

[xintaofei]

codeg work task 293 is done — #896 (4 files, +256/-32).