gloomberb 0.13.3 → 0.14.1

package/src/plugins/builtin/jobs/model.test.ts

@@ -0,0 +1,119 @@
+import { describe, expect, test } from "bun:test";
+import type { CloudJobsSummaryPayload } from "../../../api-client/types";
+import {
+  buildAgeBars,
+  buildPostingColumns,
+  buildShareBars,
+  formatAge,
+  formatSalaryRange,
+  historyChartPoints,
+  moversHaveWeekHistory,
+} from "./model";
+
+function summary(overrides: Partial<CloudJobsSummaryPayload> = {}): CloudJobsSummaryPayload {
+  return {
+    status: "ok",
+    ticker: "NVDA",
+    companyName: "NVIDIA",
+    coverage: { status: "active", vendor: "workday", careersUrl: null, lastCollectedAt: null, firstObservedAt: null, daysObserved: 1, employeeCount: null },
+    openCount: 10,
+    openPerThousandEmployees: null,
+    new7d: 10,
+    new30d: 10,
+    closed30d: 0,
+    change30d: null,
+    change90d: null,
+    remoteShare: null,
+    medianAgeDays: null,
+    series: [{ day: "2026-09-17", open: 10, new: 10, closed: 0 }],
+    ageBuckets: [],
+    functions: [],
+    countries: [],
+    seniority: [],
+    tags: [],
+    salary: null,
+    recent: [],
+    ...overrides,
+  };
+}
+
+describe("age bars", () => {
+  test("keep the payload order and size bars against the largest bucket", () => {
+    const rows = buildAgeBars({
+      openCount: 10,
+      ageBuckets: [
+        { id: "week", label: "Last 7 days", count: 2 },
+        { id: "month", label: "8 to 30 days", count: 8 },
+      ],
+    });
+    expect(rows.map((row) => [row.label, row.count, row.ratio, row.share])).toEqual([
+      ["Last 7 days", 2, 0.25, 0.2],
+      ["8 to 30 days", 8, 1, 0.8],
+    ]);
+    expect(buildAgeBars({ openCount: 3, ageBuckets: undefined })).toEqual([]);
+  });
+});
+
+describe("historyChartPoints", () => {
+  test("waits for a week of daily points before drawing the history", () => {
+    expect(historyChartPoints(summary())).toBeNull();
+    const series = Array.from({ length: 7 }, (_, index) => ({ day: `2026-09-1${index}`, open: 10 + index, new: 1, closed: 0 }));
+    expect(historyChartPoints(summary({ series }))?.length).toBe(7);
+  });
+});
+
+describe("buildShareBars", () => {
+  test("keeps the top rows, folds the rest, and sizes bars against the largest", () => {
+    const rows = buildShareBars(
+      [
+        { id: "a", label: "A", count: 50, share: 0.5, previous: 40 },
+        { id: "b", label: "B", count: 30, share: 0.3, previous: null },
+        { id: "c", label: "C", count: 15, share: 0.15, previous: 15 },
+        { id: "d", label: "D", count: 5, share: 0.05, previous: 9 },
+      ],
+      2,
+    );
+    expect(rows.map((row) => [row.key, row.count, row.ratio, row.delta])).toEqual([
+      ["a", 50, 1, 10],
+      ["b", 30, 0.6, null],
+      ["rest", 20, 0.4, null],
+    ]);
+    expect(rows[2]!.label).toBe("2 more");
+  });
+});
+
+describe("formatting", () => {
+  test("pay ranges read like the postings write them", () => {
+    expect(formatSalaryRange(120000, 150000, "USD", "year")).toBe("$120k–150k");
+    expect(formatSalaryRange(45, 52, "USD", "hour")).toBe("$45–52/h");
+    expect(formatSalaryRange(60000, 60000, "GBP", "year")).toBe("£60k");
+    expect(formatSalaryRange(null, null, null, null)).toBe("");
+  });
+
+  test("ages carry a plus when the source only gave a floor", () => {
+    const now = new Date("2026-09-17T00:00:00Z");
+    expect(formatAge("2026-09-14", "exact", now)).toBe("3d");
+    expect(formatAge("2026-08-18", "floor", now)).toBe("4w+");
+    expect(formatAge("2026-05-01", "exact", now)).toBe("5mo");
+  });
+});
+
+describe("table layout", () => {
+  test("the role column takes what the fixed columns leave", () => {
+    const wide = buildPostingColumns(120, true);
+    expect(wide.map((column) => column.id)).toEqual(["title", "function", "location", "posted", "salary"]);
+    expect(wide[0]!.width).toBe(120 - (24 + 24 + 8 + 14) - 6);
+    const narrow = buildPostingColumns(80, true);
+    expect(narrow.map((column) => column.id)).toEqual(["title", "function", "location", "posted"]);
+  });
+
+  test("the new-this-week column only appears after the first read", () => {
+    const mover = (openCount: number, new7d: number) => ({
+      key: "x",
+      mover: { ticker: "X", companyName: null, openCount, employeeCount: null, change30d: null, posted30d: null, new7d, topFunction: null, topCountry: null },
+      ticker: "X", company: "", open: "", change: "", changeValue: null, posted30d: "", posted30dValue: null, new7d: "", function: "", country: "", countryShare: null,
+    });
+    expect(moversHaveWeekHistory([mover(100, 100), mover(50, 50)])).toBe(false);
+    expect(moversHaveWeekHistory([mover(100, 100), mover(50, 3)])).toBe(true);
+  });
+});

