gloomberb 0.15.2 → 0.15.4

package/src/plugins/builtin/market-movers/index.tsx

@@ -1,17 +1,17 @@
 import { Box } from "../../../ui";
-import { isPlainKey } from "../../../utils/keyboard";
+import { nextHeaderSort } from "../../../utils/sort-values";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { DataTableView, EmptyState, Tabs, usePaneFooter, usePaneHeaderTabs, type DataTableKeyEvent } from "../../../components";
+import { DataTableView, EmptyState, usePaneFooter, usePaneTabs, type DataTableKeyEvent } from "../../../components";
+import { handleRefreshKey } from "../../../components/data-table/table-pane";
 import type { PaneProps } from "../../../types/plugin";
 import type { PluginModule } from "../plugin-module";
 import { TICKER_RESEARCH_PANE_ID } from "../../../types/config";
-import { priceColor } from "../../../theme/colors";
 import { publicTickerKey } from "../../../utils/exchanges";
-import { formatPercentRaw } from "../../../utils/format";
 import { usePaneSettingValue } from "../../../state/app/context";
+import { usePlanAccess } from "../../../api-client/plan-access";
 import { useAssetData, usePluginPaneState, usePluginTickerActions } from "../../runtime";
 import { useLiveQuoteEntries } from "../../../state/hooks/quote-streaming";
-import { useAutoRefresh } from "../shared/auto-refresh";
+import { useAutoRefresh } from "../../../react/auto-refresh";
 import { useQuoteBoard } from "../shared/use-quote-board";
 import {
   attachMarketMoversPersistence,
@@ -26,7 +26,6 @@ import {
   TABS,
   createRows,
   overlayMarketMoverQuotes,
-  nextSortPreference,
   resolveSummarySymbols,
   resolveTabs,
   sortRows,
@@ -34,39 +33,124 @@ import {
   type MarketMoverColumn,
   type MarketMoverRow,
   type MarketMoverSortPreference,
+  type ScreenerTabId,
   type TabId,
 } from "./model";
 import { loadMarketMoverTab } from "./client";
+import { summaryFooterSegments } from "./footer";
+import { isSessionTab, resolveActiveTab, usSessionAt, type UsSession } from "./session";
+import { SessionMoversBody } from "./session-body";
 import { marketMoversHeadless } from "./headless";
 import { buildMarketMoverColumns, renderMarketMoverCell } from "./table";
 import {
   LIVE_STREAMING_QUICK_SETTING,
   useLiveStreamingSetting,
   withLiveStreamingSetting,
-} from "../shared/live-streaming";
+} from "../../../state/hooks/live-streaming";
 import {
   buildScreenerQuoteTargets,
   resolveScreenerQuoteFeedStatus,
-} from "../shared/screener-live-quotes";
+} from "../../../market-data/quotes/screener-live-quotes";
 
-export { marketMoversHeadless } from "./headless";
 
 /** Stable identity: a fresh literal here would reload the board every render. */
 const NO_SAVED_SELECTION: string[] = [];
+const SESSION_CHECK_MS = 30_000;
 const NO_QUOTES: ScreenerQuote[] = [];
 const moverKey = (row: Pick<ScreenerQuote, "symbol" | "exchange">) => publicTickerKey(row.symbol, row.exchange);
 
