stacklok / toolhive-studio / 25429675396

68%

push

github

perf(playground): virtualize long chat threads with TanStack Virtual (#2192)

* refactor(playground): split chat-message into per-part components

The chat-message module had grown to ~770 lines housing the role
dispatcher, every part renderer (reasoning, tool call, tool output,
step start, joined assistant text), and several components
(mcp-app-view, attachment-preview, image-modal, token-usage,
no-content-message) that only render inside chat messages. Each piece
moves into a focused sibling under components/chat-message/, with the
public entry kept at components/chat-message/index.tsx so existing
`import { ChatMessage } from "./chat-message"` callsites resolve
unchanged. The folder/index layout matches the existing card-mcp-server,
form-run-from-registry, and groups-manager idiom.

The dispatcher itself shrinks to a small `memo(ChatMessageImpl)` that
hands off to UserMessage / AssistantMessage, so streaming ticks only
re-render the row whose message ref actually changed and sibling rows
skip via shallow prop equality.

* perf(playground): virtualize long chat threads with TanStack Virtual

Long Playground threads (200+ messages) felt sluggish on initial render,
streaming ticks, and route-restored scrolling because every row stayed
mounted and re-rendered on every status update. Adopts TanStack Virtual
through a hybrid strategy: historical rows render through `useVirtualizer`
+ `measureElement` (dynamic heights, `useFlushSync: false` per the React
19 guidance, `overscan: 5`), while the last TAIL_SIZE (2) rows and the
"Thinking..." indicator stay in normal flow. The streaming row keeps
growing scrollHeight naturally, so the ResizeObserver follow-to-bottom
logic in useAutoScroll is preserved unchanged.

A VIRTUALIZE_THRESHOLD of 10 short-circuits the virtualizer on small
threads, and the leaf VirtualChatMessageList carries `use no memo` so
React Compiler does not bail out on the surrounding tree. ChatInterface
delegates list rendering to the new ChatM... (continued)

4681 of 7451 branches covered (62.82%)

100 of 142 new or added lines in 13 files covered. (70.42%)

6990 of 10322 relevant lines covered (67.72%)

120.83 hits per line