package/src/plugins/builtin/jobs/model.ts

@@ -0,0 +1,350 @@
+import type { DataTableColumn } from "../../../components";
+import type { ProjectedChartPoint } from "../../../components/chart/core/data";
+import type {
+  CloudJobsBucket,
+  CloudJobsChange,
+  CloudJobsMoverPayload,
+  CloudJobsPosting,
+  CloudJobsSummaryPayload,
+} from "../../../api-client/types";
+import { formatCompact, formatNumber } from "../../../utils/format";
+import { compareSortValues } from "../../../utils/sort-values";
+
+/**
+ * Pure projections from the cloud payload to what the pane, the research tab
+ * and the `fn` report draw. No React, no fetching.
+ */
+
+export const FUNCTION_LABELS: Record<string, string> = {
+  engineering: "Engineering",
+  data_ai: "Data & AI",
+  product: "Product",
+  design: "Design",
+  sales: "Sales",
+  marketing: "Marketing",
+  customer: "Customer",
+  operations: "Operations",
+  supply_chain: "Supply chain",
+  manufacturing: "Manufacturing",
+  finance: "Finance",
+  legal_compliance: "Legal & compliance",
+  people: "People",
+  research: "Research",
+  clinical: "Clinical",
+  retail: "Retail & hospitality",
+  corporate: "Corporate",
+  other: "Other",
+  unclassified: "Unclassified",
+};
+
+const SENIORITY_SHORT: Record<string, string> = {
+  intern: "Intern",
+  entry: "Entry",
+  mid: "Mid",
+  senior: "Senior",
+  lead: "Lead",
+  manager: "Manager",
+  director: "Director",
+  executive: "Exec",
+};
+
+export function functionLabel(id: string | null | undefined): string {
+  if (!id) return "Unclassified";
+  return FUNCTION_LABELS[id] ?? id;
+}
+
+export function seniorityLabel(id: string | null | undefined): string {
+  if (!id) return "";
+  return SENIORITY_SHORT[id] ?? id;
+}
+
+function utcDate(iso: string): Date {
+  return new Date(`${iso}T00:00:00.000Z`);
+}
+
+export function seriesToChartPoints(summary: Pick<CloudJobsSummaryPayload, "series">): ProjectedChartPoint[] {
+  return summary.series.map((point) => ({
+    date: utcDate(point.day),
+    open: point.open,
+    high: point.open,
+    low: point.open,
+    close: point.open,
+    volume: point.new,
+  }));
+}
+
+/** The open-roles history, drawn once there is a week of daily points. */
+export function historyChartPoints(summary: CloudJobsSummaryPayload): ProjectedChartPoint[] | null {
+  return summary.series.length >= 7 ? seriesToChartPoints(summary) : null;
+}
+
+/** Open roles by posting age as share bars, oldest last. */
+export function buildAgeBars(summary: Pick<CloudJobsSummaryPayload, "ageBuckets" | "openCount">): ShareBarRow[] {
+  const buckets = summary.ageBuckets ?? [];
+  const max = Math.max(1, ...buckets.map((bucket) => bucket.count));
+  return buckets.map((bucket) => ({
+    key: bucket.id,
+    label: bucket.label,
+    count: bucket.count,
+    share: summary.openCount > 0 ? bucket.count / summary.openCount : 0,
+    ratio: bucket.count / max,
+    delta: null,
+  }));
+}
+
+export function formatChange(change: CloudJobsChange | null | undefined): string {
+  if (!change) return "-";
+  const sign = change.count > 0 ? "+" : "";
+  const percent = change.percent != null ? ` (${sign}${formatNumber(change.percent, 1)}%)` : "";
+  return `${sign}${change.count}${percent}`;
+}
+
+export function changeTone(value: number | null | undefined): "positive" | "negative" | "neutral" {
+  if (value == null || value === 0) return "neutral";
+  return value > 0 ? "positive" : "negative";
+}
+
+export function formatShare(share: number): string {
+  return `${formatNumber(share * 100, share >= 0.1 ? 0 : 1)}%`;
+}
+
+export function formatSalaryRange(
+  min: number | null,
+  max: number | null,
+  currency: string | null,
+  period: string | null,
+): string {
+  if (min == null && max == null) return "";
+  const symbol = currency === "USD" ? "$" : currency === "EUR" ? "€" : currency === "GBP" ? "£" : currency ? `${currency} ` : "";
+  const fmt = (value: number) => (period === "hour" ? formatNumber(value, 0) : formatCompact(value));
+  const range = min != null && max != null && min !== max
+    ? `${symbol}${fmt(min)}–${fmt(max)}`
+    : `${symbol}${fmt((min ?? max)!)}`;
+  return period === "hour" ? `${range}/h` : period === "month" ? `${range}/mo` : range;
+}
+
+/** "3d", "6w", "4mo" from an ISO date, with a `+` when the date is a floor. */
+export function formatAge(posted: string | null, precision: string | null, now = new Date()): string {
+  if (!posted) return "";
+  const days = Math.max(0, Math.round((now.getTime() - utcDate(posted).getTime()) / 86_400_000));
+  const text = days < 1 ? "today" : days < 14 ? `${days}d` : days < 60 ? `${Math.round(days / 7)}w` : `${Math.round(days / 30)}mo`;
+  return precision === "floor" ? `${text}+` : text;
+}
+
+export function formatCollectedAgo(iso: string | null, now = new Date()): string {
+  if (!iso) return "";
+  const minutes = Math.max(0, Math.round((now.getTime() - new Date(iso).getTime()) / 60_000));
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 48) return `${hours}h ago`;
+  return `${Math.round(hours / 24)}d ago`;
+}
+
+// Postings table ------------------------------------------------------------
+
+export type PostingColumnId = "title" | "function" | "location" | "posted" | "salary";
+export type PostingColumn = DataTableColumn & { id: PostingColumnId };
+
+export interface PostingRow {
+  key: string;
+  posting: CloudJobsPosting;
+  title: string;
+  function: string;
+  seniority: string;
+  location: string;
+  posted: string;
+  salary: string;
+}
+
+export function buildPostingRows(postings: readonly CloudJobsPosting[], now = new Date()): PostingRow[] {
+  return postings.map((posting) => ({
+    key: String(posting.id),
+    posting,
+    title: posting.title,
+    function: functionLabel(posting.function),
+    seniority: seniorityLabel(posting.seniority),
+    location: posting.remote && !/remote/i.test(posting.location ?? "")
+      ? `${posting.location ?? ""}${posting.location ? " · " : ""}Remote`
+      : (posting.location ?? ""),
+    posted: formatAge(posting.postedAt, posting.postedPrecision, now),
+    salary: formatSalaryRange(posting.salaryMin, posting.salaryMax, posting.salaryCurrency, posting.salaryPeriod),
+  }));
+}
+
+export function buildPostingColumns(width: number, hasSalary: boolean): PostingColumn[] {
+  const narrow = width < 96;
+  const fixed = narrow ? 14 + 18 + 7 : 24 + 24 + 8 + (hasSalary ? 14 : 0);
+  const columns: PostingColumn[] = [
+    { id: "title", label: "ROLE", width: Math.max(18, width - fixed - 6), align: "left", flexGrow: 1 },
+    { id: "function", label: "FUNCTION", width: narrow ? 14 : 24, align: "left" },
+    { id: "location", label: "LOCATION", width: narrow ? 18 : 24, align: "left" },
+    { id: "posted", label: "POSTED", width: narrow ? 7 : 8, align: "right" },
+  ];
+  if (hasSalary && !narrow) columns.push({ id: "salary", label: "PAY", width: 14, align: "right" });
+  return columns;
+}
+
+export interface PostingSort {
+  columnId: PostingColumnId;
+  direction: "asc" | "desc";
+}
+
+export const DEFAULT_POSTING_SORT: PostingSort = { columnId: "posted", direction: "desc" };
+
+function postingSortValue(row: PostingRow, columnId: PostingColumnId): string | number | null {
+  switch (columnId) {
+    case "title":
+      return row.title.toLowerCase();
+    case "function":
+      return row.function;
+    case "location":
+      return row.location;
+    case "posted":
+      return row.posting.postedAt ? utcDate(row.posting.postedAt).getTime() : new Date(row.posting.firstSeenAt).getTime();
+    case "salary":
+      return row.posting.salaryMax ?? row.posting.salaryMin;
+  }
+}
+
+export function sortPostingRows(rows: PostingRow[], sort: PostingSort): PostingRow[] {
+  return [...rows].sort((a, b) =>
+    compareSortValues(postingSortValue(a, sort.columnId), postingSortValue(b, sort.columnId), sort.direction),
+  );
+}
+
+export function nextPostingSort(current: PostingSort, columnId: string): PostingSort {
+  const id = columnId as PostingColumnId;
+  if (current.columnId === id) return { columnId: id, direction: current.direction === "asc" ? "desc" : "asc" };
+  return { columnId: id, direction: id === "title" || id === "location" || id === "function" ? "asc" : "desc" };
+}
+
+// Share bars ----------------------------------------------------------------
+
+export interface ShareBarRow {
+  key: string;
+  label: string;
+  count: number;
+  share: number;
+  /** Fraction of the largest row, which is what the bar draws. */
+  ratio: number;
+  delta: number | null;
+}
+
+export function buildShareBars(buckets: readonly CloudJobsBucket[], limit: number, labelFor?: (id: string) => string): ShareBarRow[] {
+  const sorted = [...buckets].sort((a, b) => b.count - a.count);
+  const top = sorted.slice(0, limit);
+  const rest = sorted.slice(limit);
+  const rows = top.map((bucket) => ({
+    key: bucket.id,
+    label: labelFor ? labelFor(bucket.id) : bucket.label,
+    count: bucket.count,
+    share: bucket.share,
+    ratio: 0,
+    delta: bucket.previous != null ? bucket.count - bucket.previous : null,
+  }));
+  if (rest.length > 0) {
+    const count = rest.reduce((sum, bucket) => sum + bucket.count, 0);
+    const share = rest.reduce((sum, bucket) => sum + bucket.share, 0);
+    rows.push({ key: "rest", label: `${rest.length} more`, count, share, ratio: 0, delta: null });
+  }
+  const max = Math.max(1, ...rows.map((row) => row.count));
+  return rows.map((row) => ({ ...row, ratio: row.count / max }));
+}
+
+// Movers table --------------------------------------------------------------
+
+export type MoverColumnId = "ticker" | "company" | "open" | "change" | "posted30d" | "new7d" | "function" | "country";
+export type MoverColumn = DataTableColumn & { id: MoverColumnId };
+
+export interface MoverRow {
+  key: string;
+  mover: CloudJobsMoverPayload;
+  ticker: string;
+  company: string;
+  open: string;
+  change: string;
+  changeValue: number | null;
+  posted30d: string;
+  posted30dValue: number | null;
+  new7d: string;
+  function: string;
+  country: string;
+  countryShare: number | null;
+}
+
+export function buildMoverRows(movers: readonly CloudJobsMoverPayload[]): MoverRow[] {
+  return movers.map((mover) => ({
+    key: mover.ticker,
+    mover,
+    ticker: mover.ticker,
+    company: mover.companyName ?? "",
+    open: formatCompact(mover.openCount),
+    change: mover.change30d ? formatChange(mover.change30d) : "",
+    changeValue: mover.change30d?.percent ?? mover.change30d?.count ?? null,
+    posted30d: mover.posted30d != null ? formatCompact(mover.posted30d) : "",
+    posted30dValue: mover.posted30d ?? null,
+    new7d: mover.new7d > 0 ? String(mover.new7d) : "",
+    function: functionLabel(mover.topFunction),
+    country: mover.topCountry ? `${mover.topCountry.code} ${formatShare(mover.topCountry.share)}` : "",
+    countryShare: mover.topCountry?.share ?? null,
+  }));
+}
+
+export function buildMoverColumns(width: number, hasHistory: boolean, hasWeek = true): MoverColumn[] {
+  const narrow = width < 90;
+  return [
+    { id: "ticker", label: "TICKER", width: 8, align: "left" },
+    { id: "company", label: "COMPANY", width: narrow ? 18 : 28, align: "left", flexGrow: 1 },
+    { id: "open", label: "OPEN", width: 8, align: "right" },
+    ...(hasHistory ? [{ id: "change" as const, label: "30D", width: 14, align: "right" as const }] : []),
+    { id: "posted30d", label: "POSTED 30D", width: 11, align: "right" },
+    ...(hasWeek ? [{ id: "new7d" as const, label: "NEW 7D", width: 8, align: "right" as const }] : []),
+    ...(narrow ? [] : [{ id: "function" as const, label: "TOP FUNCTION", width: 18, align: "left" as const }]),
+    ...(narrow ? [] : [{ id: "country" as const, label: "TOP COUNTRY", width: 12, align: "left" as const }]),
+  ];
+}
+
+/** On a company's first read every role is "new this week"; the column says nothing until the next pass. */
+export function moversHaveWeekHistory(rows: readonly MoverRow[]): boolean {
+  return rows.some((row) => row.mover.new7d !== row.mover.openCount);
+}
+
+export interface MoverSort {
+  columnId: MoverColumnId;
+  direction: "asc" | "desc";
+}
+
+export const DEFAULT_MOVER_SORT: MoverSort = { columnId: "open", direction: "desc" };
+
+function moverSortValue(row: MoverRow, columnId: MoverColumnId): string | number | null {
+  switch (columnId) {
+    case "ticker":
+      return row.ticker;
+    case "company":
+      return row.company.toLowerCase();
+    case "open":
+      return row.mover.openCount;
+    case "change":
+      return row.changeValue;
+    case "posted30d":
+      return row.posted30dValue;
+    case "country":
+      return row.countryShare;
+    case "new7d":
+      return row.mover.new7d;
+    case "function":
+      return row.function;
+  }
+}
+
+export function sortMoverRows(rows: MoverRow[], sort: MoverSort): MoverRow[] {
+  return [...rows].sort((a, b) =>
+    compareSortValues(moverSortValue(a, sort.columnId), moverSortValue(b, sort.columnId), sort.direction),
+  );
+}
+
+export function nextMoverSort(current: MoverSort, columnId: string): MoverSort {
+  const id = columnId as MoverColumnId;
+  if (current.columnId === id) return { columnId: id, direction: current.direction === "asc" ? "desc" : "asc" };
+  return { columnId: id, direction: id === "ticker" || id === "company" || id === "function" ? "asc" : "desc" };
+}

