gloomberb 0.10.4 → 0.11.0

package/src/plugins/builtin/market-halts/pane.tsx

@@ -0,0 +1,256 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  DataTableView,
+  EmptyState,
+  Spinner,
+  Tabs,
+  type DataTableCell,
+  type DataTableKeyEvent,
+} from "../../../components";
+import { useShortcut } from "../../../react/input";
+import { colors } from "../../../theme/colors";
+import { TICKER_RESEARCH_PANE_ID } from "../../../types/config";
+import type { PaneProps } from "../../../types/plugin";
+import { Box, TextAttributes } from "../../../ui";
+import { isPlainKey } from "../../../utils/keyboard";
+import { cycleSortPreference } from "../../../utils/sort-values";
+import { useConnectionHealth, usePluginTickerActions } from "../../runtime";
+import { useAutoRefresh } from "../shared/auto-refresh";
+import { usePaneStatusFooter } from "../shared/pane-footer";
+import { acquireMarketHaltsHealth, fetchMarketHalts } from "./client";
+import {
+  DEFAULT_HALT_SORT,
+  HALT_FILTERS,
+  HALT_SORT_COLUMN_IDS,
+  MARKET_HALTS_PANE_ID,
+  buildHaltColumns,
+  filterHalts,
+  formatEtDate,
+  formatEtResumption,
+  formatEtTime,
+  haltStatusColor,
+  haltStatusLabel,
+  nextHaltFilter,
+  nextHaltSort,
+  resolveHaltStatus,
+  sortHalts,
+  type HaltColumn,
+  type HaltFilter,
+  type HaltRecord,
+  type HaltSortPreference,
+} from "./model";
+
+/** Halted rows flip to resumed on the clock alone, so the pane re-reads it. */
+const STATUS_TICK_MS = 15_000;
+
+export function MarketHaltsPane({ focused, width, height }: PaneProps) {
+  const { pinTicker } = usePluginTickerActions();
+  const connectionHealth = useConnectionHealth();
+  const [records, setRecords] = useState<HaltRecord[]>([]);
+  const [status, setStatus] = useState<"loading" | "loaded" | "error">("loading");
+  const [error, setError] = useState<string | null>(null);
+  const [fetchedAt, setFetchedAt] = useState<number | null>(null);
+  const [filter, setFilter] = useState<HaltFilter>("all");
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [sortPreference, setSortPreference] = useState<HaltSortPreference>(DEFAULT_HALT_SORT);
+  const [now, setNow] = useState(() => Date.now());
+  const fetchGenRef = useRef(0);
+
+  const load = useCallback(() => {
+    fetchGenRef.current += 1;
+    const generation = fetchGenRef.current;
+    setStatus((current) => (current === "loaded" ? "loaded" : "loading"));
+    setError(null);
+    fetchMarketHalts(connectionHealth)
+      .then((next) => {
+        if (fetchGenRef.current !== generation) return;
+        setRecords(next);
+        setError(null);
+        setStatus("loaded");
+        setFetchedAt(Date.now());
+        setNow(Date.now());
+      })
+      .catch((loadError: unknown) => {
+        if (fetchGenRef.current !== generation) return;
+        setError(loadError instanceof Error ? loadError.message : String(loadError));
+        setStatus("error");
+      });
+  }, [connectionHealth]);
+
+  useEffect(() => acquireMarketHaltsHealth(connectionHealth), [connectionHealth]);
+  useEffect(() => { load(); }, [load]);
+  useAutoRefresh(fetchedAt, load);
+
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), STATUS_TICK_MS);
+    return () => clearInterval(timer);
+  }, []);
+
+  const rows = useMemo(
+    () => sortHalts(filterHalts(records, filter, now), sortPreference, now),
+    [filter, now, records, sortPreference],
+  );
+
+  useEffect(() => {
+    if (selectedId && rows.some((row) => row.id === selectedId)) return;
+    setSelectedId(rows[0]?.id ?? null);
+  }, [rows, selectedId]);
+
+  const refresh = useCallback(() => load(), [load]);
+  const cycleFilter = useCallback(() => setFilter((current) => nextHaltFilter(current)), []);
+  const cycleSort = useCallback((step: 1 | -1) => {
+    setSortPreference((current) => cycleSortPreference(HALT_SORT_COLUMN_IDS, current, step));
+  }, []);
+  const handleHeaderClick = useCallback((columnId: string) => {
+    setSortPreference((current) => nextHaltSort(current, columnId));
+  }, []);
+  const openTicker = useCallback((record: HaltRecord) => {
+    pinTicker(record.symbol, { floating: true, paneType: TICKER_RESEARCH_PANE_ID });
+  }, [pinTicker]);
+
+  const handlePaneKey = useCallback((event: DataTableKeyEvent): boolean => {
+    if (isPlainKey(event, "r")) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      refresh();
+      return true;
+    }
+    if (isPlainKey(event, "f")) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      cycleFilter();
+      return true;
+    }
+    if (isPlainKey(event, "]", "[")) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      cycleSort(event.name === "]" ? 1 : -1);
+      return true;
+    }
+    return false;
+  }, [cycleFilter, cycleSort, refresh]);
+
+  useShortcut((event) => {
+    if (event.targetEditable || event.defaultPrevented || event.propagationStopped) return;
+    handlePaneKey(event as DataTableKeyEvent);
+  }, { enabled: focused });
+
+  const columns = useMemo(() => buildHaltColumns(width), [width]);
+
+  usePaneStatusFooter({
+    registrationId: MARKET_HALTS_PANE_ID,
+    loading: status === "loading",
+    error,
+    hints: [{ id: "filter", key: "f", label: "ilter", onPress: cycleFilter }],
+  });
+
+  const renderCell = useCallback((
+    row: HaltRecord,
+    column: HaltColumn,
+    _index: number,
+    rowState: { selected: boolean },
+  ): DataTableCell => {
+    const selectedColor = rowState.selected ? colors.selectedText : undefined;
+    switch (column.id) {
+      case "symbol":
+        return {
+          text: row.symbol,
+          color: selectedColor ?? colors.textBright,
+          attributes: TextAttributes.BOLD,
+        };
+      case "market":
+        return { text: row.market, color: selectedColor ?? colors.textDim };
+      case "company":
+        return { text: row.company, color: selectedColor ?? colors.text };
+      case "code":
+        return { text: row.reasonCode || "—", color: selectedColor ?? colors.textDim };
+      case "reason":
+        return { text: row.reason, color: selectedColor ?? colors.text };
+      case "date":
+        return { text: formatEtDate(row.haltedAt), color: selectedColor ?? colors.textMuted };
+      case "halted":
+        return { text: formatEtTime(row.haltedAt), color: selectedColor ?? colors.textMuted };
+      case "quote":
+        return {
+          text: formatEtResumption(row.quoteResumeAt, row.haltedAt),
+          color: selectedColor ?? colors.textDim,
+        };
+      case "trade":
+        return {
+          text: formatEtResumption(row.tradeResumeAt, row.haltedAt),
+          color: selectedColor ?? colors.textDim,
+        };
+      case "status": {
+        const rowStatus = resolveHaltStatus(row, now);
+        return {
+          text: haltStatusLabel(rowStatus),
+          color: selectedColor ?? haltStatusColor(rowStatus),
+          attributes: TextAttributes.BOLD,
+        };
+      }
+    }
+  }, [now]);
+
+  const tabs = (
+    <Box height={1} flexShrink={0} overflow="hidden">
+      <Tabs
+        tabs={HALT_FILTERS.map((entry) => ({ label: entry.label, value: entry.value }))}
+        activeValue={filter}
+        onSelect={(value) => setFilter(value as HaltFilter)}
+        compact
+        variant="bare"
+        focused={focused}
+        keyboardNavigation={false}
+      />
+    </Box>
+  );
+
+  if (status === "loading" && records.length === 0) {
+    return (
+      <Box flexDirection="column" width={width} height={height}>
+        {tabs}
+        <Box flexGrow={1} justifyContent="center" alignItems="center">
+          <Spinner label="Loading trading halts..." />
+        </Box>
+      </Box>
+    );
+  }
+
+  if (status === "error" && records.length === 0) {
+    return (
+      <Box flexDirection="column" width={width} height={height}>
+        {tabs}
+        <Box padding={1}>
+          <EmptyState title="Trading halts unavailable." message={error ?? undefined} />
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" width={width} height={height}>
+      {tabs}
+      <DataTableView<HaltRecord, HaltColumn>
+        focused={focused}
+        rootWidth={width}
+        rootHeight={Math.max(1, height - 1)}
+        selection={{
+          kind: "id",
+          selectedId,
+          getId: (row) => row.id,
+          onChange: (id) => setSelectedId(id),
+        }}
+        onRootKeyDown={handlePaneKey}
+        columns={columns}
+        items={rows}
+        sortColumnId={sortPreference.columnId}
+        sortDirection={sortPreference.direction}
+        onHeaderClick={handleHeaderClick}
+        getItemKey={(row) => row.id}
+        onActivate={openTicker}
+        renderCell={renderCell}
+        emptyStateTitle={filter === "all" ? "No trading halts reported." : "No halts match this filter."}
+      />
+    </Box>
+  );
+}

