Fix web chat keyboard scroll direction

Author: davidrimshnick-pplx

packages/happy-app/sources/components/ChatList.tsx

@@ -17,6 +17,7 @@ import { StyleSheet, useUnistyles } from 'react-native-unistyles';
 import { Modal } from '@/modal';
 import { useSessionQuickActions } from '@/hooks/useSessionQuickActions';
 import { resolveControlMode } from '@/sync/controlHandoff';
+import { getInvertedChatListKeyboardScrollDelta } from './chatListKeyboardScroll';
 
 const SCROLL_THRESHOLD = 300;
 
@@ -322,6 +323,24 @@ const ChatListInternal = React.memo((props: {
         return () => node.removeEventListener('wheel', handler);
     }, []);
 
+    // Web applies keyboard scrolling to the transformed DOM node underneath the
+    // inverted FlatList, so native key behavior reveals content backward.
+    React.useEffect(() => {
+        if (Platform.OS !== 'web') return;
+        if (typeof window === 'undefined' || typeof document === 'undefined') return;
+        const node = (flatListRef.current as any)?.getScrollableNode?.() as HTMLElement | undefined;
+        if (!node) return;
+        const handler = (e: KeyboardEvent) => {
+            if (!shouldHandleChatListKeyboardEvent(node, e.target)) return;
+            const delta = getInvertedChatListKeyboardScrollDelta(e, node.clientHeight);
+            if (delta === null) return;
+            node.scrollTop += delta;
+            e.preventDefault();
+        };
+        window.addEventListener('keydown', handler, true);
+        return () => window.removeEventListener('keydown', handler, true);
+    }, []);
+
     return (
         <View style={{ flex: 1 }}>
             <FlatList
@@ -378,6 +397,12 @@ function isCollapsibleDisplayItem(item: DisplayItem): item is ToolGroupItem | Ex
     return item.type === 'tool-group' || item.type === 'agent-work-group';
 }
 
+function shouldHandleChatListKeyboardEvent(node: HTMLElement, target: EventTarget | null): boolean {
+    if (!(target instanceof HTMLElement)) return true;
+    if (target.isContentEditable || target.closest('input, textarea, select')) return false;
+    return target === document.body || target === document.documentElement || node.contains(target);
+}
+
 const styles = StyleSheet.create((theme) => ({
     scrollButtonContainer: {
         position: 'absolute',

packages/happy-app/sources/components/chatListKeyboardScroll.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest';
+import {
+    CHAT_LIST_KEYBOARD_LINE_SCROLL,
+    getInvertedChatListKeyboardScrollDelta,
+} from './chatListKeyboardScroll';
+
+const VIEWPORT_HEIGHT = 720;
+
+function keyboardEvent(
+    key: string,
+    overrides: Partial<Parameters<typeof getInvertedChatListKeyboardScrollDelta>[0]> = {},
+) {
+    return {
+        key,
+        defaultPrevented: false,
+        altKey: false,
+        ctrlKey: false,
+        metaKey: false,
+        shiftKey: false,
+        ...overrides,
+    };
+}
+
+describe('inverted chat list keyboard scrolling', () => {
+    it('maps standard reading-navigation keys to the inverse DOM scroll delta', () => {
+        expect(getInvertedChatListKeyboardScrollDelta(keyboardEvent('ArrowDown'), VIEWPORT_HEIGHT))
+            .toBe(-CHAT_LIST_KEYBOARD_LINE_SCROLL);
+        expect(getInvertedChatListKeyboardScrollDelta(keyboardEvent('ArrowUp'), VIEWPORT_HEIGHT))
+            .toBe(CHAT_LIST_KEYBOARD_LINE_SCROLL);
+        expect(getInvertedChatListKeyboardScrollDelta(keyboardEvent('PageDown'), VIEWPORT_HEIGHT))
+            .toBe(-VIEWPORT_HEIGHT);
+        expect(getInvertedChatListKeyboardScrollDelta(keyboardEvent('PageUp'), VIEWPORT_HEIGHT))
+            .toBe(VIEWPORT_HEIGHT);
+        expect(getInvertedChatListKeyboardScrollDelta(keyboardEvent(' '), VIEWPORT_HEIGHT))
+            .toBe(-VIEWPORT_HEIGHT);
+        expect(getInvertedChatListKeyboardScrollDelta(keyboardEvent('Spacebar'), VIEWPORT_HEIGHT))
+            .toBe(-VIEWPORT_HEIGHT);
+    });
+
+    it('leaves handled, modified, and unrelated key events alone', () => {
+        expect(getInvertedChatListKeyboardScrollDelta(
+            keyboardEvent('ArrowDown', { defaultPrevented: true }),
+            VIEWPORT_HEIGHT,
+        )).toBeNull();
+        expect(getInvertedChatListKeyboardScrollDelta(
+            keyboardEvent('ArrowDown', { metaKey: true }),
+            VIEWPORT_HEIGHT,
+        )).toBeNull();
+        expect(getInvertedChatListKeyboardScrollDelta(
+            keyboardEvent('ArrowDown', { ctrlKey: true }),
+            VIEWPORT_HEIGHT,
+        )).toBeNull();
+        expect(getInvertedChatListKeyboardScrollDelta(
+            keyboardEvent('ArrowDown', { altKey: true }),
+            VIEWPORT_HEIGHT,
+        )).toBeNull();
+        expect(getInvertedChatListKeyboardScrollDelta(
+            keyboardEvent('ArrowDown', { shiftKey: true }),
+            VIEWPORT_HEIGHT,
+        )).toBeNull();
+        expect(getInvertedChatListKeyboardScrollDelta(keyboardEvent('Home'), VIEWPORT_HEIGHT))
+            .toBeNull();
+    });
+});

packages/happy-app/sources/components/chatListKeyboardScroll.ts

@@ -0,0 +1,33 @@
+interface KeyboardScrollEvent {
+    key: string;
+    defaultPrevented: boolean;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}
+
+export const CHAT_LIST_KEYBOARD_LINE_SCROLL = 48;
+
+export function getInvertedChatListKeyboardScrollDelta(
+    event: KeyboardScrollEvent,
+    viewportHeight: number,
+): number | null {
+    if (event.defaultPrevented) return null;
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return null;
+
+    switch (event.key) {
+        case 'ArrowDown':
+            return -CHAT_LIST_KEYBOARD_LINE_SCROLL;
+        case 'ArrowUp':
+            return CHAT_LIST_KEYBOARD_LINE_SCROLL;
+        case 'PageDown':
+        case ' ':
+        case 'Spacebar':
+            return -viewportHeight;
+        case 'PageUp':
+            return viewportHeight;
+        default:
+            return null;
+    }
+}