package/src/plugins/builtin/jobs/pages.test.tsx

@@ -0,0 +1,103 @@
+import { afterEach, expect, test } from "bun:test";
+import { act, useEffect, useRef, useSyncExternalStore } from "react";
+import { testRender } from "../../../renderers/opentui/test-utils";
+import { Text } from "../../../ui";
+import { useAppendedPages } from "./pages";
+
+let setup: Awaited<ReturnType<typeof testRender>> | null = null;
+
+afterEach(async () => {
+  if (setup) await act(async () => setup!.renderer.destroy());
+  setup = null;
+});
+
+async function frames(count = 4) {
+  for (let index = 0; index < count; index++) {
+    await act(async () => { await Bun.sleep(5); await setup!.renderOnce(); });
+  }
+}
+
+interface Scene {
+  requestKey: string;
+  firstCount: number;
+  total: number;
+  /** Each bump stands in for the reader scrolling to the end once. */
+  pulls: number;
+}
+
+/** A tiny store so a test can change the hook's inputs without a rerender API. */
+function createScene(initial: Scene) {
+  let scene = initial;
+  const listeners = new Set<() => void>();
+  return {
+    subscribe: (listener: () => void) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    get: () => scene,
+    set: (next: Partial<Scene>) => {
+      scene = { ...scene, ...next };
+      for (const listener of listeners) listener();
+    },
+  };
+}
+
+function Harness({ store, loadPage }: { store: ReturnType<typeof createScene>; loadPage: (offset: number) => Promise<string[]> }) {
+  const scene = useSyncExternalStore(store.subscribe, store.get);
+  const { items, hasMore, loadingMore, loadMore } = useAppendedPages(scene.requestKey, scene.firstCount, scene.total, loadPage);
+  const loadMoreRef = useRef(loadMore);
+  loadMoreRef.current = loadMore;
+  useEffect(() => { if (scene.pulls > 0) loadMoreRef.current(); }, [scene.pulls]);
+  return <Text>{`items=${items.length} more=${hasMore} loading=${loadingMore}`}</Text>;
+}
+
+async function mount(store: ReturnType<typeof createScene>, loadPage: (offset: number) => Promise<string[]>) {
+  await act(async () => {
+    setup = await testRender(<Harness store={store} loadPage={loadPage} />, { width: 60, height: 2 });
+  });
+  await frames();
+}
+
+async function pull(store: ReturnType<typeof createScene>) {
+  await act(async () => { store.set({ pulls: store.get().pulls + 1 }); });
+  await frames();
+}
+
+test("pages append from the first response's end and stop at the total", async () => {
+  const offsets: number[] = [];
+  const loadPage = async (offset: number) => {
+    offsets.push(offset);
+    return Array.from({ length: Math.min(2, 5 - offset) }, (_, index) => `row-${offset + index}`);
+  };
+  const store = createScene({ requestKey: "a", firstCount: 3, total: 5, pulls: 0 });
+  await mount(store, loadPage);
+  expect(setup!.captureCharFrame()).toContain("items=0 more=true");
+
+  await pull(store);
+  expect(offsets).toEqual([3]);
+  expect(setup!.captureCharFrame()).toContain("items=2 more=false");
+
+  // Nothing left to ask for, so another pull is a no-op.
+  await pull(store);
+  expect(offsets).toEqual([3]);
+});
+
+test("a new first response drops the pages appended to the old one", async () => {
+  const loadPage = async (offset: number) => [`row-${offset}`];
+  const store = createScene({ requestKey: "a", firstCount: 1, total: 10, pulls: 0 });
+  await mount(store, loadPage);
+  await pull(store);
+  expect(setup!.captureCharFrame()).toContain("items=1 more=true");
+
+  await act(async () => { store.set({ requestKey: "b" }); });
+  await frames();
+  expect(setup!.captureCharFrame()).toContain("items=0 more=true");
+});
+
+test("an empty page ends the list even when the total says otherwise", async () => {
+  const loadPage = async () => [];
+  const store = createScene({ requestKey: "a", firstCount: 1, total: 10, pulls: 0 });
+  await mount(store, loadPage);
+  await pull(store);
+  expect(setup!.captureCharFrame()).toContain("items=0 more=false");
+});

