gloomberb 0.18.3 → 0.18.4

package/src/plugins/builtin/perps/pane.tsx

@@ -25,21 +25,27 @@ import { isCloudSessionRequired, useResearchCloudSession } from "../shared/resea
 import { boardSearchText, cachedPerpSelection, cachedPerpsBoard, cachedPerpsCompare, cachedPerpsRankings, loadPerpSelection, loadPerpsBoard, loadPerpsCompare,
   loadPerpsHistoryForRange, loadPerpsRankings } from "./client";
 import { perpFreshness, perpObservation } from "./freshness";
+import { useLivePerpRows, useLivePerpTableRows } from "./live-rows";
 import { aprFormula, ASSET_FILTERS, BOARD_SORTS, boardColumns, collectedVenueCount, compact, compareColumns, dayChange, fundingInterval, fundingSpread, historyCaption, historyCell, historyChange, historyColumns,
   HISTORY_METRICS, historyRows, historySeries, historyValue, inPoints, isMarketTab, label, longShortReason, marketLabel, metricLabel, openingTab, perpCell, perpHistoryProText, PERP_TABS, percent,
   positioningFields, price, rankingColumns, rankingRows, RANKINGS, ratioText, share, sortLabel, time, underlyingTicker, venueLabel, venueName, venuesOf, type HistoryMetric,
   type PerpColumnId, type PerpTab, type RankingKey } from "./model";
 
 const NO_ROWS: readonly PerpBoardRow[] = [];
+const rowItself = (row: PerpBoardRow) => row;
+const replaced = (_: PerpBoardRow, row: PerpBoardRow) => row;
+const rankedRow = (entry: SectionedRow<Ranked>) => entry.kind === "item" ? entry.item.row : null;
+const withRankedRow = (entry: SectionedRow<Ranked>, row: PerpBoardRow): SectionedRow<Ranked> =>
+  entry.kind === "item" ? { ...entry, item: { ...entry.item, row } } : entry;
 
 /**
  * The footer line for the rows on screen: each venue's own observation time, how old the oldest is, the delay state
  * and what the funding figures are, the line `fn PERP` and `shot PERP` end with. It keeps ageing while the pane is
  * seen (`since` is when the rows loaded), and is published for a capture to date itself the same way.
  */