+/** What is trading in New York, re-read every half minute so the pane follows 04:00, 09:30 and 16:00. */
+function useUsSession(): UsSession {
+  const [session, setSession] = useState(() => usSessionAt(Date.now()));
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const next = usSessionAt(Date.now());
+      setSession((current) => (current.key === next.key ? current : next));
+    }, SESSION_CHECK_MS);
+    return () => clearInterval(timer);
+  }, []);
+  return session;
+}
+
 function MarketMoversPane({ focused, width, height }: PaneProps) {
-  const dataProvider = useAssetData();
-  const { pinTicker } = usePluginTickerActions();
   const liveStreaming = useLiveStreamingSetting();
   const [savedTabs] = usePaneSettingValue<string[]>("tabs", NO_SAVED_SELECTION);
   const [savedSummarySymbols] = usePaneSettingValue<string[]>("summarySymbols", NO_SAVED_SELECTION);
   const tabs = useMemo(() => resolveTabs(savedTabs), [savedTabs]);
   const summarySymbols = useMemo(() => resolveSummarySymbols(savedSummarySymbols), [savedSummarySymbols]);
-  // Pane state rather than local state, so `--list` on the CLI and a restored
-  // layout open on the same tab the user (or the screenshot) asked for.
-  const [activeTab, setActiveTab] = usePluginPaneState<TabId>("activeTab", tabs[0]!.id);
+  // Pane state rather than local state, so a restored layout opens on the tab
+  // the user picked. `--list` on the CLI and screenshots land in `requestedTab`,
+  // which holds until the user picks a tab, whatever session is trading.
+  const [savedTab, setSavedTab] = usePluginPaneState<TabId>("activeTab", tabs[0]!.id);
+  const [pickedIn, setPickedIn] = usePluginPaneState<string | null>("activeTabSession", null);
+  const [requestedTab, setRequestedTab] = usePluginPaneState<TabId | null>("requestedTab", null);
+  const access = usePlanAccess();
+  const session = useUsSession();
+  const tabIds = useMemo(() => tabs.map((tab) => tab.id), [tabs]);
+  const activeTab = resolveActiveTab({
+    tabs: tabIds,
+    saved: savedTab,
+    pickedIn,
+    session,
+    requested: requestedTab,
+    sessionListsOpen: access.signedIn && access.emailVerified && access.hasProAccess,
+  });
+
+  // The index summary is a quote board like any other, so it runs on the shared
+  // one instead of a third parallel pipeline against the same upstream.
+  const { quotes: summaryBoard } = useQuoteBoard(summarySymbols, { liveStreaming });
+  const summaryQuotes = useMemo<MarketSummaryQuote[]>(() => (
+    summarySymbols
+      .map((symbol) => {
+        const quote = summaryBoard.get(symbol)?.quote;
+        return quote ? summaryQuoteFromQuote(symbol, quote) : null;
+      })
+      .filter((quote): quote is MarketSummaryQuote => !!quote)
+  ), [summaryBoard, summarySymbols]);
+
+  const tabItems = tabs.map((tab) => ({ label: tab.label, value: tab.id }));
+  const selectTab = (value: string) => {
+    setSavedTab(value as TabId);
+    setPickedIn(session.key);
+    if (requestedTab) setRequestedTab(null);
+  };
+  const { strip: tabStrip } = usePaneTabs({ tabs: tabItems, activeValue: activeTab, onSelect: selectTab, focused, compact: true, variant: "bare" });
+
+  return (
+    <Box flexDirection="column" width={width} height={height}>
+      {tabStrip && <Box height={1} paddingX={1}>{tabStrip}</Box>}
+      {isSessionTab(activeTab) ? (
+        <SessionMoversBody
+          view={activeTab}
+          session={session}
+          focused={focused}
+          width={width}
+          summaryQuotes={summaryQuotes}
+          liveStreaming={liveStreaming}
+        />
+      ) : (
+        <ScreenerMoversBody
+          activeTab={activeTab}
+          focused={focused}
+          width={width}
+          summaryQuotes={summaryQuotes}
+          liveStreaming={liveStreaming}
+        />
+      )}
+    </Box>
+  );
+}
+
+/** Gainers, losers, most active and trending: day screeners with live quotes on the rows. */
+function ScreenerMoversBody({ activeTab, focused, width, summaryQuotes, liveStreaming }: {
+  activeTab: ScreenerTabId;
+  focused: boolean;
+  width: number;
+  summaryQuotes: MarketSummaryQuote[];
+  liveStreaming: boolean;
+}) {
+  const dataProvider = useAssetData();
+  const { pinTicker } = usePluginTickerActions();
   const [quotes, setQuotes] = useState<ScreenerQuote[]>([]);
   const [loadedTab, setLoadedTab] = useState<TabId | null>(null);
   const visibleQuotes = loadedTab === activeTab ? quotes : NO_QUOTES;
@@ -119,20 +203,8 @@ function MarketMoversPane({ focused, width, height }: PaneProps) {
     }
   }, [rows, selectedIdx, selectedSymbol]);
 