package/src/plugins/builtin/market-heatmap/data.test.ts

@@ -39,6 +39,7 @@ describe("market heatmap data", () => {
       price: 143,
       change: 2.5,
       changePercent: 1.78,
+      hasChange: true,
       size: 3_500_000_000_000,
       sizeKind: "market-cap",
       volume: 45_000_000,

package/src/plugins/builtin/market-heatmap/data.ts

@@ -16,6 +16,12 @@ export interface MarketHeatmapAsset {
   price: number;
   change: number;
   changePercent: number;
+  /**
+   * Whether the source actually carried a session change. `changePercent` keeps
+   * a numeric 0 for the shared screener row shape, so tiles must read this
+   * before showing a flat session that was really missing data.
+   */
+  hasChange: boolean;
   size: number | null;
   sizeKind: MarketHeatmapSizeKind;
   volume: number | null;
@@ -140,14 +146,15 @@ export function parseYahooMarketHeatmapResponse(data: unknown, universe: MarketH
       : getNumber(quote, "marketCap") ?? getNumber(quote, "intradayMarketCap");
     const price = getNumber(quote, "regularMarketPrice") ?? 0;
     const change = getNumber(quote, "regularMarketChange") ?? 0;
-    const changePercent = getNumber(quote, "regularMarketChangePercent") ?? 0;
+    const changePercentValue = getNumber(quote, "regularMarketChangePercent");
 
     assets.push({
       symbol,
       name: getString(quote, "shortName") ?? getString(quote, "longName") ?? getString(quote, "displayName") ?? symbol,
       price,
       change,
-      changePercent,
+      changePercent: changePercentValue ?? 0,
+      hasChange: changePercentValue != null,
       size,
       sizeKind,
       volume: getNumber(quote, "regularMarketVolume"),
@@ -176,13 +183,15 @@ export function parseNasdaqMarketHeatmapResponse(data: unknown): MarketHeatmapAs
     const size = parseLooseNumber(row.marketCap);
     if (size == null || size <= 0) continue;
     const price = parseLooseNumber(row.lastsale) ?? 0;
+    const changePercentValue = parseLooseNumber(row.pctchange);
 
     assets.push({
       symbol,
       name: getString(row, "name") ?? symbol,
       price,
       change: parseLooseNumber(row.netchange) ?? 0,
-      changePercent: parseLooseNumber(row.pctchange) ?? 0,
+      changePercent: changePercentValue ?? 0,
+      hasChange: changePercentValue != null,
       size,
       sizeKind: "market-cap",
       volume: parseLooseNumber(row.volume),

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

@@ -16,7 +16,9 @@ import type { PluginModule } from "../plugin-module";
 import { priceColor } from "../../../theme/colors";
 import { formatCompact, formatCurrency, formatPercentRaw } from "../../../utils/format";
 import { isPlainKey } from "../../../utils/keyboard";
-import { usePluginPaneState, usePluginTickerActions } from "../../runtime";
+import { usePaneSettingValue } from "../../../state/app/context";
+import { usePluginTickerActions } from "../../runtime";
+import { useLiveQuoteEntries } from "../../../state/hooks/quote-streaming";
 import {
   MARKET_HEATMAP_UNIVERSES,
   fetchMarketHeatmap,
@@ -24,6 +26,17 @@ import {
   type MarketHeatmapAsset,
   type MarketHeatmapUniverseId,
 } from "./data";
+import { useAutoRefresh, useUpdatedAgo } from "../shared/auto-refresh";
+import {
+  LIVE_STREAMING_QUICK_SETTING,
+  useLiveStreamingSetting,
+  withLiveStreamingSetting,
+} from "../shared/live-streaming";
+import {
+  buildScreenerQuoteTargets,
+  overlayScreenerQuoteEntries,
+  resolveScreenerQuoteFeedStatus,
+} from "../shared/screener-live-quotes";
 
 function formatMoneyCompact(value: number | null | undefined, currency: string): string {
   if (value == null) return "—";
@@ -31,39 +44,64 @@ function formatMoneyCompact(value: number | null | undefined, currency: string):
   return `${formatCompact(value)} ${currency}`;
 }
 
-function sizeLabel(asset: MarketHeatmapAsset): string {
+function sizeLabel(asset: MarketHeatmapAsset): string | null {
+  if (asset.size == null) return null;
   const label = asset.sizeKind === "net-assets" ? "Assets" : "Mkt";
   return `${label} ${formatMoneyCompact(asset.size, asset.currency)}`;
 }
 
-function updatedLabel(timestamp: number | null): string | null {
-  if (!timestamp) return null;
-  return new Date(timestamp).toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-}
-
 function buildItems(assets: MarketHeatmapAsset[]): Array<MetricTreemapItem<MarketHeatmapAsset>> {
   return assets.map((asset) => ({
     id: asset.symbol,
     label: asset.symbol,
     weight: asset.size ?? 0,
-    colorValue: asset.changePercent,
-    primaryText: formatPercentRaw(asset.changePercent),
+    colorValue: asset.hasChange ? asset.changePercent : null,
+    // No change data is not a flat session; 0.00% would be a made-up number.
+    primaryText: asset.hasChange ? formatPercentRaw(asset.changePercent) : "—",
     secondaryText: sizeLabel(asset),
     tertiaryText: asset.volume != null ? `Vol ${formatCompact(asset.volume)}` : asset.exchange || null,
     data: asset,
   }));
 }
 
+/**
+ * A tile that clips "$1.0T" into "$1.0" reads as a real, wrong number, so a
+ * metric that does not fit its tile is dropped instead of truncated. Layout
+ * depends on weights alone, so re-rendering with shorter text keeps the same
+ * geometry.
+ */
+function fitItemsToTiles(
+  items: Array<MetricTreemapItem<MarketHeatmapAsset>>,
+  tiles: Array<{ item: { id: string }; width: number; height: number }>,
+): Array<MetricTreemapItem<MarketHeatmapAsset>> {
+  const tileById = new Map(tiles.map((tile) => [tile.item.id, tile]));
+  return items.map((item) => {
+    const tile = tileById.get(item.id);
+    if (!tile) return item;
+    // Mirrors the terminal tile's own padding: one cell of border, one of gutter.
+    const innerWidth = Math.max(1, Math.floor(tile.width) - (tile.width > 2 ? 1 : 0) - 1);
+    const fits = (text: string | null | undefined) => (
+      text != null && text.length <= innerWidth ? text : null
+    );
+    return {
+      ...item,
+      primaryText: fits(item.primaryText),
+      secondaryText: fits(item.secondaryText),
+      tertiaryText: fits(item.tertiaryText),
+    };
+  });
+}
+
 function MarketHeatmapPane({ focused, width, height }: PaneProps) {
   const { pinTicker } = usePluginTickerActions();
+  const liveStreaming = useLiveStreamingSetting();
   const { cellWidthPx = 8, cellHeightPx = 18, nativePaneChrome } = useUiCapabilities();
-  const [activeUniverse, setActiveUniverse] = usePluginPaneState<MarketHeatmapUniverseId>("universe", "us-equity");
+  // A pane setting, not private pane state, so the settings dialog can show it.
+  const [activeUniverse, setActiveUniverse] = usePaneSettingValue<MarketHeatmapUniverseId>("universe", "us-equity");
   const [assets, setAssets] = useState<MarketHeatmapAsset[]>([]);
   const [lastUpdated, setLastUpdated] = useState<number | null>(null);
-  const [loading, setLoading] = useState(false);
+  // The first load starts before the effect runs; an empty board is not "no data".
+  const [loading, setLoading] = useState(true);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [selectedSymbol, setSelectedSymbol] = useState<string | null>(null);
   const fetchGenRef = useRef(0);
@@ -71,16 +109,44 @@ function MarketHeatmapPane({ focused, width, height }: PaneProps) {
   const chartHeight = Math.max(1, height - 1);
   const chartWidth = Math.max(1, width - 2);
   const cellAspect = Math.max(0.5, Math.min(4, cellHeightPx / Math.max(1, cellWidthPx)));
-  const items = useMemo(() => buildItems(assets), [assets]);
+  const quoteTargets = useMemo(
+    () => buildScreenerQuoteTargets(assets, selectedSymbol),
+    [assets, selectedSymbol],
+  );
+  const {
+    entries: liveQuoteEntries,
+    freshnessNow,
+    subscriptionStartedAt,
+  } = useLiveQuoteEntries(quoteTargets, {
+    freshnessScopeKey: `market-heatmap:${activeUniverse}`,
+    liveStreaming,
+  });
+  const resolvedAssets = useMemo(
+    () => overlayScreenerQuoteEntries(assets, liveQuoteEntries),
+    [assets, liveQuoteEntries],
+  );
+  const feedStatus = useMemo(
+    () => resolveScreenerQuoteFeedStatus(quoteTargets, liveQuoteEntries, {
+      now: freshnessNow,
+      subscriptionStartedAt,
+    }),
+    [freshnessNow, liveQuoteEntries, quoteTargets, subscriptionStartedAt],
+  );
+  const items = useMemo(() => buildItems(resolvedAssets), [resolvedAssets]);
   const navigationTiles = useMemo(
     () => buildMetricTreemapNavigationTiles(items, chartWidth, chartHeight, cellAspect, nativePaneChrome ? "float" : "integer"),
     [cellAspect, chartHeight, chartWidth, items, nativePaneChrome],
   );
+  // Desktop tiles ellipsize, which is visible; terminal cells clip silently.
+  const displayItems = useMemo(
+    () => (nativePaneChrome ? items : fitItemsToTiles(items, navigationTiles)),
+    [items, nativePaneChrome, navigationTiles],
+  );
   const selectedIdx = selectedSymbol
-    ? assets.findIndex((asset) => asset.symbol === selectedSymbol)
+    ? resolvedAssets.findIndex((asset) => asset.symbol === selectedSymbol)
     : -1;
-  const activeIdx = selectedIdx >= 0 ? selectedIdx : (assets.length > 0 ? 0 : -1);
-  const selectedAsset = activeIdx >= 0 ? assets[activeIdx] ?? null : null;
+  const activeIdx = selectedIdx >= 0 ? selectedIdx : (resolvedAssets.length > 0 ? 0 : -1);
+  const selectedAsset = activeIdx >= 0 ? resolvedAssets[activeIdx] ?? null : null;
 
   const loadUniverse = useCallback(async (universe: MarketHeatmapUniverseId, options?: { forceRefresh?: boolean }) => {
     fetchGenRef.current += 1;
@@ -96,13 +162,13 @@ function MarketHeatmapPane({ focused, width, height }: PaneProps) {
       if (fetchGenRef.current !== gen) return;
       setAssets(result.assets);
       setLastUpdated(result.fetchedAt);
-      setSelectedSymbol(result.assets[0]?.symbol ?? null);
-    } catch (error) {
+      // Selection is the user's; the effect below only fills it when it is gone.
+    } catch {
       if (fetchGenRef.current !== gen) return;
       setAssets([]);
       setLastUpdated(null);
       setSelectedSymbol(null);
-      setLoadError(error instanceof Error ? error.message : "Market heatmap unavailable");
+      setLoadError("Market heatmap temporarily unavailable");
     } finally {
       if (fetchGenRef.current === gen) setLoading(false);
     }
@@ -226,30 +292,36 @@ function MarketHeatmapPane({ focused, width, height }: PaneProps) {
     }
   });
 
-  usePaneFooter("market-heatmap", () => {
-    const updated = updatedLabel(lastUpdated);
-    return {
-      info: [
-        ...(selectedAsset ? [{
-          id: "selected",
-          parts: [
-            { text: selectedAsset.symbol, tone: "label" as const },
-            { text: formatCurrency(selectedAsset.price, selectedAsset.currency), tone: "value" as const },
-            { text: formatPercentRaw(selectedAsset.changePercent), tone: "value" as const, color: priceColor(selectedAsset.changePercent), bold: true },
-          ],
-        }] : []),
-        ...(updated ? [{
-          id: "updated",
-          parts: [
-            { text: "updated", tone: "label" as const },
-            { text: updated, tone: "value" as const },
-          ],
-        }] : []),
-        ...(loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
-        ...(loadError ? [{ id: "error", parts: [{ text: "error", tone: "muted" as const }] }] : []),
-      ],
-    };
-  }, [lastUpdated, loadError, loading, selectedAsset]);
+  const updated = useUpdatedAgo(lastUpdated);
+  useAutoRefresh(lastUpdated, refresh);
+
+  usePaneFooter("market-heatmap", () => ({
+    info: [
+      ...(selectedAsset ? [{
+        id: "selected",
+        parts: [
+          { text: selectedAsset.symbol, tone: "label" as const },
+          { text: formatCurrency(selectedAsset.price, selectedAsset.currency), tone: "value" as const },
+          {
+            text: selectedAsset.hasChange ? formatPercentRaw(selectedAsset.changePercent) : "—",
+            tone: "value" as const,
+            color: selectedAsset.hasChange ? priceColor(selectedAsset.changePercent) : undefined,
+            bold: true,
+          },
+        ],
+      }] : []),
+      ...(updated ? [{
+        id: "updated",
+        parts: [{ text: `updated ${updated}`, tone: "muted" as const }],
+      }] : []),
+      ...(loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
+      ...(loadError ? [{ id: "error", parts: [{ text: "error", tone: "muted" as const }] }] : []),
+      ...(feedStatus ? [{
+        id: "feed",
+        parts: [{ text: feedStatus, tone: feedStatus === "live" ? "value" as const : "muted" as const }],
+      }] : []),
+    ],
+  }), [feedStatus, loadError, loading, selectedAsset, updated]);
 
   const emptyStateTitle = loading
     ? "Loading market heatmap..."
@@ -273,7 +345,7 @@ function MarketHeatmapPane({ focused, width, height }: PaneProps) {
       </Box>
 
       <MetricTreemapSurface
-        items={items}
+        items={displayItems}
         width={width}
         height={chartHeight}
         selectedId={selectedSymbol}
@@ -299,6 +371,19 @@ export const marketHeatmapModule: PluginModule = {
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 110, height: 36 },
+      quickSettings: [LIVE_STREAMING_QUICK_SETTING],
+      settings: (context) => withLiveStreamingSetting({
+        title: "Market Heatmap Settings",
+        fields: [{
+          key: "universe",
+          label: "Universe",
+          type: "select",
+          options: MARKET_HEATMAP_UNIVERSES.map((universe) => ({
+            value: universe.id,
+            label: universe.label,
+          })),
+        }],
+      }, context.settings),
     },
   ],