feat(HAI-097): add scroll-direction auto-follow to AgentLogViewer

- Replace proximity-based auto-scroll with scroll-direction detection
- Track last scroll position via ref to determine up/down direction
- Scrolling up disables auto-scroll, scrolling down re-enables it
- Add tests for auto-scroll default behavior and direction toggling
This commit is contained in:
Dustin Byrne
2026-03-26 19:29:59 -04:00
parent 30593e5f6b
commit 5fc95d4e1f
2 changed files with 67 additions and 4 deletions

View File

@@ -13,6 +13,7 @@ interface AgentLogViewerProps {
*/
export function AgentLogViewer({ entries, loading }: AgentLogViewerProps) {
const containerRef = useRef<HTMLDivElement>(null);
const lastScrollTopRef = useRef(0);
const [autoScroll, setAutoScroll] = useState(true);
// Auto-scroll to bottom when new entries arrive (if scroll-lock is not active)
@@ -25,9 +26,15 @@ export function AgentLogViewer({ entries, loading }: AgentLogViewerProps) {
const handleScroll = () => {
const el = containerRef.current;
if (!el) return;
// If the user is within 50px of the bottom, re-enable auto-scroll
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 50;
setAutoScroll(atBottom);
const currentScrollTop = el.scrollTop;
const lastScrollTop = lastScrollTopRef.current;
// Detect scroll direction: up disables auto-scroll, down re-enables it
if (currentScrollTop < lastScrollTop) {
setAutoScroll(false);
} else if (currentScrollTop > lastScrollTop) {
setAutoScroll(true);
}
lastScrollTopRef.current = currentScrollTop;
};
if (loading && entries.length === 0) {