Fix(app)/tui modal list overflow (#99)

* fix(app): constrain picker lists to modal bounds with scrollbox

* centralize scroll index logic for tui modal

Author: andrewmelchor

packages/app/src/tui/components/dialog-select.tsx

@@ -1,7 +1,9 @@
+import type { ScrollBoxRenderable } from '@opentui/core';
 import { useKeyboard } from '@opentui/solid';
 import fuzzysort from 'fuzzysort';
 import { createMemo, createSignal, For, type JSX, onMount } from 'solid-js';
 import type { DialogContextValue } from '../context/dialog';
+import { useScrollToIndex } from '../hooks';
 import { rgba, theme } from '../theme';
 import { normalizeKey } from '../util/normalize-key';
 
@@ -24,6 +26,7 @@ export type DialogSelectProps<T> = {
 export function DialogSelect<T>(props: DialogSelectProps<T>): JSX.Element {
   const [query, setQuery] = createSignal('');
   const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [scrollRef, setScrollRef] = createSignal<ScrollBoxRenderable | undefined>(undefined);
   let inputRef: { focus: () => void } | undefined;
 
   const filteredOptions = createMemo(() => {
@@ -87,6 +90,12 @@ export function DialogSelect<T>(props: DialogSelectProps<T>): JSX.Element {
     setTimeout(() => inputRef?.focus(), 1);
   });
 
+  useScrollToIndex({
+    scrollRef,
+    selectedIndex: clampedIndex,
+    itemCount: () => filteredOptions().length
+  });
+
   return (
     <box flexDirection="column" gap={1} paddingBottom={1}>
       {/* Title bar with escape hint */}
@@ -121,13 +130,19 @@ export function DialogSelect<T>(props: DialogSelectProps<T>): JSX.Element {
       </box>
 
       {/* Options list */}
-      <box flexDirection="column" maxHeight={10}>
+      <scrollbox
+        ref={(r) => {
+          setScrollRef(r);
+        }}
+        height={10}
+      >
         <For each={filteredOptions()}>
           {(opt, idx) => {
             const isSelected = () => idx() === clampedIndex();
             return (
               <box
                 height={1}
+                flexShrink={0}
                 paddingLeft={2}
                 paddingRight={2}
                 flexDirection="row"
@@ -151,7 +166,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>): JSX.Element {
             <text fg={rgba(theme.textMuted)}>No matches</text>
           </box>
         )}
-      </box>
+      </scrollbox>
     </box>
   );
 }

packages/app/src/tui/components/execution-list.tsx

@@ -1,5 +1,6 @@
 import type { ScrollBoxRenderable } from '@opentui/core';
-import { createEffect, For, Show } from 'solid-js';
+import { createEffect, createSignal, For, Show } from 'solid-js';
+import { useScrollToIndex } from '../hooks';
 import type { ExecutionStatus, ExecutionSummary } from '../observer-store';
 import { getMethodColor, rgba, theme } from '../theme';
 import { formatDuration } from '../util/format';
@@ -28,33 +29,25 @@ function getStatusDisplay(status: ExecutionStatus): { icon: string; color: strin
 }
 
 export function ExecutionList(props: ExecutionListProps) {
-  let scrollRef: ScrollBoxRenderable | undefined;
+  const [scrollRef, setScrollRef] = createSignal<ScrollBoxRenderable | undefined>(undefined);
 
-  // Scroll to selected when it changes
-  createEffect(() => {
-    const id = props.selectedId;
-    if (!scrollRef || !id) return;
-
-    const index = props.executions.findIndex((e) => e.reqExecId === id);
-    if (index < 0) return;
-
-    const viewportHeight = scrollRef.height;
-    const scrollTop = scrollRef.scrollTop;
-    const scrollBottom = scrollTop + viewportHeight;
-
-    if (index < scrollTop) {
-      scrollRef.scrollBy(index - scrollTop);
-    } else if (index + 1 > scrollBottom) {
-      scrollRef.scrollBy(index + 1 - scrollBottom);
-    }
+  useScrollToIndex({
+    scrollRef,
+    selectedIndex: () => {
+      const id = props.selectedId;
+      if (!id) return -1;
+      return props.executions.findIndex((e) => e.reqExecId === id);
+    },
+    itemCount: () => props.executions.length
   });
 
   // Auto-scroll to bottom when new executions arrive (if running)
   createEffect(() => {
-    if (!scrollRef || !props.isRunning) return;
+    const ref = scrollRef();
+    if (!ref || !props.isRunning) return;
     const len = props.executions.length;
     if (len > 0) {
-      scrollRef.scrollTo(len - 1);
+      ref.scrollTo(len - 1);
     }
   });
 
@@ -81,7 +74,7 @@ export function ExecutionList(props: ExecutionListProps) {
       </box>
       <scrollbox
         ref={(r) => {
-          scrollRef = r;
+          setScrollRef(r);
         }}
         flexGrow={1}
         paddingLeft={1}

packages/app/src/tui/components/file-request-picker.tsx

@@ -1,3 +1,4 @@
+import type { ScrollBoxRenderable } from '@opentui/core';
 import type { WorkspaceRequest } from '@t-req/sdk/client';
 import fuzzysort from 'fuzzysort';
 import {
@@ -11,7 +12,7 @@ import {
   Show
 } from 'solid-js';
 import { useDialog, useStore } from '../context';
-import { usePickerNavigation } from '../hooks';
+import { usePickerNavigation, useScrollToIndex } from '../hooks';
 import { isHttpFile, isRunnableScript, isTestFile } from '../store';
 import { rgba, theme } from '../theme';
 import { RequestPicker } from './request-picker';
@@ -39,6 +40,7 @@ const CONFIRM_TIMEOUT_MS = 2000;
 export function FileRequestPicker(props: FileRequestPickerProps): JSX.Element {
   const store = useStore();
   const dialog = useDialog();
+  const [scrollRef, setScrollRef] = createSignal<ScrollBoxRenderable | undefined>(undefined);
 
   const [query, setQuery] = createSignal('');
   const [pendingSendId, setPendingSendId] = createSignal<string | undefined>(undefined);
@@ -184,6 +186,12 @@ export function FileRequestPicker(props: FileRequestPickerProps): JSX.Element {
     }
   });
 
+  useScrollToIndex({
+    scrollRef,
+    selectedIndex: clampedIndex,
+    itemCount: () => filteredItems().length
+  });
+
   // Clear pending send when query or selection changes
   createEffect(() => {
     query();
@@ -243,7 +251,12 @@ export function FileRequestPicker(props: FileRequestPickerProps): JSX.Element {
       </box>
 
       {/* Items list */}
-      <box flexDirection="column" maxHeight={10}>
+      <scrollbox
+        ref={(r) => {
+          setScrollRef(r);
+        }}
+        height={10}
+      >
         <For each={filteredItems()}>
           {(item, idx) => {
             const isSelected = () => idx() === clampedIndex();
@@ -254,6 +267,7 @@ export function FileRequestPicker(props: FileRequestPickerProps): JSX.Element {
             return (
               <box
                 height={1}
+                flexShrink={0}
                 paddingLeft={2}
                 paddingRight={2}
                 flexDirection="row"
@@ -288,7 +302,7 @@ export function FileRequestPicker(props: FileRequestPickerProps): JSX.Element {
             <text fg={rgba(theme.textMuted)}>No matches</text>
           </box>
         </Show>
-      </box>
+      </scrollbox>
 
       {/* Action bar */}
       <box height={1} paddingLeft={2} flexDirection="row" gap={2}>

packages/app/src/tui/components/file-tree.tsx

@@ -1,5 +1,6 @@
 import type { ScrollBoxRenderable } from '@opentui/core';
-import { createEffect, For, Show } from 'solid-js';
+import { createSignal, For, Show } from 'solid-js';
+import { useScrollToIndex } from '../hooks';
 import type { FlatNode } from '../store';
 import { rgba, theme } from '../theme';
 
@@ -11,26 +12,12 @@ export interface FileTreeProps {
 }
 
 export function FileTree(props: FileTreeProps) {
-  let scrollRef: ScrollBoxRenderable | undefined;
+  const [scrollRef, setScrollRef] = createSignal<ScrollBoxRenderable | undefined>(undefined);
 
-  // Scroll to selection when it changes
-  createEffect(() => {
-    const idx = props.selectedIndex;
-    if (!scrollRef || idx < 0) return;
-
-    // Each row is height=1, so index equals Y position in scroll content
-    const viewportHeight = scrollRef.height;
-    const scrollTop = scrollRef.scrollTop;
-    const scrollBottom = scrollTop + viewportHeight;
-
-    // Check if selected item is outside visible range
-    if (idx < scrollTop) {
-      // Item is above viewport - scroll up
-      scrollRef.scrollBy(idx - scrollTop);
-    } else if (idx + 1 > scrollBottom) {
-      // Item is below viewport - scroll down
-      scrollRef.scrollBy(idx + 1 - scrollBottom);
-    }
+  useScrollToIndex({
+    scrollRef,
+    selectedIndex: () => props.selectedIndex,
+    itemCount: () => props.nodes.length
   });
 
   return (
@@ -47,7 +34,7 @@ export function FileTree(props: FileTreeProps) {
       </box>
       <scrollbox
         ref={(r) => {
-          scrollRef = r;
+          setScrollRef(r);
         }}
         flexGrow={1}
         paddingLeft={1}

packages/app/src/tui/components/request-picker.tsx

@@ -1,3 +1,4 @@
+import type { ScrollBoxRenderable } from '@opentui/core';
 import type { WorkspaceRequest } from '@t-req/sdk/client';
 import fuzzysort from 'fuzzysort';
 import {
@@ -11,7 +12,7 @@ import {
   Show
 } from 'solid-js';
 import { useDialog } from '../context';
-import { usePickerNavigation } from '../hooks';
+import { usePickerNavigation, useScrollToIndex } from '../hooks';
 import { getMethodColor, rgba, theme } from '../theme';
 
 interface RequestItem {
@@ -36,6 +37,7 @@ const CONFIRM_TIMEOUT_MS = 2000;
 
 export function RequestPicker(props: RequestPickerProps): JSX.Element {
   const dialog = useDialog();
+  const [scrollRef, setScrollRef] = createSignal<ScrollBoxRenderable | undefined>(undefined);
 
   const [query, setQuery] = createSignal('');
   const [pendingSendId, setPendingSendId] = createSignal<string | undefined>(undefined);
@@ -105,6 +107,12 @@ export function RequestPicker(props: RequestPickerProps): JSX.Element {
     }
   });
 
+  useScrollToIndex({
+    scrollRef,
+    selectedIndex: clampedIndex,
+    itemCount: () => filteredItems().length
+  });
+
   // Clear pending send when query or selection changes
   createEffect(() => {
     query();
@@ -156,7 +164,12 @@ export function RequestPicker(props: RequestPickerProps): JSX.Element {
       </box>
 
       {/* Request list */}
-      <box flexDirection="column" maxHeight={10}>
+      <scrollbox
+        ref={(r) => {
+          setScrollRef(r);
+        }}
+        height={10}
+      >
         <For each={filteredItems()}>
           {(item, idx) => {
             const isSelected = () => idx() === clampedIndex();
@@ -165,6 +178,7 @@ export function RequestPicker(props: RequestPickerProps): JSX.Element {
             return (
               <box
                 height={1}
+                flexShrink={0}
                 paddingLeft={2}
                 paddingRight={2}
                 flexDirection="row"
@@ -196,7 +210,7 @@ export function RequestPicker(props: RequestPickerProps): JSX.Element {
             <text fg={rgba(theme.textMuted)}>No matches</text>
           </box>
         </Show>
-      </box>
+      </scrollbox>
 
       {/* Action bar */}
       <box height={1} paddingLeft={2} flexDirection="row" gap={2}>

packages/app/src/tui/hooks/index.ts

@@ -18,6 +18,7 @@ export {
   type ScriptRunnerReturn,
   useScriptRunner
 } from './use-script-runner';
+export { type UseScrollToIndexOptions, useScrollToIndex } from './use-scroll-to-index';
 export {
   type TestRunnerOptions,
   type TestRunnerReturn,

packages/app/src/tui/hooks/use-scroll-to-index.ts

@@ -0,0 +1,34 @@
+import type { ScrollBoxRenderable } from '@opentui/core';
+import { createEffect } from 'solid-js';
+
+export interface UseScrollToIndexOptions {
+  scrollRef: () => ScrollBoxRenderable | undefined;
+  selectedIndex: () => number;
+  itemCount: () => number;
+}
+
+/**
+ * Keep a selected row index visible in a scrollbox with fixed-height rows.
+ */
+export function useScrollToIndex(opts: UseScrollToIndexOptions): void {
+  createEffect(() => {
+    const scrollRef = opts.scrollRef();
+    const itemCount = opts.itemCount();
+    const index = opts.selectedIndex();
+
+    if (!scrollRef || itemCount === 0 || index < 0) return;
+
+    const viewportHeight = scrollRef.height;
+    const scrollTop = scrollRef.scrollTop;
+    const scrollBottom = scrollTop + viewportHeight;
+
+    if (index < scrollTop) {
+      scrollRef.scrollBy(index - scrollTop);
+      return;
+    }
+
+    if (index + 1 > scrollBottom) {
+      scrollRef.scrollBy(index + 1 - scrollBottom);
+    }
+  });
+}