-  // The index summary is a quote board like any other, so it runs on the shared
-  // one instead of a third parallel pipeline against the same upstream.
-  const { quotes: summaryBoard } = useQuoteBoard(summarySymbols, { liveStreaming });
-  const summaryQuotes = useMemo<MarketSummaryQuote[]>(() => (
-    summarySymbols
-      .map((symbol) => {
-        const quote = summaryBoard.get(symbol)?.quote;
-        return quote ? summaryQuoteFromQuote(symbol, quote) : null;
-      })
-      .filter((quote): quote is MarketSummaryQuote => !!quote)
-  ), [summaryBoard, summarySymbols]);
-
   const loadTab = useCallback(async (
-    tab: TabId,
+    tab: ScreenerTabId,
     options?: { forceRefresh?: boolean; background?: boolean },
   ) => {
     fetchGenRef.current += 1;
@@ -165,11 +237,7 @@ function MarketMoversPane({ focused, width, height }: PaneProps) {
   }, [dataProvider]);
 
   useEffect(() => {
-    if (tabs.some((tab) => tab.id === activeTab)) return;
-    setActiveTab(tabs[0]!.id);
-  }, [activeTab, tabs]);
-
-  useEffect(() => {
+    setSelectedSymbol(null);
     void loadTab(activeTab);
   }, [activeTab, loadTab]);
 
@@ -183,32 +251,19 @@ function MarketMoversPane({ focused, width, height }: PaneProps) {
   }, [pinTicker]);
 
   const handleHeaderClick = useCallback((columnId: string) => {
-    setSortPreference((current) => nextSortPreference(current, columnId));
+    setSortPreference((current) => nextHeaderSort(current, columnId as MarketMoverColumn["id"], {
+      resetTo: DEFAULT_SORT_PREFERENCE,
+    }));
   }, []);
 
