dsh-chat-content-visibility-auto

The DSH main chat list currently renders every message node in full, mounting heavy DOM for markdown, tool cards, and images one by one. As a conversation grows, DOM nodes scale linearly with message count, and scrolling, typing, or switching sessions all become noticeably janky. The existing React.memo only trims unnecessary re-renders; it does not reduce the total DOM footprint, so off-screen nodes still participate in layout and paint work.

This plugin takes a deliberately minimal approach: it injects a content-visibility: auto rule onto chat nodes, paired with contain-intrinsic-size: auto 320px so the browser can estimate the size of nodes it has not yet painted. The browser then skips rendering, layout, and painting for nodes outside the viewport, handling only those near the visible window while keeping scrollbar position and anchor behavior stable. The entire change is pure CSS overlay, touching no slots, no DOM structure, and zero product logic. On browsers that do not support the property the rule is simply ignored, causing no side effects (Chrome 85+, Firefox 125+, and Safari 18+ all support it).

It is well suited for users who regularly run long DSH conversations of several hundred messages and care about scroll smoothness. To be clear, this is not true windowing, and DOM count and memory usage remain unchanged; what is saved is layout and paint work in the rendering pipeline. If you want a zero-intrusion, plug-and-play performance patch, this plugin is the lightest option. For a full virtualization solution, the @tanstack/react-virtual route used by the DSH trajectory panel is worth exploring instead.