Share the modal scroll-window math in one hook

operator-modal and permission-modal each carried their own copy of
FALLBACK_TERMINAL_ROWS, maxRowOffset, and the clamp-and-slice
PageUp/PageDown logic. Extract it into useScrollWindow so the offset
math is owned in one place.

Author: TheGreatAxios

src/tui/components/operator-modal.tsx

@@ -6,6 +6,7 @@ import { createMemoizedParseMarkdown } from "../markdown-parser.js";
 import type { StyledSegment } from "../markdown-parser.js";
 import { color } from "../theme.js";
 import { inkPropsForSegment } from "../styled-segment-props.js";
+import { FALLBACK_TERMINAL_ROWS, useScrollWindow } from "../hooks/use-scroll-window.js";
 
 export type OperatorModalProps = {
   question: string;
@@ -17,14 +18,9 @@ export type OperatorModalProps = {
   terminalRows?: number;
 };
 
-const FALLBACK_TERMINAL_ROWS = 24;
 const MIN_QUESTION_ROWS = 2;
 const MIN_OPTION_ROWS = 3;
 
-function maxRowOffset(rowCount: number, visibleRows: number): number {
-  return Math.max(0, rowCount - visibleRows);
-}
-
 function segmentProps(seg: StyledSegment): Record<string, unknown> {
   return inkPropsForSegment(seg);
 }
@@ -153,14 +149,13 @@ export function OperatorModal({
   }
 
   const questionScrollable = questionLines.length > questionRows;
-  const questionMaxOffset = maxRowOffset(questionLines.length, questionRows);
-  const [questionScrollOffset, setQuestionScrollOffset] = useState(0);
-  const clampedQuestionOffset = Math.min(questionScrollOffset, questionMaxOffset);
+  const questionScroll = useScrollWindow(questionLines.length, questionRows);
+  const clampedQuestionOffset = questionScroll.offset;
   const visibleQuestionLines = questionScrollable
     ? questionLines.slice(clampedQuestionOffset, clampedQuestionOffset + questionRows)
     : questionLines;
-  const questionLinesAbove = clampedQuestionOffset;
-  const questionLinesBelow = Math.max(0, questionLines.length - clampedQuestionOffset - questionRows);
+  const questionLinesAbove = questionScroll.above;
+  const questionLinesBelow = questionScroll.below;
 
   // Only the plain list windows around the selection — grid mode is capped at
   // 4 options (2 rows), which always fits.
@@ -206,11 +201,11 @@ export function OperatorModal({
       return;
     }
     if (questionScrollable && key.pageUp) {
-      setQuestionScrollOffset((o) => Math.max(0, o - questionRows));
+      questionScroll.pageUp();
       return;
     }
     if (questionScrollable && key.pageDown) {
-      setQuestionScrollOffset((o) => Math.min(questionMaxOffset, o + questionRows));
+      questionScroll.pageDown();
       return;
     }
     if (key.ctrl && (key.upArrow || key.downArrow)) return;

src/tui/components/permission-modal.tsx

@@ -8,6 +8,7 @@ import { stripTerminalControlSequences } from "../../util/control-char-strip.js"
 import { isShellCommentOnly } from "../../permission/command.js";
 import { collapseSegmentPayloads, groupChainSegmentsForDisplay, middleEllipsis } from "../command-display.js";
 import type { QueuedApprovalSummary } from "../hooks/use-gates.js";
+import { FALLBACK_TERMINAL_ROWS, useScrollWindow } from "../hooks/use-scroll-window.js";
 
 // Bidi controls (RLO, embeddings, isolates) visually reorder the rendered
 // command — Trojan Source — and zero-width characters hide payload boundaries,
@@ -65,11 +66,6 @@ const MAX_RENDERED_QUEUE_ENTRIES = 5;
 // meaningful plus its scroll indicators), so it is the floor regardless of
 // how little the terminal reports.
 const MIN_BODY_ROWS = 3;
-const FALLBACK_TERMINAL_ROWS = 24;
-
-function maxRowOffset(rowCount: number, visibleRows: number): number {
-  return Math.max(0, rowCount - visibleRows);
-}
 
 export type PermissionModalProps = {
   request: PermissionRequest;
@@ -353,17 +349,16 @@ export function PermissionModal({
   const bodyViewportRows = bodyScrollable
     ? Math.max(1, availableBodyRows - 1)
     : availableBodyRows;
-  const bodyMaxOffset = maxRowOffset(bodyRows.length, bodyViewportRows);
-  // Local, top-pinned scroll state — unlike the transcript's useScroll (which
-  // pins to the newest/bottom line), an approval body should open showing its
+  // Top-pinned scroll state — unlike the transcript's useScroll (which pins
+  // to the newest/bottom line), an approval body should open showing its
   // start, with PageDown revealing the rest.
-  const [bodyScrollOffset, setBodyScrollOffset] = useState(0);
-  const clampedBodyOffset = Math.min(bodyScrollOffset, bodyMaxOffset);
+  const bodyScroll = useScrollWindow(bodyRows.length, bodyViewportRows);
+  const clampedBodyOffset = bodyScroll.offset;
   const visibleBodyRows = bodyScrollable
     ? bodyRows.slice(clampedBodyOffset, clampedBodyOffset + bodyViewportRows)
     : bodyRows;
-  const linesAbove = clampedBodyOffset;
-  const linesBelow = Math.max(0, bodyRows.length - clampedBodyOffset - bodyViewportRows);
+  const linesAbove = bodyScroll.above;
+  const linesBelow = bodyScroll.below;
 
   useInput((input, key) => {
     if (key.escape) {
@@ -388,11 +383,11 @@ export function PermissionModal({
     }
 
     if (bodyScrollable && key.pageUp) {
-      setBodyScrollOffset((o) => Math.max(0, o - bodyViewportRows));
+      bodyScroll.pageUp();
       return;
     }
     if (bodyScrollable && key.pageDown) {
-      setBodyScrollOffset((o) => Math.min(bodyMaxOffset, o + bodyViewportRows));
+      bodyScroll.pageDown();
       return;
     }
 

src/tui/hooks/use-scroll-window.test.tsx

@@ -0,0 +1,51 @@
+import { test, expect } from "bun:test";
+import { render } from "ink-testing-library";
+import type { ReactElement } from "react";
+import { Text, useInput } from "ink";
+import { useScrollWindow } from "./use-scroll-window.js";
+
+const tick = () => new Promise((resolve) => setTimeout(resolve, 20));
+
+// A minimal harness component so the hook's state (useState-backed) is
+// exercised the same way the modals use it: PageUp/PageDown drive offset,
+// and above/below report what's scrolled out of view.
+function Harness({ rowCount, visibleRows }: { rowCount: number; visibleRows: number }): ReactElement {
+  const window = useScrollWindow(rowCount, visibleRows);
+  useInput((_input, key) => {
+    if (key.pageDown) window.pageDown();
+    if (key.pageUp) window.pageUp();
+  });
+  return <Text>{`offset=${window.offset} above=${window.above} below=${window.below} max=${window.maxOffset}`}</Text>;
+}
+
+test("useScrollWindow starts at the top with everything below in view", () => {
+  const { lastFrame } = render(<Harness rowCount={10} visibleRows={4} />);
+  expect(lastFrame()).toBe("offset=0 above=0 below=6 max=6");
+});
+
+test("useScrollWindow pages down and clamps at maxOffset", async () => {
+  const { stdin, lastFrame } = render(<Harness rowCount={10} visibleRows={4} />);
+  stdin.write("\x1B[6~"); // PageDown
+  await tick();
+  expect(lastFrame()).toBe("offset=4 above=4 below=2 max=6");
+  stdin.write("\x1B[6~"); // PageDown again — clamps instead of overshooting
+  await tick();
+  expect(lastFrame()).toBe("offset=6 above=6 below=0 max=6");
+});
+
+test("useScrollWindow pages back up and clamps at 0", async () => {
+  const { stdin, lastFrame } = render(<Harness rowCount={10} visibleRows={4} />);
+  stdin.write("\x1B[6~"); // PageDown
+  await tick();
+  stdin.write("\x1B[5~"); // PageUp back to the top
+  await tick();
+  expect(lastFrame()).toBe("offset=0 above=0 below=6 max=6");
+  stdin.write("\x1B[5~"); // PageUp again — clamps instead of going negative
+  await tick();
+  expect(lastFrame()).toBe("offset=0 above=0 below=6 max=6");
+});
+
+test("useScrollWindow reports maxOffset 0 when content already fits", () => {
+  const { lastFrame } = render(<Harness rowCount={3} visibleRows={4} />);
+  expect(lastFrame()).toBe("offset=0 above=0 below=0 max=0");
+});

src/tui/hooks/use-scroll-window.ts

@@ -0,0 +1,39 @@
+import { useState } from "react";
+
+// Terminals that don't report a size (or report one before the first resize
+// event lands) fall back to a conservative row count so a modal still lays
+// out something scrollable rather than assuming infinite height.
+export const FALLBACK_TERMINAL_ROWS = 24;
+
+function maxRowOffset(rowCount: number, visibleRows: number): number {
+  return Math.max(0, rowCount - visibleRows);
+}
+
+export type ScrollWindow = {
+  // Current top-of-viewport row, clamped to [0, maxOffset].
+  offset: number;
+  maxOffset: number;
+  // Row counts above/below the visible window, for a "N more above/below"
+  // scroll indicator.
+  above: number;
+  below: number;
+  pageUp: () => void;
+  pageDown: () => void;
+};
+
+// Top-pinned scroll state shared by the approval modals: a body opens showing
+// its start, with PageUp/PageDown clamped to [0, rowCount - visibleRows].
+// Both operator-modal and permission-modal had their own copy of this offset
+// math and paging logic; this is the single place it's owned now.
+export function useScrollWindow(rowCount: number, visibleRows: number): ScrollWindow {
+  const maxOffset = maxRowOffset(rowCount, visibleRows);
+  const [rawOffset, setOffset] = useState(0);
+  const offset = Math.min(rawOffset, maxOffset);
+  const above = offset;
+  const below = Math.max(0, rowCount - offset - visibleRows);
+
+  const pageUp = (): void => setOffset((o) => Math.max(0, o - visibleRows));
+  const pageDown = (): void => setOffset((o) => Math.min(maxOffset, o + visibleRows));
+
+  return { offset, maxOffset, above, below, pageUp, pageDown };
+}