-function usePerpStatusLine(rows: readonly PerpBoardRow[], funding: readonly PerpBoardRow[], since: number | null): PaneFooterSegment[] {
+function usePerpStatusLine(rows: readonly PerpBoardRow[], funding: readonly PerpBoardRow[], since: number | null, live = false): PaneFooterSegment[] {
   const now = useAgeClock(since);
-  const declared = useMemo(() => rows.length ? perpFreshness(rows, { funding, now }) : null, [rows, funding, now]);
+  const declared = useMemo(() => rows.length ? perpFreshness(rows, { funding, now, live }) : null, [rows, funding, now, live]);
   useRemoteUiNode(declared ? { role: "report-freshness", label: "Venue freshness", getMetadata: () => ({ ...declared, observations: rows.map(perpObservation) }) } : null);
   return useMemo(() => {
     if (!declared) return [];
@@ -104,8 +110,8 @@ function MarketEvidence({ row, data, width, height }: { row: PerpBoardRow; data:
   </ScrollBox>;
 }
 
-function History({ market, venues, accessKey, width, height, focused, range, metric, refreshMarket }: {
-  market: PerpBoardRow; venues: number | null; accessKey: string; width: number; height: number; focused: boolean; range: string; metric: HistoryMetric; refreshMarket: () => void;
+function History({ market, live = false, venues, accessKey, width, height, focused, range, metric, refreshMarket }: {
+  market: PerpBoardRow; live?: boolean; venues: number | null; accessKey: string; width: number; height: number; focused: boolean; range: string; metric: HistoryMetric; refreshMarket: () => void;
 }) {
   const colors = useThemeColors();
   const loader = useCallback((force: boolean) => loadPerpsHistoryForRange(market.marketId, Number(range), accessKey, force), [market.marketId, range, accessKey]);
@@ -125,7 +131,7 @@ function History({ market, venues, accessKey, width, height, focused, range, met
   const lastTime = rows.at(-1)?.time;
   // The market row dates the figures beside the series. Its funding is the current estimate, unless the series is paid funding.
   const marketRows = useMemo(() => [market], [market]);
-  const line = usePerpStatusLine(marketRows, metric === "funding" && !data?.funding.length ? marketRows : NO_ROWS, resource.updatedAt);
+  const line = usePerpStatusLine(marketRows, metric === "funding" && !data?.funding.length ? marketRows : NO_ROWS, resource.updatedAt, live);
   usePaneStatusFooter({ registrationId: "perps:history", loading: resource.loading, error: resource.error, stale: resource.data?.stale,
     info: [...line, ...(lastTime ? [{ id: "history-asof", parts: [{ text: `${historyCaption(data, metric)} · ${time(lastTime)}`, tone: "muted" as const }] }] : [])] });
   usePaneNoticeFooter({ registrationId: "perps:history-notice", focused, notices: [resource.data?.refreshError,
@@ -221,14 +227,18 @@ function Board({ accessKey, width, height, focused, onPick, onOpen }: ListTabPro
   const resource = useAsyncResource(loader, { initialData: () => cachedPerpsBoard(query, accessKey), clearOnError: isAccessDenied, keepPreviousData: true });
   const data = resource.data?.payload;
   const venues = useMemo(() => venuesOf(data?.rows ?? []), [data]);
-  const rows = useMemo(() => venue === "all" ? data?.rows ?? [] : (data?.rows ?? []).filter((row) => row.venue === venue), [data, venue]);
+  const fetchedRows = useMemo(() => venue === "all" ? data?.rows ?? [] : (data?.rows ?? []).filter((row) => row.venue === venue), [data, venue]);
+  // The rows in view move with the quote stream.
+  const pinned = fetchedRows.find((row) => row.marketId === selectedId) ?? null;
+  const stream = useLivePerpTableRows(fetchedRows, rowItself, replaced, { pinned });
+  const rows = stream.items;
   const selected = rows.find((row) => row.marketId === selectedId) ?? rows[0] ?? null;
   useEffect(() => { onPick(selected); }, [selected, onPick]);
   const columns = useMemo(() => boardColumns(width), [width]);
   const locked = typeof data?.locked === "number" ? data.locked : 0;
   useAutoRefresh(resource.updatedAt, resource.load, { intervalMs: 60_000 });
   usePaneRefreshKey(() => { void resource.reload(); }, { focused: focused && !querySearch.active });
-  const line = usePerpStatusLine(rows, rows, resource.updatedAt);
+  const line = usePerpStatusLine(rows, rows, resource.updatedAt, stream.live);
   usePaneStatusFooter({ registrationId: "perps:board", loading: resource.loading, error: data ? resource.error : null, stale: resource.data?.stale, info: line });
   usePaneNoticeFooter({ registrationId: "perps:board-notice", focused, notices: resource.data?.refreshError ? [resource.data.refreshError] : [] });
   if (!data && isCloudSessionRequired(resource.error)) return <SignInWall placement="perps-signin" action="view perpetual markets" needsVerification={session.needsVerification} />;
@@ -244,7 +254,7 @@ function Board({ accessKey, width, height, focused, onPick, onOpen }: ListTabPro
     ]} />;
   return <PaneStatusBody loading={!data && resource.loading} error={!data ? resource.error : null} subject="perpetual markets">
     <DataTableView<PerpBoardRow> columns={columns} items={rows} focused={focused && !querySearch.active} rootWidth={width} rootHeight={height} rootBefore={queryBar}
-      getItemKey={(row) => row.marketId} sortColumnId={null} sortDirection="desc" resetScrollKey={`${JSON.stringify(query)}:${venue}`}
+      getItemKey={(row) => row.marketId} sortColumnId={null} sortDirection="desc" resetScrollKey={`${JSON.stringify(query)}:${venue}`} onVisibleRangeChange={stream.onVisibleRangeChange}
       selection={{ kind: "id", selectedId: selected?.marketId ?? null, getId: (row) => row.marketId, onChange: setSelected }} onActivate={(row) => onOpen(row)}
       renderCell={(row, column) => perpCell(row, column.id as PerpColumnId, colors)} selectedTextOverridesCellColor
       emptyStateTitle="No markets match these filters." emptyContent={lock && <Box paddingX={1} paddingY={1}><EmptyState title="No preview markets match." actions={<UpgradeLabel text={moreText(locked, "markets")} onPress={upgrade} role="perps-board-upgrade" />} /></Box>}
@@ -264,8 +274,11 @@ function Rankings({ accessKey, width, height, focused, onPick, onOpen }: ListTab
   const loader = useCallback((force: boolean) => loadPerpsRankings(accessKey, force), [accessKey]);
   const resource = useAsyncResource(loader, { initialData: () => cachedPerpsRankings(accessKey), clearOnError: isAccessDenied });
   const data = resource.data?.payload;
-  const items = useMemo(() => buildSectionedRows(RANKINGS.map((ranking) => ({ label: ranking.label, emptyLabel: "None",
+  const fetchedItems = useMemo(() => buildSectionedRows(RANKINGS.map((ranking) => ({ label: ranking.label, emptyLabel: "None",
     items: rankingRows(data, ranking.key).map((row): Ranked => ({ list: ranking.key, row })) })), rankedKey), [data]);
+  // The ranked rows in view move with the quote stream; the lists keep the order they were ranked in.
+  const stream = useLivePerpTableRows(fetchedItems, rankedRow, withRankedRow);
+  const items = stream.items;
   const ranked = items.flatMap((item) => item.kind === "item" ? [item.item] : []);
   const selected = ranked.find((item) => rankedKey(item) === selectedId) ?? ranked[0] ?? null;
   useEffect(() => { onPick(selected?.row ?? null); }, [selected, onPick]);
@@ -275,7 +288,7 @@ function Rankings({ accessKey, width, height, focused, onPick, onOpen }: ListTab
   // Every ranked row is dated; only the funding lists show funding.
   const rankedRows = useMemo(() => RANKINGS.flatMap((ranking) => rankingRows(data, ranking.key)), [data]);
   const fundingRows = useMemo(() => RANKINGS.filter((ranking) => ranking.field === "fundingRate8h").flatMap((ranking) => rankingRows(data, ranking.key)), [data]);
-  const line = usePerpStatusLine(rankedRows, fundingRows, resource.updatedAt);
+  const line = usePerpStatusLine(rankedRows, fundingRows, resource.updatedAt, stream.live);
   usePaneStatusFooter({ registrationId: "perps:rankings", loading: resource.loading, error: data ? resource.error : null, stale: resource.data?.stale, info: line });
   usePaneNoticeFooter({ registrationId: "perps:rankings-notice", focused, notices: resource.data?.refreshError ? [resource.data.refreshError] : [] });
   if (!data && isCloudSessionRequired(resource.error)) return <SignInWall placement="perps-signin" action="view perpetual rankings" needsVerification={session.needsVerification} />;
@@ -290,7 +303,7 @@ function Rankings({ accessKey, width, height, focused, onPick, onOpen }: ListTab
   };
   return <PaneStatusBody loading={!data && resource.loading} error={!data ? resource.error : null} subject="perpetual rankings">
     <DataTableView<SectionedRow<Ranked>> columns={columns} items={items} focused={focused} rootWidth={width} rootHeight={height}
-      getItemKey={(entry) => entry.key} sortColumnId={null} sortDirection="desc" isNavigable={(entry) => entry.kind === "item"}
+      getItemKey={(entry) => entry.key} sortColumnId={null} sortDirection="desc" isNavigable={(entry) => entry.kind === "item"} onVisibleRangeChange={stream.onVisibleRangeChange}
       renderSectionHeader={(entry) => entry.kind === "section" ? { text: entry.label } : null}
       selection={{ kind: "id", selectedId: selected ? rankedKey(selected) : null, getId: (entry) => entry.key, onChange: (id) => { if (ranked.some((item) => rankedKey(item) === id)) setSelected(id); } }}
       onActivate={(entry) => { if (entry.kind === "item") onOpen(entry.item.row); }}
@@ -310,11 +323,13 @@ function Compare({ asset, onAssetChange, accessKey, width, height, focused, onPi
   const loader = useCallback((force: boolean) => loadPerpsCompare(base, accessKey, force), [base, accessKey]);
   const resource = useAsyncResource(loader, { initialData: () => cachedPerpsCompare(base, accessKey), clearOnError: isAccessDenied, keepPreviousData: true });
   const data = resource.data?.payload;
-  const rows = useMemo(() => data?.rows ?? [], [data]);
+  const fetchedRows = useMemo(() => data?.rows ?? [], [data]);
+  const stream = useLivePerpTableRows(fetchedRows, rowItself, replaced, { pinned: fetchedRows.find((row) => row.marketId === selectedId) ?? null });
+  const rows = stream.items;
   const selected = rows.find((row) => row.marketId === selectedId) ?? rows[0] ?? null;
   useEffect(() => { onPick(selected); }, [selected, onPick]);
   const columns = useMemo(() => compareColumns(width), [width]);
-  const line = usePerpStatusLine(rows, rows, resource.updatedAt);
+  const line = usePerpStatusLine(rows, rows, resource.updatedAt, stream.live);
   const spread = useMemo(() => fundingSpread(rows), [rows]);
   const locked = typeof data?.locked === "number" ? data.locked : 0;
   useAutoRefresh(resource.updatedAt, resource.load, { intervalMs: 60_000 });
@@ -330,7 +345,7 @@ function Compare({ asset, onAssetChange, accessKey, width, height, focused, onPi
   </>;
   return <PaneStatusBody loading={!data && resource.loading} error={!data ? resource.error : null} subject="perpetual contracts">
     <DataTableView<PerpBoardRow> columns={columns} items={rows} focused={focused && !querySearch.active} rootWidth={width} rootHeight={height} rootBefore={before}
-      getItemKey={(row) => row.marketId} sortColumnId={null} sortDirection="desc" resetScrollKey={base}
+      getItemKey={(row) => row.marketId} sortColumnId={null} sortDirection="desc" resetScrollKey={base} onVisibleRangeChange={stream.onVisibleRangeChange}
       selection={{ kind: "id", selectedId: selected?.marketId ?? null, getId: (row) => row.marketId, onChange: setSelected }} onActivate={(row) => onOpen(row)}
       renderCell={(row, column) => perpCell(row, column.id as PerpColumnId, colors)} selectedTextOverridesCellColor
       emptyStateTitle={`No perpetual contracts for ${base}.`} emptyContent={lock && <Box paddingX={1} paddingY={1}><EmptyState title={`No preview contracts for ${base}.`} actions={<UpgradeLabel text={moreText(locked, locked === 1 ? "contract" : "contracts")} onPress={upgrade} role="perps-compare-upgrade" />} /></Box>}
@@ -380,7 +395,11 @@ export function PerpsPane({ width, height, focused, marketAction }: Pick<PanePro
   const loader = useCallback((force: boolean) => loadPerpSelection(search, accessKey, force), [search, accessKey]);
   const resource = useAsyncResource(marketTab ? loader : null, { initialData: () => cachedPerpSelection(search, accessKey), clearOnError: isAccessDenied });
   const data = marketTab ? resource.data?.payload : undefined;
-  const active = data?.rows[0] ?? null;
+  const fetchedActive = data?.rows[0] ?? null;
+  // The market on screen moves with the quote stream, as its listing's quote does everywhere else.
+  const activeRows = useMemo(() => fetchedActive ? [fetchedActive] : NO_ROWS, [fetchedActive]);
+  const activeStream = useLivePerpRows(activeRows, { surface: "detail", enabled: marketTab });
+  const active = activeStream.rows[0] ?? null;
   usePaneTitle(active ? `PERP ${marketLabel(active)} · ${venueLabel(active)}` : "PERP");
   const querySearch = useQueryBarSearch();
   // The market on screen goes with the user: History and Evidence open the row picked on a list, Compare its base asset.
@@ -416,7 +435,7 @@ export function PerpsPane({ width, height, focused, marketAction }: Pick<PanePro
   ];
   // History dates its own market beside its series; Evidence is dated here.
   const evidenceRows = useMemo(() => tab === "evidence" && active ? [active] : NO_ROWS, [tab, active]);
-  const evidenceLine = usePerpStatusLine(evidenceRows, evidenceRows, resource.updatedAt);
+  const evidenceLine = usePerpStatusLine(evidenceRows, evidenceRows, resource.updatedAt, activeStream.live);
   usePaneStatusFooter({ registrationId: "perps", loading: marketTab && resource.loading, error: data ? resource.error : null, stale: marketTab && resource.data?.stale,
     info: evidenceLine, hints });
   usePaneNoticeFooter({ registrationId: "perps:notices", focused, notices: marketTab ? [resource.data?.refreshError,
@@ -434,7 +453,7 @@ export function PerpsPane({ width, height, focused, marketAction }: Pick<PanePro
             { id: "range", label: "Range", value: range, options: ["1", "7", "30", "90", "365"].map((value) => ({ value, label: `${value}D` })), onChange: setRange },
           ] : []} />
         <PaneStatusBody loading={!data && resource.loading} error={!data ? resource.error : null} subject="perpetual market">
-          {active ? tab === "history" ? <History key={active.marketId} market={active} venues={collectedVenueCount(data?.sources)} accessKey={accessKey} width={width} height={listHeight - 1} focused={focused && !querySearch.active} range={range} metric={metric} refreshMarket={refreshMarket} />
+          {active ? tab === "history" ? <History key={active.marketId} market={active} live={activeStream.live} venues={collectedVenueCount(data?.sources)} accessKey={accessKey} width={width} height={listHeight - 1} focused={focused && !querySearch.active} range={range} metric={metric} refreshMarket={refreshMarket} />
             : <MarketEvidence row={active} data={data!} width={width} height={listHeight - 1} />
             : <EmptyState title="No market matches." message={data?.suggestions?.length ? `Try ${data.suggestions.join(", ")}.` : undefined} />}
         </PaneStatusBody>

package/src/plugins/builtin/perps/venue-markets.ts

@@ -0,0 +1,96 @@
+import type { PerpBoardRow } from "../../../api-client/perps";
+import { venueName } from "./model";
+
+/**
+ * An asset's perpetual markets as DES lists them: one row per venue.
+ *
+ * A venue often lists one asset several times: Bybit's BTC settles in USDT,
+ * in USDC and inversely in BTC, and on Hyperliquid each builder dex (xyz, flx,
+ * km...) deploys its own NVDA. Listed contract by contract they read as the
+ * same line over and over, so each venue's contracts are one market here: the
+ * deepest contract gives the row its mark, funding and premium, and the open
+ * interest and volume are the venue's whole. A row reached twice (the same
+ * market id in two cases, or answered by two reads) is one contract.
+ */
+export interface PerpVenueMarket {
+  /** `hyperliquid:BTC`: the venue and the asset, whatever the contract. */
+  key: string;
+  venue: string;
+  /** The deepest contract, which a click opens. */
+  primary: PerpBoardRow;
+  /** Every contract on the venue, deepest first; the primary is the first. */
+  contracts: PerpBoardRow[];
+  /** Open interest across the contracts, in USD; null when no contract states it. */
+  openInterestUsd: number | null;
+  volume24hUsd: number | null;
+}
+
+const sumOrNull = (values: Array<number | null | undefined>) => {
+  const known = values.filter((value): value is number => typeof value === "number" && Number.isFinite(value));
+  return known.length ? known.reduce((sum, value) => sum + value, 0) : null;
+};
+const depth = (value: number | null | undefined) => typeof value === "number" && Number.isFinite(value) ? value : -1;
+const deeper = (a: { openInterestUsd: number | null; volume24hUsd: number | null }, b: typeof a) =>
+  depth(b.openInterestUsd) - depth(a.openInterestUsd) || depth(b.volume24hUsd) - depth(a.volume24hUsd);
+
+/** Rows merged into one row per venue and asset, the deepest first (open interest, then volume). Delisted contracts are left out. */
+export function mergeVenueMarkets(rows: readonly PerpBoardRow[]): PerpVenueMarket[] {
+  const contracts = new Map<string, PerpBoardRow>();
+  for (const row of rows) {
+    if (row.delisted) continue;
+    const id = row.marketId.toLowerCase();
+    const seen = contracts.get(id);
+    if (!seen || Date.parse(row.observedAt) > Date.parse(seen.observedAt)) contracts.set(id, row);
+  }
+  const venues = new Map<string, PerpBoardRow[]>();
+  for (const row of contracts.values()) {
+    const key = `${row.venue}:${row.baseAsset.toUpperCase()}`;
+    venues.set(key, [...venues.get(key) ?? [], row]);
+  }
+  return [...venues].map(([key, group]): PerpVenueMarket => {
+    const sorted = [...group].sort((a, b) => deeper(a, b) || a.marketId.localeCompare(b.marketId));
+    return {
+      key,
+      venue: sorted[0]!.venue,
+      primary: sorted[0]!,
+      contracts: sorted,
+      openInterestUsd: sumOrNull(sorted.map((row) => row.openInterestUsd)),
+      volume24hUsd: sumOrNull(sorted.map((row) => row.volume24hUsd)),
+    };
+  }).sort((a, b) => deeper(a, b) || venueName(a.venue).localeCompare(venueName(b.venue)) || a.key.localeCompare(b.key));
+}
+
+/** A market under this share of the asset's open interest is folded behind "more". */
+const SMALL_MARKET_SHARE = 0.02;
+
+/**
+ * The markets shown and those folded behind "more": a market holding less than
+ * `minShare` of the asset's open interest across venues, or past `maxShown`,
+ * is folded. The deepest market always shows, and one with no open interest
+ * stated shows only while no market states any.
+ */
+export function foldSmallMarkets(markets: readonly PerpVenueMarket[], { minShare = SMALL_MARKET_SHARE, maxShown = 4 }: { minShare?: number; maxShown?: number } = {}): {
+  shown: PerpVenueMarket[]; folded: PerpVenueMarket[];
+} {
+  const total = sumOrNull(markets.map((market) => market.openInterestUsd));
+  const shown: PerpVenueMarket[] = [];
+  const folded: PerpVenueMarket[] = [];
+  for (const market of markets) {
+    const share = total && market.openInterestUsd != null ? market.openInterestUsd / total : total ? 0 : 1;
+    if (shown.length === 0 || (shown.length < maxShown && share >= minShare)) shown.push(market);
+    else folded.push(market);
+  }
+  return { shown, folded };
+}
+
+/**
+ * The contract a venue's row reads from, as the venue settles it (`USDT`, `USD inverse`, a Hyperliquid builder dex
+ * such as `xyz`), and how many more it stands for: `USDT +2`.
+ */
+export function contractText(market: PerpVenueMarket): string {
+  const row = market.primary;
+  const own = row.venue === "hyperliquid" && row.dex && row.dex !== "default" ? row.dex
+    : row.contractType === "inverse" ? `${row.quoteCurrency} inverse` : row.quoteCurrency;
+  const others = market.contracts.length - 1;
+  return others > 0 ? `${own} +${others}` : own;
+}

package/src/plugins/builtin/plugin-marketplace/index.tsx

@@ -10,6 +10,7 @@ export const pluginMarketplaceModule: PluginModule = {
       name: "Plugins",
       icon: "P",
       component: PluginMarketplacePane,
+      reportFreshness: { status: "not-a-feed", basis: "plugin listings" },
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 118, height: 34 },
@@ -34,7 +35,7 @@ export const pluginMarketplaceModule: PluginModule = {
       id: "plugin-marketplace-pane",
       paneId: PLUGIN_MARKETPLACE_PANE_ID,
       label: "Plugins",
-      description: "Browse and install Gloomberb plugins, and enable or disable the ones you have.",
+      description: "Browse and install Gloom plugins, and enable or disable the ones you have.",
       keywords: ["plugin", "plugins", "marketplace", "install", "extend", "addon", "extension"],
       shortcut: { prefix: "PL" },
       createInstance: () => ({ placement: "floating" }),