gloomberb 0.10.2 → 0.10.4

package/src/components/onboarding/wizard-account.ts

@@ -0,0 +1,235 @@
+import { useCallback, useRef, useState, type Dispatch, type SetStateAction } from "react";
+import { apiClient } from "../../api-client";
+import { chatController } from "../../plugins/builtin/chat/controller";
+import { debugLog } from "../../utils/debug-log";
+import {
+  advanceAccountField,
+  classifyAccountError,
+  deriveUsernameFromEmail,
+  isUsernameConflictError,
+  validateAccountEmail,
+  validateAccountPassword,
+  type AccountMode,
+  type AccountOutcome,
+  type AccountSub,
+  type AccountSubmitError,
+} from "./account-step/model";
+
+const onboardingLog = debugLog.createLogger("onboarding");
+
+export interface OnboardingAccountState {
+  accountSub: AccountSub;
+  accountChoiceIdx: number;
+  accountEmail: string;
+  accountPassword: string;
+  accountFieldIdx: number;
+  accountSubmitting: boolean;
+  accountSubmitError: AccountSubmitError | null;
+  accountValidationError: string | null;
+  accountOutcome: AccountOutcome | null;
+  setAccountChoiceIdx: Dispatch<SetStateAction<number>>;
+  setAccountEmail: (value: string) => void;
+  setAccountPassword: (value: string) => void;
+  beginAccountMode: (mode: AccountMode) => void;
+  returnToAccountChooser: () => void;
+  switchToAccountLogin: () => void;
+  submitAccountField: () => void;
+  submitAccount: () => void;
+  syncExistingAccountSession: () => void;
+}
+
+/**
+ * Owns the account step's sub-state machine and the auth calls behind it.
+ * Skipping never routes through here, so a failed or hung request can't keep
+ * the user from finishing onboarding.
+ */
+export function useOnboardingAccount({
+  nextStep,
+  setEditingField,
+}: {
+  nextStep: () => void;
+  setEditingField: (editing: boolean) => void;
+}): OnboardingAccountState {
+  const attemptRef = useRef(0);
+  // The text input re-emits its value on enter, so compare before clearing an
+  // error the same keypress just produced.
+  const emailRef = useRef("");
+  const passwordRef = useRef("");
+  const [accountSub, setAccountSub] = useState<AccountSub>("choose");
+  const [accountChoiceIdx, setAccountChoiceIdx] = useState(0);
+  const [accountEmail, setAccountEmailValue] = useState("");
+  const [accountPassword, setAccountPasswordValue] = useState("");
+  const [accountFieldIdx, setAccountFieldIdx] = useState(0);
+  const [accountSubmitting, setAccountSubmitting] = useState(false);
+  const [accountSubmitError, setAccountSubmitError] = useState<AccountSubmitError | null>(null);
+  const [accountValidationError, setAccountValidationError] = useState<string | null>(null);
+  const [accountOutcome, setAccountOutcome] = useState<AccountOutcome | null>(null);
+
+  const clearErrors = useCallback(() => {
+    setAccountSubmitError(null);
+    setAccountValidationError(null);
+  }, []);
+
+  const setAccountEmail = useCallback((value: string) => {
+    if (emailRef.current === value) return;
+    emailRef.current = value;
+    setAccountEmailValue(value);
+    clearErrors();
+  }, [clearErrors]);
+
+  const setAccountPassword = useCallback((value: string) => {
+    if (passwordRef.current === value) return;
+    passwordRef.current = value;
+    setAccountPasswordValue(value);
+    clearErrors();
+  }, [clearErrors]);
+
+  const resetAccountPassword = useCallback(() => {
+    passwordRef.current = "";
+    setAccountPasswordValue("");
+  }, []);
+
+  const beginAccountMode = useCallback((mode: AccountMode) => {
+    attemptRef.current += 1;
+    clearErrors();
+    setAccountSubmitting(false);
+    setAccountFieldIdx(0);
+    setAccountSub(mode);
+    setEditingField(true);
+  }, [clearErrors, setEditingField]);
+
+  const returnToAccountChooser = useCallback(() => {
+    attemptRef.current += 1;
+    clearErrors();
+    setAccountSubmitting(false);
+    setAccountFieldIdx(0);
+    setAccountSub("choose");
+    setEditingField(false);
+  }, [clearErrors, setEditingField]);
+
+  const switchToAccountLogin = useCallback(() => {
+    attemptRef.current += 1;
+    clearErrors();
+    setAccountSubmitting(false);
+    resetAccountPassword();
+    setAccountFieldIdx(1);
+    setAccountSub("login");
+    setEditingField(true);
+  }, [clearErrors, resetAccountPassword, setEditingField]);
+
+  const submitAccount = useCallback(() => {
+    if (accountSubmitting) return;
+    const mode: AccountMode = accountSub === "login" ? "login" : "signup";
+    const email = accountEmail.trim();
+    const password = accountPassword;
+
+    const emailError = validateAccountEmail(email);
+    if (emailError) {
+      setAccountFieldIdx(0);
+      setAccountValidationError(emailError);
+      setEditingField(true);
+      return;
+    }
+    const passwordError = validateAccountPassword(password, mode);
+    if (passwordError) {
+      setAccountFieldIdx(1);
+      setAccountValidationError(passwordError);
+      setEditingField(true);
+      return;
+    }
+
+    const attemptId = attemptRef.current + 1;
+    attemptRef.current = attemptId;
+    setEditingField(false);
+    setAccountSubmitting(true);
+    clearErrors();
+
+    void (async () => {
+      try {
+        if (mode === "signup") {
+          try {
+            const username = deriveUsernameFromEmail(email);
+            await apiClient.signUp(email, username, username, password);
+          } catch (error) {
+            if (!isUsernameConflictError(error)) throw error;
+            const retryUsername = deriveUsernameFromEmail(email, 1);
+            await apiClient.signUp(email, retryUsername, retryUsername, password);
+          }
+          await apiClient.sendVerification().catch(() => {});
+        } else {
+          await apiClient.signIn(email, password);
+        }
+
+        // Hands the freshly captured session cookie to the chat controller so it
+        // reaches plugin persistence instead of living only in this process.
+        chatController.clearSession();
+        await chatController.refreshSession().catch(() => {});
+
+        if (attemptRef.current !== attemptId) return;
+        onboardingLog.info("Onboarding account step completed", { mode });
+        setAccountSubmitting(false);
+        resetAccountPassword();
+        setAccountOutcome({ mode, email });
+        setAccountSub("signed-in");
+        nextStep();
+      } catch (error) {
+        if (attemptRef.current !== attemptId) return;
+        const submitError = classifyAccountError(error, mode);
+        onboardingLog.error("Onboarding account step failed", { mode, error: submitError.message });
+        setAccountSubmitting(false);
+        setAccountSubmitError(submitError);
+      }
+    })();
+  }, [accountEmail, accountPassword, accountSub, accountSubmitting, clearErrors, nextStep, resetAccountPassword, setEditingField]);
+
+  const submitAccountField = useCallback(() => {
+    if (accountSub !== "signup" && accountSub !== "login") return;
+    const advance = advanceAccountField({
+      mode: accountSub,
+      email: accountEmail.trim(),
+      password: accountPassword,
+      fieldIdx: accountFieldIdx,
+    });
+
+    if (advance.action === "invalid") {
+      setAccountValidationError(advance.message);
+      setEditingField(true);
+      return;
+    }
+    if (advance.action === "next-field") {
+      setAccountValidationError(null);
+      setAccountFieldIdx(advance.fieldIdx);
+      setEditingField(true);
+      return;
+    }
+    submitAccount();
+  }, [accountEmail, accountFieldIdx, accountPassword, accountSub, setEditingField, submitAccount]);
+
+  const syncExistingAccountSession = useCallback(() => {
+    if (accountOutcome || accountSub !== "choose" || !apiClient.getSessionToken()) return;
+    const user = apiClient.getCurrentUser();
+    setAccountOutcome({ mode: "login", email: user?.email?.trim() || user?.username?.trim() || "" });
+    setAccountSub("signed-in");
+  }, [accountOutcome, accountSub]);
+
+  return {
+    accountSub,
+    accountChoiceIdx,
+    accountEmail,
+    accountPassword,
+    accountFieldIdx,
+    accountSubmitting,
+    accountSubmitError,
+    accountValidationError,
+    accountOutcome,
+    setAccountChoiceIdx,
+    setAccountEmail,
+    setAccountPassword,
+    beginAccountMode,
+    returnToAccountChooser,
+    switchToAccountLogin,
+    submitAccountField,
+    submitAccount,
+    syncExistingAccountSession,
+  };
+}