package/src/plugins/builtin/jobs/pages.ts

@@ -0,0 +1,48 @@
+import { useCallback, useRef, useState } from "react";
+
+/**
+ * Pages appended past what the first response carried. Keyed on the first
+ * response's identity so a refresh drops them instead of stacking stale rows.
+ */
+interface Appended<T> {
+  key: string;
+  items: T[];
+  nextOffset: number;
+  exhausted: boolean;
+}
+
+export function useAppendedPages<T>(
+  key: string,
+  firstCount: number,
+  total: number,
+  loadPage: (offset: number) => Promise<T[]>,
+): { items: T[]; hasMore: boolean; loadingMore: boolean; loadMore: () => void } {
+  const [pages, setPages] = useState<Appended<T> | null>(null);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const inFlight = useRef<string | null>(null);
+  const current = pages?.key === key ? pages : null;
+  const loaded = firstCount + (current?.items.length ?? 0);
+  const hasMore = !current?.exhausted && loaded < total;
+  const loadMore = useCallback(() => {
+    if (!hasMore || inFlight.current === key) return;
+    inFlight.current = key;
+    setLoadingMore(true);
+    const offset = current?.nextOffset ?? firstCount;
+    loadPage(offset)
+      .then((items) => {
+        setPages((previous) => {
+          const base = previous?.key === key ? previous.items : [];
+          return { key, items: [...base, ...items], nextOffset: offset + items.length, exhausted: items.length === 0 };
+        });
+      })
+      .catch(() => {
+        // The rows already loaded stay; only the next page failed, and a
+        // later scroll asks again.
+      })
+      .finally(() => {
+        if (inFlight.current === key) inFlight.current = null;
+        setLoadingMore(false);
+      });
+  }, [current, firstCount, hasMore, key, loadPage]);
+  return { items: current?.items ?? [], hasMore, loadingMore, loadMore };
+}