-  const handleTableKeyDown = useCallback((event: DataTableKeyEvent) => {
-    if (isPlainKey(event, "r")) {
-      event.preventDefault?.();
-      event.stopPropagation?.();
-      loadTab(activeTab, { forceRefresh: true });
-      return true;
-    }
-    return false;
-  }, [activeTab, loadTab]);
+  const handleTableKeyDown = useCallback((event: DataTableKeyEvent) => (
+    handleRefreshKey(event, () => loadTab(activeTab, { forceRefresh: true }), { stopPropagation: true })
+  ), [activeTab, loadTab]);
 
   usePaneFooter("market-movers", () => ({
     info: [
       ...(loadError ? [{ id: "load-error", parts: [{ text: loadError, tone: "warning" as const }] }] : []),
-      ...summaryQuotes.map((idx) => {
-        const short = INDEX_SHORT[idx.symbol] ?? idx.symbol;
-        return {
-          id: `summary:${idx.symbol}`,
-          parts: [
-            { text: short, tone: "label" as const },
-            { text: formatPercentRaw(idx.changePercent), tone: "value" as const, color: priceColor(idx.changePercent), bold: true },
-          ],
-        };
-      }),
+      ...summaryFooterSegments(summaryQuotes),
       ...(loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
       ...(feedStatus ? [{
         id: "feed",
@@ -221,55 +276,34 @@ function MarketMoversPane({ focused, width, height }: PaneProps) {
     ],
   }), [activeTab, feedStatus, loadedTab, loadError, loading, moversStale, summaryQuotes]);
 
-  const tabItems = tabs.map((tab) => ({ label: tab.label, value: tab.id }));
-  const selectTab = (value: string) => {
-    setActiveTab(value as TabId);
-    setSelectedSymbol(null);
-  };
-  const tabsInHeader = usePaneHeaderTabs({ tabs: tabItems, activeValue: activeTab, onSelect: selectTab, focused });
-
   return (
-    <Box flexDirection="column" width={width} height={height}>
-      {!tabsInHeader && (
-        <Box height={1} paddingX={1}>
-          <Tabs
-            tabs={tabItems}
-            activeValue={activeTab}
-            onSelect={selectTab}
-            compact
-            variant="bare"
-            focused={focused}
-          />
+    <DataTableView<MarketMoverRow, MarketMoverColumn>
+      focused={focused}
+      selection={{
+        kind: "id",
+        selectedId: selectedSymbol,
+        getId: moverKey,
+        onChange: (symbol) => setSelectedSymbol(symbol),
+      }}
+      onRootKeyDown={handleTableKeyDown}
+      resetScrollKey={activeTab}
+      sortable
+      columns={columns}
+      items={rows}
+      sortColumnId={sortPreference.columnId}
+      sortDirection={sortPreference.direction}
+      onHeaderClick={handleHeaderClick}
+      getItemKey={moverKey}
+      onActivate={openSymbol}
+      renderCell={renderMarketMoverCell}
+      selectedTextOverridesCellColor
+      emptyStateTitle={loading ? "Loading movers..." : loadError ?? "No movers returned."}
+      emptyContent={loadError ? (
+        <Box paddingX={1} paddingY={1}>
+          <EmptyState title={loadError} message="Try again in a moment." />
         </Box>
-      )}
-
-      <DataTableView<MarketMoverRow, MarketMoverColumn>
-        focused={focused}
-        selection={{
-          kind: "id",
-          selectedId: selectedSymbol,
-          getId: moverKey,
-          onChange: (symbol) => setSelectedSymbol(symbol),
-        }}
-        onRootKeyDown={handleTableKeyDown}
-        resetScrollKey={activeTab}
-        sortable
-        columns={columns}
-        items={rows}
-        sortColumnId={sortPreference.columnId}
-        sortDirection={sortPreference.direction}
-        onHeaderClick={handleHeaderClick}
-        getItemKey={moverKey}
-        onActivate={openSymbol}
-        renderCell={renderMarketMoverCell}
-        emptyStateTitle={loading ? "Loading movers..." : loadError ?? "No movers returned."}
-        emptyContent={loadError ? (
-          <Box paddingX={1} paddingY={1}>
-            <EmptyState title={loadError} message="Try again in a moment." />
-          </Box>
-        ) : undefined}
-      />
-    </Box>
+      ) : undefined}
+    />
   );
 }
 
@@ -325,8 +359,8 @@ export const marketMoversModule: PluginModule = {
       id: "market-movers-pane",
       paneId: "market-movers",
       label: "Market Movers",
-      description: "Top gainers, losers, most active, and trending tickers.",
-      keywords: ["movers", "gainers", "losers", "active", "trending", "screener", "top"],
+      description: "Top gainers, losers, most active, and trending tickers, pre-market and after-hours movers, and gaps.",
+      keywords: ["movers", "gainers", "losers", "active", "trending", "screener", "top", "premarket", "pre-market", "after-hours", "gaps", "gap"],
       shortcut: { prefix: "MOST" },
       headless: marketMoversHeadless,
     },

package/src/plugins/builtin/market-movers/model.ts

@@ -1,6 +1,7 @@
 import { resolveCurrencyUnit } from "../../../utils/currency-units";
-import { overlayScreenerQuoteEntries } from "../shared/screener-live-quotes";
+import { overlayScreenerQuoteEntries } from "../../../market-data/quotes/screener-live-quotes";
 import type { Quote } from "../../../types/financials";
+import type { CloudSessionMoversCategory } from "../../../api-client/market-movers";
 import type { QueryEntry } from "../../../market-data/result-types";
 import { formatNumber } from "../../../utils/format";
 import { formatMarketPriceWithCurrency, stablePriceFractionDigits } from "../../../market-data/market/format";
@@ -8,16 +9,23 @@ import type { DataTableColumn } from "../../../components";
 import { compareSortValues, type SortDirection } from "../../../utils/sort-values";
 import { MARKET_SUMMARY_SYMBOLS, convertScreenerPriceUnit, screenerNumber, screenerVolume, screenerVolumeRatio, type MarketSummaryQuote, type ScreenerCategory, type ScreenerQuote } from "./screener";
 
-export type TabId = "gainers" | "losers" | "actives" | "trending";
+/** Lists ranked from day screeners and trending symbols. */
+export type ScreenerTabId = "gainers" | "losers" | "actives" | "trending";
+/** Pre-market, after-hours and gap lists from the whole listed market. */
+export type SessionTabId = CloudSessionMoversCategory;
+export type TabId = ScreenerTabId | SessionTabId;
 
 export const TABS: Array<{ id: TabId; label: string }> = [
   { id: "gainers", label: "Gainers" },
   { id: "losers", label: "Losers" },
   { id: "actives", label: "Most Active" },
   { id: "trending", label: "Trending" },
+  { id: "premarket", label: "Pre-market" },
+  { id: "afterhours", label: "After hours" },
+  { id: "gaps", label: "Gaps" },
 ];
 
-export const CATEGORY_MAP: Record<Exclude<TabId, "trending">, ScreenerCategory> = {
+export const CATEGORY_MAP: Record<Exclude<ScreenerTabId, "trending">, ScreenerCategory> = {
   gainers: "day_gainers",
   losers: "day_losers",
   actives: "most_actives",
@@ -112,20 +120,6 @@ export function sortRows(
   ));
 }
 
-export function nextSortPreference(
-  current: MarketMoverSortPreference,
-  columnId: string,
-): MarketMoverSortPreference {
-  const typedColumnId = columnId as MarketMoverColumnId;
-  if (current.columnId !== typedColumnId) {
-    return { columnId: typedColumnId, direction: "asc" };
-  }
-  if (current.direction === "asc") {
-    return { columnId: typedColumnId, direction: "desc" };
-  }
-  return DEFAULT_SORT_PREFERENCE;
-}
-
 /** A row is rebuilt only when its quote or rank moved, so unchanged rows skip the render. */
 const moverRows = new WeakMap<ScreenerQuote, MarketMoverRow>();
 

package/src/plugins/builtin/market-movers/screener.ts

@@ -1,3 +1,4 @@
+import { YAHOO_FINANCE_HEADERS } from "../../../sources/yahoo-finance/http";
 import { yahooSecurityName } from "../../../sources/yahoo-finance/names";
 import { resolveCurrencyUnit } from "../../../utils/currency-units";
 import { createThrottledFetch, type ThrottledFetchTransport } from "../../../utils/throttled-fetch";
@@ -9,7 +10,7 @@ import type {
   CloudMarketScreenerItem,
   CloudMarketScreenerPayload,
 } from "../../../api-client/types";
-import { hasProAccess } from "../shared/plan-access";
+import { hasProAccess } from "../../../api-client/plan-access";
 
 const YAHOO_FINANCE_HOSTS = [
   "query2.finance.yahoo.com",
@@ -24,13 +25,6 @@ const CACHE_POLICY = {
 } as const;
 const YAHOO_METADATA_WAIT_MS = 1_500;
 
-const YAHOO_FINANCE_HEADERS = {
-  "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36",
-  Accept: "application/json,text/plain,*/*",
-  "Accept-Language": "en-US,en;q=0.9",
-  Referer: "https://finance.yahoo.com/",
-};
-
 export interface YahooScreenerApi {
   fetchJson<T = unknown>(path: string, params: Record<string, string | number>): Promise<T>;
 }

package/src/plugins/builtin/market-movers/session-body.tsx

@@ -0,0 +1,237 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type {
+  CloudSessionMoversCategory,
+  CloudSessionMoversPayload,
+  CloudSessionMoversSide,
+} from "../../../api-client/market-movers";
+import { usePlanAccess } from "../../../api-client/plan-access";
+import { DataTableView, EmptyState, QueryBar, usePaneFooter, type DataTableKeyEvent } from "../../../components";
+import { handleRefreshKey } from "../../../components/data-table/table-pane";
+import {
+  buildScreenerQuoteTargets,
+  resolveScreenerQuoteFeedStatus,
+} from "../../../market-data/quotes/screener-live-quotes";
+import { useAutoRefresh } from "../../../react/auto-refresh";
+import { useLiveQuoteEntries } from "../../../state/hooks/quote-streaming";
+import { TICKER_RESEARCH_PANE_ID } from "../../../types/config";
+import { Box } from "../../../ui";
+import { publicTickerKey } from "../../../utils/exchanges";
+import { nextHeaderSort } from "../../../utils/sort-values";
+import { usePluginPaneState, usePluginTickerActions } from "../../runtime";
+import { ProWall, SignInWall } from "../cloud/auth-actions";
+import { loadSessionMovers, SessionMoversAccessError } from "./client";
+import { summaryFooterSegments } from "./footer";
+import type { MarketSummaryQuote } from "./screener";
+import {
+  earlierSessionLabel,
+  overlaySessionMovers,
+  resolveSide,
+  sessionListIsLive,
+  sessionSides,
+  sortSessionRows,
+  type SessionMoverRow,
+  type SessionMoverSortPreference,
+  type UsSession,
+} from "./session";
+import { buildSessionMoverColumns, renderSessionMoverCell, type SessionMoverColumn } from "./session-table";
+
+const DEFAULT_SORT: SessionMoverSortPreference = { columnId: null, direction: "asc" };
+/** The lists are rebuilt once a minute; live quotes move the rows in between. */
+const LIST_REFRESH_MS = 60_000;
+const NO_ROWS: SessionMoverRow[] = [];
+const rowKey = (row: Pick<SessionMoverRow, "symbol" | "exchange">) => publicTickerKey(row.symbol, row.exchange);
+
+interface LoadedList {
+  key: string;
+  payload: CloudSessionMoversPayload;
+}
+
+/** Pre-market, after-hours and gap lists: Pro only, like the ranked lists they sit beside. */
+export function SessionMoversBody(props: {
+  view: CloudSessionMoversCategory;
+  session: UsSession;
+  focused: boolean;
+  width: number;
+  summaryQuotes: MarketSummaryQuote[];
+  liveStreaming: boolean;
+}) {
+  const access = usePlanAccess();
+  const [denied, setDenied] = useState(false);
+  const deny = useCallback(() => setDenied(true), []);
+  // A refusal is about the plan the account had then; a new plan asks again.
+  useEffect(() => setDenied(false), [access.signedIn, access.emailVerified, access.hasProAccess]);
+  const entitled = access.emailVerified && access.hasProAccess && !denied;
+  // Behind a wall the footer still carries the index summary; the list registers its own.
+  usePaneFooter("market-movers-wall", () => (
+    entitled ? null : { info: summaryFooterSegments(props.summaryQuotes) }
+  ), [entitled, props.summaryQuotes]);
+
+  if (!access.signedIn) return <SignInWall action="see pre-market, after-hours and gap movers" />;
+  if (!access.emailVerified) return <SignInWall action="see pre-market, after-hours and gap movers" needsVerification />;
+  if (!entitled) {
+    return (
+      <ProWall
+        title="Pre-market, after-hours and gap movers are part of Gloom Cloud Pro."
+        message="The whole listed US market from 04:00 to 20:00, with relative volume, VWAP, float and catalysts."
+      />
+    );
+  }
+  return <SessionMoversTable {...props} onDenied={deny} />;
+}
+
+function SessionMoversTable({ view, session, focused, width, summaryQuotes, liveStreaming, onDenied }: {
+  view: CloudSessionMoversCategory;
+  session: UsSession;
+  focused: boolean;
+  width: number;
+  summaryQuotes: MarketSummaryQuote[];
+  liveStreaming: boolean;
+  onDenied: () => void;
+}) {
+  const { pinTicker } = usePluginTickerActions();
+  const [savedSide, setSavedSide] = usePluginPaneState<CloudSessionMoversSide>("sessionSide", "up");
+  const side = resolveSide(view, savedSide);
+  const listKey = `${view}:${side}`;
+  const [loaded, setLoaded] = useState<LoadedList | null>(null);
+  // The first frame would otherwise claim an empty list.
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [lastLoadedAt, setLastLoadedAt] = useState<number | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [sortPreference, setSortPreference] = useState<SessionMoverSortPreference>(DEFAULT_SORT);
+  const fetchGenRef = useRef(0);
+
+  const payload = loaded?.key === listKey ? loaded.payload : null;
+  const listRows = payload?.items ?? NO_ROWS;
+  const live = !!payload && sessionListIsLive(view, payload.session, session);
+  // While the list's session trades it is rebuilt every minute, and a failed or
+  // stale answer is asked for again as often; a finished list does not change,
+  // so it follows the refresh interval the user set.
+  const refreshEachMinute = sessionListIsLive(view, session.date, session) || !payload || payload.stale === true;
+
+  const load = useCallback(async (options?: { forceRefresh?: boolean; background?: boolean }) => {
+    const gen = ++fetchGenRef.current;
+    if (!options?.background) {
+      setLoading(true);
+      setLoadError(null);
+    }
+    try {
+      const next = await loadSessionMovers(view, side, options);
+      if (fetchGenRef.current !== gen) return;
+      setLoaded({ key: `${view}:${side}`, payload: next });
+      setLoadError(null);
+      setLastLoadedAt(Date.now());
+    } catch (error) {
+      if (fetchGenRef.current !== gen) return;
+      if (error instanceof SessionMoversAccessError) {
+        onDenied();
+        return;
+      }
+      setLoadError("Session movers temporarily unavailable");
+    } finally {
+      if (fetchGenRef.current === gen && !options?.background) setLoading(false);
+    }
+  }, [onDenied, side, view]);
+
+  useEffect(() => {
+    setSelectedId(null);
+    void load();
+  }, [load]);
+  const backgroundRefresh = useCallback(() => {
+    void load({ background: true });
+  }, [load]);
+  useAutoRefresh(lastLoadedAt, backgroundRefresh, { intervalMs: refreshEachMinute ? LIST_REFRESH_MS : null });
+
+  // A finished list keeps the prices it closed at, so it holds no quote subscriptions.
+  const quoteTargets = useMemo(
+    () => (live ? buildScreenerQuoteTargets(listRows, selectedId) : []),
+    [listRows, live, selectedId],
+  );
+  const { entries, freshnessNow, subscriptionStartedAt } = useLiveQuoteEntries(quoteTargets, {
+    freshnessScopeKey: `market-movers:${listKey}`,
+    liveStreaming,
+  });
+  const columns = useMemo(() => buildSessionMoverColumns(view, width), [view, width]);
+  // The sort survives a change of list, but not onto a column this list or width does not show.
+  const sort = columns.some((column) => column.id === sortPreference.columnId) ? sortPreference : DEFAULT_SORT;
+  const rows = useMemo(
+    () => sortSessionRows(live ? overlaySessionMovers(listRows, entries) : listRows, sort),
+    [entries, listRows, live, sort],
+  );
+  const feedStatus = useMemo(
+    () => resolveScreenerQuoteFeedStatus(quoteTargets, entries, { now: freshnessNow, subscriptionStartedAt }),
+    [entries, freshnessNow, quoteTargets, subscriptionStartedAt],
+  );
+
+  useEffect(() => {
+    if (selectedId && rows.some((row) => rowKey(row) === selectedId)) return;
+    setSelectedId(rows[0] ? rowKey(rows[0]) : null);
+  }, [rows, selectedId]);
+
+  const sessionLabel = payload ? earlierSessionLabel(payload.session, session) : null;
+  usePaneFooter("market-movers", () => ({
+    info: [
+      ...(loadError ? [{ id: "load-error", parts: [{ text: loadError, tone: "warning" as const }] }] : []),
+      ...summaryFooterSegments(summaryQuotes),
+      ...(sessionLabel ? [{ id: "session", parts: [{ text: sessionLabel, tone: "muted" as const }] }] : []),
+      ...(loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
+      ...(feedStatus ? [{
+        id: "feed",
+        parts: [{ text: feedStatus, tone: feedStatus === "live" ? "value" as const : "muted" as const }],
+      }] : []),
+      ...(payload?.stale ? [{ id: "stale", parts: [{ text: "stale", tone: "muted" as const }] }] : []),
+    ],
+  }), [feedStatus, loadError, loading, payload?.stale, sessionLabel, summaryQuotes]);
+
+  const openRow = useCallback((row: SessionMoverRow) => {
+    pinTicker(rowKey(row), { floating: true, paneType: TICKER_RESEARCH_PANE_ID, instrument: null });
+  }, [pinTicker]);
+  const handleHeaderClick = useCallback((columnId: string) => {
+    setSortPreference(nextHeaderSort(sort, columnId as SessionMoverColumn["id"], { resetTo: DEFAULT_SORT }));
+  }, [sort]);
+  const handleKeyDown = useCallback((event: DataTableKeyEvent) => (
+    handleRefreshKey(event, () => load({ forceRefresh: true }), { stopPropagation: true })
+  ), [load]);
+
+  const sides = sessionSides(view);
+  // Until this list's first answer the table is loading, including the frame
+  // between a change of list and its request going out.
+  const emptyTitle = payload ? "No movers yet." : loadError ?? "Loading movers...";
+  return (
+    <DataTableView<SessionMoverRow, SessionMoverColumn>
+      focused={focused}
+      rootBefore={(
+        <QueryBar
+          width={Math.max(1, width - 2)}
+          filters={[{
+            id: "side",
+            label: view === "gaps" ? "Gap" : "List",
+            inline: true,
+            value: side,
+            options: sides,
+            onChange: (value: CloudSessionMoversSide) => setSavedSide(value),
+          }]}
+        />
+      )}
+      selection={{ kind: "id", selectedId, getId: rowKey, onChange: setSelectedId }}
+      onRootKeyDown={handleKeyDown}
+      resetScrollKey={listKey}
+      sortable
+      columns={columns}
+      items={rows}
+      sortColumnId={sort.columnId}
+      sortDirection={sort.direction}
+      onHeaderClick={handleHeaderClick}
+      getItemKey={rowKey}
+      onActivate={openRow}
+      renderCell={renderSessionMoverCell}
+      selectedTextOverridesCellColor
+      emptyStateTitle={emptyTitle}
+      emptyContent={loadError && !payload ? (
+        <Box paddingX={1} paddingY={1}>
+          <EmptyState title={loadError} message="Try again in a moment." />
+        </Box>
+      ) : undefined}
+    />
+  );
+}