package/src/components/onboarding/wizard-keyboard.ts

@@ -4,6 +4,12 @@ import { isBackNavigationKey, isPlainEscape } from "../../utils/back-navigation"
 import { isPlainKey } from "../../utils/keyboard";
 import type { ListViewItem } from "../ui";
 import { useShortcut } from "../../react/input";
+import {
+  ACCOUNT_CHOICE_IDS,
+  type AccountMode,
+  type AccountSub,
+  type AccountSubmitError,
+} from "./account-step/model";
 import type { PortfolioSub } from "./onboarding-steps";
 import type { BrokerOption, OnboardingStep } from "./wizard-model";
 
@@ -29,6 +35,16 @@ export function useOnboardingKeyboard({
   setEditingField,
   isBrokerSyncing,
   brokerSyncError,
+  accountSub,
+  accountChoiceIdx,
+  setAccountChoiceIdx,
+  accountSubmitting,
+  accountSubmitError,
+  beginAccountMode,
+  returnToAccountChooser,
+  switchToAccountLogin,
+  submitAccountField,
+  submitAccount,
   isFinishing,
   nextStep,
   prevStep,
@@ -58,6 +74,16 @@ export function useOnboardingKeyboard({
   setEditingField: Dispatch<SetStateAction<boolean>>;
   isBrokerSyncing: boolean;
   brokerSyncError: string | null;
+  accountSub: AccountSub;
+  accountChoiceIdx: number;
+  setAccountChoiceIdx: Dispatch<SetStateAction<number>>;
+  accountSubmitting: boolean;
+  accountSubmitError: AccountSubmitError | null;
+  beginAccountMode: (mode: AccountMode) => void;
+  returnToAccountChooser: () => void;
+  switchToAccountLogin: () => void;
+  submitAccountField: () => void;
+  submitAccount: () => void;
   isFinishing: boolean;
   nextStep: () => void;
   prevStep: () => void;
@@ -74,6 +100,10 @@ export function useOnboardingKeyboard({
     if (editingField) {
       if (event.name === "enter" || event.name === "return") {
         setEditingField(false);
+        if (step === "account") {
+          submitAccountField();
+          return;
+        }
         if (portfolioSub === "broker-fields" && selectedBrokerId) {
           const currentField = activeBrokerFields[brokerFieldIdx];
           if (!currentField) {
@@ -102,7 +132,9 @@ export function useOnboardingKeyboard({
         }
       } else if (isPlainEscape(event)) {
         setEditingField(false);
-        if (portfolioSub === "broker-fields") {
+        if (step === "account") {
+          returnToAccountChooser();
+        } else if (portfolioSub === "broker-fields") {
           setPortfolioSub("broker-setup");
         } else {
           setPortfolioSub("choose");
@@ -117,6 +149,30 @@ export function useOnboardingKeyboard({
         finish();
         return;
       }
+      if (step === "account") {
+        if (accountSubmitting) return;
+        if (accountSub === "choose") {
+          const choice = ACCOUNT_CHOICE_IDS[accountChoiceIdx];
+          if (!choice || choice === "skip") {
+            nextStep();
+            return;
+          }
+          beginAccountMode(choice);
+          return;
+        }
+        if (accountSub === "signup" || accountSub === "login") {
+          if (accountSubmitError?.kind === "switch-to-login") {
+            switchToAccountLogin();
+          } else if (accountSubmitError) {
+            submitAccount();
+          } else {
+            setEditingField(true);
+          }
+          return;
+        }
+        nextStep();
+        return;
+      }
       if (step === "portfolio") {
         if (portfolioSub === "choose") {
           const choice = portfolioChoices[portfolioOptionIdx]!;
@@ -189,6 +245,10 @@ export function useOnboardingKeyboard({
       }
       nextStep();
     } else if (isBackNavigationKey(event) || event.name === "left") {
+      if (step === "account" && (accountSub === "signup" || accountSub === "login")) {
+        returnToAccountChooser();
+        return;
+      }
       if (step === "portfolio" && portfolioSub === "broker-sync") {
         resetBrokerSync();
         setPortfolioSub("broker-fields");
@@ -219,6 +279,12 @@ export function useOnboardingKeyboard({
       } else if (isPlainKey(event, "down", "j")) {
         setThemeIdx((index) => Math.min(themeIds.length - 1, index + 1));
       }
+    } else if (step === "account" && accountSub === "choose") {
+      if (isPlainKey(event, "up", "k")) {
+        setAccountChoiceIdx((index) => Math.max(0, index - 1));
+      } else if (isPlainKey(event, "down", "j")) {
+        setAccountChoiceIdx((index) => Math.min(ACCOUNT_CHOICE_IDS.length - 1, index + 1));
+      }
     } else if (step === "portfolio" && portfolioSub === "choose") {
       if (isPlainKey(event, "up", "k")) {
         setPortfolioOptionIdx((index) => Math.max(0, index - 1));

package/src/components/onboarding/wizard-model.ts

@@ -1,8 +1,8 @@
 import type { BrokerAdapter } from "../../types/broker";
 
-export type OnboardingStep = "welcome" | "theme" | "portfolio" | "shortcuts" | "ready";
+export type OnboardingStep = "welcome" | "theme" | "portfolio" | "shortcuts" | "account" | "ready";
 
-export const ONBOARDING_STEPS: OnboardingStep[] = ["welcome", "theme", "portfolio", "shortcuts", "ready"];
+export const ONBOARDING_STEPS: OnboardingStep[] = ["welcome", "theme", "portfolio", "shortcuts", "account", "ready"];
 
 export interface BrokerOption {
   id: string;

package/src/components/ui/data-table/index.tsx

@@ -13,6 +13,7 @@ export type {
   DataTableColumn,
   DataTableProps,
   DataTableSectionHeader,
+  DataTableVisibleRange,
 } from "./types";
 
 export function DataTable<T, C extends DataTableColumn = DataTableColumn>(

package/src/components/ui/data-table/opentui/index.tsx

@@ -19,7 +19,9 @@ import {
 import type {
   DataTableColumn,
   DataTableProps,
+  DataTableVisibleRange,
 } from "../types";
+import { resolveDataTableVisibleRange } from "../visible-range";
 import {
   resolveDataTableScrollTop,
   resolveDataTableVisibleWindow,
@@ -47,6 +49,8 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   onSelect,
   onActivate,
   onTableMouseDown,
+  visibleRangeKey,
+  onVisibleRangeChange,
   onRowMouseDown,
   onRowContextMenu,
   rowContextMenuSurface = false,
@@ -74,6 +78,10 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   const nativeRenderer = useNativeRenderer();
   const [scrollVersion, setScrollVersion] = useState(0);
   const lastAppliedScrollRequestRef = useRef<string | null>(null);
+  const lastVisibleRangeRef = useRef<{
+    key: string | number | undefined;
+    range: DataTableVisibleRange;
+  } | null>(null);
   const scrollTop = virtualize ? (scrollRef.current?.scrollTop ?? 0) : 0;
   const measuredViewportHeight = scrollRef.current?.viewport?.height;
   const tableWindow = useMemo(
@@ -123,6 +131,25 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
     () => expandTableColumns(columns, contentWidth, columnGap, horizontalPadding),
     [columnGap, columns, contentWidth, horizontalPadding],
   );
+  const emitVisibleRange = useCallback(() => {
+    if (!onVisibleRangeChange) return;
+    const scrollBox = scrollRef.current;
+    const range = resolveDataTableVisibleRange({
+      itemCount: items.length,
+      rowSize: 1,
+      scrollOffset: scrollBox?.scrollTop ?? scrollTop,
+      viewportSize: scrollBox?.viewport?.height ?? viewportHeight,
+    });
+    const previous = lastVisibleRangeRef.current;
+    if (
+      previous !== null
+      && previous.key === visibleRangeKey
+      && previous.range.start === range.start
+      && previous.range.end === range.end
+    ) return;
+    lastVisibleRangeRef.current = { key: visibleRangeKey, range };
+    onVisibleRangeChange(range);
+  }, [items.length, onVisibleRangeChange, scrollRef, scrollTop, viewportHeight, visibleRangeKey]);
   const handleRowMouseDown =
     useDoubleClickActivation<DataTableRowPointerTarget<T>>({
       onSelect: ({ item, index }) => {
@@ -140,13 +167,26 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
       setScrollVersion((current) => current + 1);
     }
     onBodyScrollActivity();
+    emitVisibleRange();
     nativeRenderer.requestRender();
-  }, [nativeRenderer, onBodyScrollActivity, virtualize]);
+  }, [emitVisibleRange, nativeRenderer, onBodyScrollActivity, virtualize]);
   useScrollBoxScrollActivity({
     scrollRef,
     onVerticalScroll: handleBodyScrollActivity,
     onHorizontalScroll: syncHeaderScroll,
   });
+  const handleBodySizeChange = useCallback(() => {
+    measureContentWidth();
+    if (virtualize) {
+      setScrollVersion((current) => current + 1);
+    }
+    queueMicrotask(emitVisibleRange);
+  }, [emitVisibleRange, measureContentWidth, virtualize]);
+
+  useEffect(() => {
+    emitVisibleRange();
+    queueMicrotask(emitVisibleRange);
+  }, [emitVisibleRange]);
   const focusPane = useCallback(() => {
     if (!paneInstanceId) return;
     dispatch({ type: "FOCUS_PANE", paneId: paneInstanceId });
@@ -178,6 +218,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
       setScrollVersion((current) => current + 1);
     }
     syncHeaderScroll();
+    queueMicrotask(emitVisibleRange);
     return true;
   }, [
     appViewport.height,
@@ -185,6 +226,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
     scrollRef,
     scrollToIndex,
     scrollToIndexAlign,
+    emitVisibleRange,
     syncHeaderScroll,
     virtualize,
   ]);
@@ -324,7 +366,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
           focusPane();
           onTableMouseDown?.({});
         }}
-        onSizeChange={measureContentWidth}
+        onSizeChange={handleBodySizeChange}
       >
         {items.length === 0 ? (
           emptyContent ?? (

package/src/components/ui/data-table/types.ts

@@ -33,6 +33,13 @@ export interface DataTableRowState {
   selected: boolean;
 }
 
+export interface DataTableVisibleRange {
+  /** First visible row index. */
+  start: number;
+  /** Exclusive end of the visible row range. */
+  end: number;
+}
+
 export interface DataTableProps<
   T,
   C extends DataTableColumn = DataTableColumn,
@@ -53,6 +60,9 @@ export interface DataTableProps<
   onSelect: (item: T, index: number) => void;
   onActivate?: (item: T, index: number) => void;
   onTableMouseDown?: (event: any) => void;
+  /** Changes when the meaning of row indexes changes without changing table geometry. */
+  visibleRangeKey?: string | number;
+  onVisibleRangeChange?: (range: DataTableVisibleRange) => void;
   onRowMouseDown?: (item: T, index: number, event: any) => boolean | void;
   onRowContextMenu?: (item: T, index: number, event: any) => void;
   rowContextMenuSurface?: boolean;

package/src/components/ui/data-table/visible-range.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, test } from "bun:test";
+import { resolveDataTableVisibleRange } from "./visible-range";
+
+describe("data table visible range", () => {
+  test("includes partially visible desktop rows without counting the sticky header", () => {
+    expect(resolveDataTableVisibleRange({
+      itemCount: 100,
+      rowSize: 20,
+      scrollOffset: 10,
+      viewportSize: 180,
+    })).toEqual({ start: 0, end: 10 });
+
+    expect(resolveDataTableVisibleRange({
+      itemCount: 100,
+      rowSize: 20,
+      scrollOffset: 30,
+      viewportSize: 180,
+    })).toEqual({ start: 1, end: 11 });
+  });
+
+  test("clamps a terminal range to the available rows", () => {
+    expect(resolveDataTableVisibleRange({
+      itemCount: 8,
+      rowSize: 1,
+      scrollOffset: 6,
+      viewportSize: 5,
+    })).toEqual({ start: 6, end: 8 });
+  });
+});

package/src/components/ui/data-table/visible-range.ts

@@ -0,0 +1,21 @@
+import type { DataTableVisibleRange } from "./types";
+
+export function resolveDataTableVisibleRange({
+  itemCount,
+  rowSize,
+  scrollOffset,
+  viewportSize,
+}: {
+  itemCount: number;
+  rowSize: number;
+  scrollOffset: number;
+  viewportSize: number;
+}): DataTableVisibleRange {
+  const count = Math.max(0, Math.floor(itemCount));
+  const size = Number.isFinite(rowSize) && rowSize > 0 ? rowSize : 1;
+  const offset = Number.isFinite(scrollOffset) ? Math.max(0, scrollOffset) : 0;
+  const viewport = Number.isFinite(viewportSize) ? Math.max(0, viewportSize) : 0;
+  const start = Math.min(count, Math.floor(offset / size));
+  const end = Math.min(count, Math.max(start, Math.ceil((offset + viewport) / size)));
+  return { start, end };
+}

package/src/components/ui/ui.test.tsx

@@ -3,7 +3,7 @@ import { act, createRef, useEffect, useRef, useState } from "react";
 import { TestDialogProvider, testRender } from "../../renderers/opentui/test-utils";
 import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
 import { ChoiceDialog } from "./choice-dialog";
-import { DataTable, type DataTableColumn } from "./data-table";
+import { DataTable, type DataTableColumn, type DataTableVisibleRange } from "./data-table";
 import { TextField } from "./fields";
 import { ListView } from "./list-view";
 import { MultiSelectDialogButton, type MultiSelectDialogButtonHandle } from "./multi-select/dialog";
@@ -26,6 +26,8 @@ let setListSelection: ((index: number) => void) | null = null;
 let selectedTableRow: string | null = null;
 let activatedTableRow: string | null = null;
 let tableScrollBoxForTest: ScrollBoxRenderable | null = null;
+let tableVisibleRanges: DataTableVisibleRange[] = [];
+let setTableVisibleRangeKey: ((key: string) => void) | null = null;
 let closedTab: string | null = null;
 let addedTab = false;
 let resolvedChoice: string | null = null;
@@ -176,6 +178,7 @@ function DataTableHorizontalScrollHarness({
 function DataTableVirtualizationHarness() {
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
+  const [visibleRangeKey, setVisibleRangeKey] = useState("first");
   const rows = Array.from({ length: 100 }, (_, index) => ({
     id: `row-${index}`,
     name: `Row ${index}`,
@@ -183,6 +186,7 @@ function DataTableVirtualizationHarness() {
 
   useEffect(() => {
     tableScrollBoxForTest = scrollRef.current;
+    setTableVisibleRangeKey = setVisibleRangeKey;
     return () => {
       if (tableScrollBoxForTest === scrollRef.current) {
         tableScrollBoxForTest = null;
@@ -201,6 +205,8 @@ function DataTableVirtualizationHarness() {
       scrollRef={scrollRef}
       syncHeaderScroll={() => {}}
       onBodyScrollActivity={() => {}}
+      visibleRangeKey={visibleRangeKey}
+      onVisibleRangeChange={(range) => tableVisibleRanges.push(range)}
       getItemKey={(row) => row.id}
       isSelected={() => false}
       onSelect={() => {}}
@@ -287,6 +293,8 @@ afterEach(async () => {
   selectedTableRow = null;
   activatedTableRow = null;
   tableScrollBoxForTest = null;
+  tableVisibleRanges = [];
+  setTableVisibleRangeKey = null;
   closedTab = null;
   addedTab = false;
   resolvedChoice = null;
@@ -906,6 +914,16 @@ describe("shared UI kit", () => {
     expect(frame).toContain("Row 0");
     expect(frame).not.toContain("Row 99");
     expect(tableScrollBoxForTest?.scrollTop).toBe(0);
+    expect(tableVisibleRanges.at(-1)).toEqual({ start: 0, end: 5 });
+
+    const initialRangeCount = tableVisibleRanges.length;
+    await act(async () => {
+      setTableVisibleRangeKey!("second");
+      await Promise.resolve();
+      await testSetup!.renderOnce();
+    });
+    expect(tableVisibleRanges.length).toBeGreaterThan(initialRangeCount);
+    expect(tableVisibleRanges.at(-1)).toEqual({ start: 0, end: 5 });
 
     await act(async () => {
       for (let index = 0; index < 12; index++) {
@@ -919,6 +937,10 @@ describe("shared UI kit", () => {
 
     const scrollTop = tableScrollBoxForTest?.scrollTop ?? 0;
     expect(scrollTop).toBeGreaterThan(0);
+    expect(tableVisibleRanges.at(-1)).toEqual({
+      start: scrollTop,
+      end: Math.min(100, scrollTop + 5),
+    });
 
     const scrolledFrame = testSetup.captureCharFrame();
     expect(scrolledFrame).toContain(`Row ${scrollTop}`);