gloomberb 0.10.4 → 0.11.0

package/src/plugins/builtin/futures/table.tsx

@@ -0,0 +1,241 @@
+import type { DataTableCell, DataTableColumn } from "../../../components";
+import { marketStateColor, marketStateLabel } from "../../../market-data/market/status";
+import { colors, priceColor } from "../../../theme/colors";
+import type { Quote } from "../../../types/financials";
+import { TextAttributes } from "../../../ui";
+import { formatCompact, formatNumber, formatPercentRaw } from "../../../utils/format";
+import { marketStatusDot, type BoardQuoteMap } from "../shared/use-quote-board";
+import { formatQuoteTime } from "../world-indices/table";
+import { tickDecimals, type FuturesContract } from "./contracts";
+import type { FuturesColumnId, FuturesTableRow } from "./model";
+
+export type FuturesColumn = DataTableColumn & { id: FuturesColumnId };
+
+export interface FuturesColumnDef {
+  id: FuturesColumnId;
+  label: string;
+  description: string;
+}
+
+export const FUTURES_COLUMN_DEFS: readonly FuturesColumnDef[] = [
+  { id: "status", label: "Session", description: "Live trading session indicator." },
+  { id: "code", label: "Symbol", description: "Exchange contract code." },
+  { id: "name", label: "Contract", description: "Contract name." },
+  { id: "price", label: "Last", description: "Last traded price." },
+  { id: "change", label: "Change", description: "Change on the session." },
+  { id: "changePercent", label: "Change %", description: "Percent change on the session." },
+  { id: "volume", label: "Volume", description: "Contracts traded on the session." },
+  { id: "prevClose", label: "Prev close", description: "Previous session close." },
+  { id: "time", label: "Time", description: "Local time of the last quote." },
+];
+
+const DEFAULT_FUTURES_COLUMN_IDS = FUTURES_COLUMN_DEFS.map((column) => column.id);
+
+/**
+ * Extra columns only earn their width once the board is wide enough to keep a
+ * readable contract name; a narrow pane drops them instead of clipping.
+ */
+const COLUMN_MIN_PANE_WIDTH: Partial<Record<FuturesColumnId, number>> = {
+  volume: 92,
+  prevClose: 104,
+  time: 114,
+};
+const SESSION_TEXT_MIN_WIDTH = 100;
+
+const COLUMN_WIDTHS: Record<Exclude<FuturesColumnId, "name">, number> = {
+  status: 1,
+  code: 5,
+  price: 12,
+  change: 10,
+  changePercent: 9,
+  volume: 9,
+  prevClose: 12,
+  // 5-char 24h time in an 8-wide column: the shared table's floating-pane width
+  // accounting runs a few cells long, and the slack keeps the value intact.
+  time: 8,
+};
+
+/** A colored dot needs a legend; the session word does not, so wide boards spell it out. */
+export function usesSessionText(width: number): boolean {
+  return width >= SESSION_TEXT_MIN_WIDTH;
+}
+
+function columnWidth(id: Exclude<FuturesColumnId, "name">, paneWidth: number): number {
+  if (id === "status") return usesSessionText(paneWidth) ? 9 : 1;
+  return COLUMN_WIDTHS[id];
+}
+
+export function createFuturesColumns(width: number, visibleIds?: readonly string[]): FuturesColumn[] {
+  const ids = resolveFuturesColumnIds(visibleIds)
+    .filter((id) => width >= (COLUMN_MIN_PANE_WIDTH[id] ?? 0));
+  const fixed = ids
+    .filter((id): id is Exclude<FuturesColumnId, "name"> => id !== "name")
+    .reduce((total, id) => total + columnWidth(id, width), 0);
+  // Leaves room for the pane border and scrollbar gutter; the name column grows
+  // back into any slack because it is the flexible one.
+  const nameWidth = Math.max(10, width - 6 - ids.length - fixed);
+
+  return ids.map((id) => {
+    const label = id === "status" && usesSessionText(width) ? "SESSION" : FUTURES_HEADER_LABELS[id];
+    // The leftover width lands on the contract name rather than being spread
+    // across the number columns, which is what left a dead zone after it.
+    if (id === "name") return { id, label, width: nameWidth, align: "left", flexGrow: 1 };
+    return {
+      id,
+      label,
+      width: columnWidth(id, width),
+      // TIME is left-aligned like the text columns: the shared table trims a few
+      // cells off the right edge of a floating pane, and a right-aligned value
+      // there would lose digits.
+      align: id === "code" || id === "status" || id === "time" ? "left" : "right",
+    };
+  });
+}
+
+const FUTURES_HEADER_LABELS: Record<FuturesColumnId, string> = {
+  status: "",
+  code: "SYM",
+  name: "CONTRACT",
+  price: "LAST",
+  change: "CHG",
+  changePercent: "CHG%",
+  volume: "VOL",
+  prevClose: "PREV",
+  time: "TIME",
+};
+
+/** Falls back to the full column set when the saved selection is empty or unknown. */
+export function resolveFuturesColumnIds(visibleIds?: readonly string[]): FuturesColumnId[] {
+  const resolved = (visibleIds ?? [])
+    .filter((id): id is FuturesColumnId => DEFAULT_FUTURES_COLUMN_IDS.includes(id as FuturesColumnId));
+  return resolved.length > 0 ? resolved : [...DEFAULT_FUTURES_COLUMN_IDS];
+}
+
+/**
+ * Futures are not quoted in dollars the way equities are: grains come back in
+ * US cents (`USX`), FX contracts run to six decimals, and Treasury contracts
+ * trade in fractions of a 32nd. Scale precision to the contract instead of
+ * rendering everything as a currency amount.
+ *
+ * The contract's own tick wins when the catalog knows it, so silver keeps its
+ * $0.005 increments instead of being rounded into two decimals with gold. The
+ * magnitude fallback only covers contracts without a declared tick.
+ *
+ * ponytail: rates render as decimals, not the 32nds tick notation traders
+ * quote (108'17). Add a tick formatter if rates users ask for it.
+ */
+function priceDecimals(price: number, contract: FuturesContract): number {
+  if (contract.tick) return tickDecimals(contract.tick);
+  if (contract.sector === "rates") return 4;
+  const magnitude = Math.abs(price);
+  if (magnitude >= 10) return 2;
+  if (magnitude >= 1) return 4;
+  return 6;
+}
+
+/**
+ * Trailing zeros are kept: a EUR contract at 1.1600 has to line up with the
+ * 1.3544 pound contract beside it, and with its own "+0.0002" change.
+ */
+function formatContractPrice(quote: Quote, contract: FuturesContract): string {
+  if (!Number.isFinite(quote.price)) return "—";
+  const text = formatNumber(quote.price, priceDecimals(quote.price, contract));
+  return quote.currency === "USX" ? `${text}c` : text;
+}
+
+/**
+ * The session change is scaled to the contract's price, not to its own
+ * magnitude, otherwise a four-tick move on an index future renders with six
+ * decimals next to a price showing two.
+ */
+function formatContractChange(quote: Quote, contract: FuturesContract): string {
+  if (!Number.isFinite(quote.change)) return "—";
+  const decimals = contract.tick || Number.isFinite(quote.price)
+    ? priceDecimals(quote.price, contract)
+    : 2;
+  const text = formatNumber(Math.abs(quote.change), decimals);
+  return `${quote.change >= 0 ? "+" : "-"}${text}`;
+}
+
+export function renderFuturesCell(
+  row: FuturesTableRow,
+  column: FuturesColumn,
+  rowState: { selected: boolean },
+  quotes: BoardQuoteMap,
+  options?: { sessionText?: boolean },
+): DataTableCell {
+  if (row.type === "header") return { text: "" };
+
+  const { contract } = row;
+  const state = quotes.get(contract.symbol);
+  const quote = state?.quote;
+  const selectedColor = rowState.selected ? colors.selectedText : undefined;
+  const dimmed = rowState.selected ? colors.selectedText : colors.textDim;
+  // One row must not mix a loading marker with a no-data marker.
+  const loadingCell = !quote && (state?.loading ?? true);
+
+  switch (column.id) {
+    case "status": {
+      if (loadingCell) return { text: "", color: dimmed };
+      if (options?.sessionText) {
+        const marketState = quote?.marketState;
+        return {
+          text: marketState ? marketStateLabel(marketState) : "—",
+          color: rowState.selected
+            ? colors.selectedText
+            : marketState ? marketStateColor(marketState) : colors.textDim,
+        };
+      }
+      const dot = marketStatusDot(quote?.marketState);
+      return { text: dot.char, color: rowState.selected ? colors.selectedText : dot.color };
+    }
+    case "code":
+      return {
+        text: contract.code,
+        color: selectedColor ?? colors.textBright,
+        attributes: TextAttributes.BOLD,
+      };
+    case "name":
+      return { text: contract.name, color: selectedColor };
+    case "price":
+      if (loadingCell) return { text: "…", color: dimmed };
+      if (!quote) return { text: "—", color: dimmed };
+      // A retained quote still beats a dash; dim it so stale is visible.
+      return {
+        text: formatContractPrice(quote, contract),
+        color: state?.stale ? dimmed : selectedColor,
+      };
+    case "change":
+      if (loadingCell) return { text: "…", color: dimmed };
+      if (!quote || !Number.isFinite(quote.change)) return { text: "—", color: dimmed };
+      return {
+        text: formatContractChange(quote, contract),
+        color: selectedColor ?? priceColor(quote.change),
+      };
+    case "changePercent":
+      if (loadingCell) return { text: "…", color: dimmed };
+      if (!quote || !Number.isFinite(quote.changePercent)) return { text: "—", color: dimmed };
+      return {
+        text: formatPercentRaw(quote.changePercent),
+        color: selectedColor ?? priceColor(quote.changePercent),
+      };
+    case "volume":
+      if (loadingCell) return { text: "…", color: dimmed };
+      if (!quote || quote.volume == null || !Number.isFinite(quote.volume)) {
+        return { text: "—", color: dimmed };
+      }
+      return { text: formatCompact(quote.volume), color: selectedColor ?? colors.textDim };
+    case "prevClose":
+      if (loadingCell) return { text: "…", color: dimmed };
+      if (!quote || quote.previousClose == null || !Number.isFinite(quote.previousClose)) {
+        return { text: "—", color: dimmed };
+      }
+      return {
+        text: formatContractPrice({ ...quote, price: quote.previousClose }, contract),
+        color: selectedColor ?? colors.textDim,
+      };
+    case "time":
+      if (loadingCell) return { text: "…", color: dimmed };
+      return { text: formatQuoteTime(quote?.lastUpdated), color: dimmed };
+  }
+}

package/src/plugins/builtin/fx-matrix/index.tsx

@@ -1,167 +1,193 @@
-import { Box, ScrollBox, Text } from "../../../ui";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { TextAttributes } from "../../../ui";
-import { useShortcut } from "../../../react/input";
-import { usePaneFooter } from "../../../components";
+import { useCallback, useMemo, useState } from "react";
+import {
+  DataTableView,
+  usePaneFooter,
+  type DataTableCell,
+  type DataTableColumn,
+  type DataTableKeyEvent,
+  type PaneFooterSegment,
+} from "../../../components";
+import { getSharedMarketDataCoordinator } from "../../../market-data/coordinator";
+import { useFxRatesMap } from "../../../market-data/hooks";
+import { usePaneSettingValue } from "../../../state/app/context";
+import { colors } from "../../../theme/colors";
 import type { PaneProps } from "../../../types/plugin";
-import type { PluginModule } from "../plugin-module";
-import { colors, blendHex } from "../../../theme/colors";
+import { TextAttributes } from "../../../ui";
+import { isPlainKey } from "../../../utils/keyboard";
 import { useAssetData } from "../../runtime";
-import { MAJOR_CURRENCIES, formatRate, type MajorCurrency } from "./pairs";
-
-const REFRESH_INTERVAL_MS = 60_000;
+import type { PluginModule } from "../plugin-module";
+import { useAutoRefresh, useUpdatedAgo } from "../shared/auto-refresh";
+import { MAJOR_CURRENCIES, formatRate, resolveCurrencies, type MajorCurrency } from "./pairs";
+
+const FX_MATRIX_PANE_ID = "fx-matrix";
+/** Stable identity: a fresh literal here would reload the board every render. */
+const NO_SAVED_CURRENCIES: string[] = [];
+const BASE_COLUMN_WIDTH = 5;
+const RATE_COLUMN_WIDTH = 10;
+
+interface FxStatus {
+  loading: number;
+  unavailable: number;
+  latestTs: number;
+}
 
-function formatAge(ms: number): string {
-  const secs = Math.floor(ms / 1000);
-  if (secs < 60) return `${secs}s ago`;
-  const mins = Math.floor(secs / 60);
-  if (mins < 60) return `${mins}m ago`;
-  return `${Math.floor(mins / 60)}h ago`;
+/**
+ * Per-currency load state for the footer and the cell placeholders. The rates
+ * map above already subscribes this pane to the same coordinator keys, so
+ * reading the entries here re-renders with it.
+ */
+function readFxStatus(currencies: readonly MajorCurrency[], rates: Map<string, number>): FxStatus {
+  const coordinator = getSharedMarketDataCoordinator();
+  let loading = 0;
+  let unavailable = 0;
+  let latestTs = 0;
+  for (const currency of currencies) {
+    if (currency === "USD") continue;
+    const entry = coordinator?.getFxEntry(currency) ?? null;
+    if (entry?.phase === "loading") loading += 1;
+    else if (!rates.has(currency)) unavailable += 1;
+    latestTs = Math.max(latestTs, entry?.fetchedAt ?? 0);
+  }
+  return { loading, unavailable, latestTs };
 }
 
 function FxMatrixPane({ focused, width, height }: PaneProps) {
   const dataProvider = useAssetData();
-  const [rates, setRates] = useState<Map<MajorCurrency, number>>(new Map());
-  const [loading, setLoading] = useState(true);
-  const [lastRefreshed, setLastRefreshed] = useState<number | null>(null);
-  const [now, setNow] = useState(Date.now());
-  const fetchGenRef = useRef(0);
-
-  const fetchRates = useCallback(async () => {
-    if (!dataProvider) return;
-
-    fetchGenRef.current += 1;
-    const gen = fetchGenRef.current;
-
-    try {
-      const results = await Promise.allSettled(
-        MAJOR_CURRENCIES.map(async (currency) => {
-          if (currency === "USD") return { currency, rate: 1 };
-          const rate = await dataProvider.getExchangeRate(currency);
-          return { currency, rate };
-        }),
-      );
-
-      if (fetchGenRef.current !== gen) return;
-
-      const newRates = new Map<MajorCurrency, number>();
-      for (const result of results) {
-        if (result.status === "fulfilled") {
-          newRates.set(result.value.currency as MajorCurrency, result.value.rate);
-        }
-      }
-
-      setRates(newRates);
-      setLastRefreshed(Date.now());
-    } finally {
-      if (fetchGenRef.current === gen) setLoading(false);
+  const [savedCurrencies] = usePaneSettingValue<string[]>("currencies", NO_SAVED_CURRENCIES);
+  const currencies = useMemo(() => resolveCurrencies(savedCurrencies), [savedCurrencies]);
+  const [selectedCurrency, setSelectedCurrency] = useState<string | null>(null);
+
+  const rates = useFxRatesMap(currencies);
+  const status = useMemo(() => readFxStatus(currencies, rates), [currencies, rates]);
+
+  const refresh = useCallback(() => {
+    const coordinator = getSharedMarketDataCoordinator();
+    if (!coordinator) return;
+    // A rate that is still fresh is left alone by the coordinator; a failed one
+    // is retried, which is the case that matters here.
+    for (const currency of currencies) {
+      if (currency === "USD") continue;
+      void coordinator.loadFxRate(currency).catch(() => {});
     }
-  }, [dataProvider]);
-
-  useEffect(() => {
-    fetchRates();
-    const interval = setInterval(fetchRates, REFRESH_INTERVAL_MS);
-    return () => clearInterval(interval);
-  }, [fetchRates]);
-
-  useEffect(() => {
-    const interval = setInterval(() => setNow(Date.now()), 5_000);
-    return () => clearInterval(interval);
-  }, []);
-
-  useShortcut((event) => {
-    if (!focused) return;
-    if (event.name === "r") {
-      fetchRates();
+  }, [currencies]);
+
+  useAutoRefresh(status.latestTs || null, refresh);
+
+  const columns = useMemo<DataTableColumn[]>(() => [
+    { id: "base", label: "", width: BASE_COLUMN_WIDTH, align: "left" },
+    ...currencies.map((currency) => ({
+      id: currency,
+      label: currency,
+      width: RATE_COLUMN_WIDTH,
+      align: "right" as const,
+    })),
+  ], [currencies]);
+
+  const renderCell = useCallback((
+    row: MajorCurrency,
+    column: DataTableColumn,
+    _index: number,
+    rowState: { selected: boolean },
+  ): DataTableCell => {
+    const selectedColor = rowState.selected ? colors.selectedText : undefined;
+    if (column.id === "base") {
+      return {
+        text: row,
+        color: selectedColor ?? colors.textBright,
+        attributes: TextAttributes.BOLD,
+      };
     }
-  });
 
-  const headerBg = blendHex(colors.bg, colors.border, 0.3);
-
-  function crossRate(row: MajorCurrency, col: MajorCurrency): number | null {
-    if (row === col) return 1;
-    const rowUsd = rates.get(row);
-    const colUsd = rates.get(col);
-    if (rowUsd == null || colUsd == null) return null;
-    return rowUsd / colUsd;
-  }
-
-  const ageText = lastRefreshed ? `updated ${formatAge(now - lastRefreshed)}` : loading ? "loading…" : "";
-
-  usePaneFooter("fx-matrix", () => ({
-    info: ageText ? [{ id: "updated", parts: [{ text: ageText, tone: loading ? "muted" : "value" }] }] : [],
-    hints: [{ id: "refresh", key: "r", label: "efresh", onPress: fetchRates }],
-  }), [ageText, fetchRates, loading]);
-
-  // Row header: just the 3-letter code, no emoji (keeps width predictable)
-  // Rates use flexGrow so they fill available space dynamically
+    const quoteCurrency = column.id as MajorCurrency;
+    const dimmed = selectedColor ?? colors.textDim;
+    if (row === quoteCurrency) return { text: formatRate(1, quoteCurrency), color: dimmed };
+
+    const base = rates.get(row);
+    const quote = rates.get(quoteCurrency);
+    if (base == null || quote == null) {
+      // A missing leg must never fall back to parity: 1.0000 on EUR/JPY reads
+      // as a real rate.
+      const pending = status.loading > 0;
+      return { text: pending ? "…" : "—", color: dimmed };
+    }
+    return { text: formatRate(base / quote, quoteCurrency), color: selectedColor ?? colors.text };
+  }, [rates, status.loading]);
+
+  const handleKeyDown = useCallback((event: DataTableKeyEvent) => {
+    if (!isPlainKey(event, "r")) return false;
+    event.preventDefault?.();
+    refresh();
+    return true;
+  }, [refresh]);
+
+  const updatedAgo = useUpdatedAgo(status.latestTs || null);
+
+  usePaneFooter(FX_MATRIX_PANE_ID, () => {
+    const info: PaneFooterSegment[] = [];
+    if (status.loading > 0) info.push({ id: "loading", parts: [{ text: "loading", tone: "muted" }] });
+    if (status.unavailable > 0) {
+      info.push({
+        id: "unavailable",
+        parts: [{ text: `${status.unavailable} unavailable`, tone: "warning" }],
+      });
+    }
+    if (updatedAgo) info.push({ id: "updated", parts: [{ text: `updated ${updatedAgo}`, tone: "muted" }] });
+    return { info };
+  }, [status.loading, status.unavailable, updatedAgo]);
 
   return (
-    <Box flexDirection="column" width={width} height={height}>
-      {/* Column header row */}
-      <Box flexDirection="row" paddingX={1} height={1} backgroundColor={headerBg}>
-        <Box width={5} flexShrink={0} />
-        {MAJOR_CURRENCIES.map((col) => (
-          <Box key={col} flexGrow={1} justifyContent="flex-end" paddingRight={1}>
-            <Text fg={colors.textDim} attributes={TextAttributes.BOLD}>{col}</Text>
-          </Box>
-        ))}
-      </Box>
-
-      {/* Matrix rows */}
-      <ScrollBox flexGrow={1} scrollY focusable={false}>
-        <Box flexDirection="column">
-          {loading && rates.size === 0 ? (
-            <Box paddingX={1} paddingY={1}>
-              <Text fg={colors.textMuted}>Fetching rates…</Text>
-            </Box>
-          ) : (
-            MAJOR_CURRENCIES.map((row) => (
-              <Box key={row} flexDirection="row" paddingX={1}>
-                <Box width={5} flexShrink={0}>
-                  <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{row}</Text>
-                </Box>
-                {MAJOR_CURRENCIES.map((col) => {
-                  const rate = crossRate(row, col);
-                  const isDiag = row === col;
-                  return (
-                    <Box key={col} flexGrow={1} justifyContent="flex-end" paddingRight={1}>
-                      {rate == null ? (
-                        <Text fg={colors.textDim}>—</Text>
-                      ) : (
-                        <Text fg={isDiag ? colors.textDim : colors.text}>
-                          {formatRate(rate, col)}
-                        </Text>
-                      )}
-                    </Box>
-                  );
-                })}
-              </Box>
-            ))
-          )}
-        </Box>
-      </ScrollBox>
-    </Box>
+    <DataTableView<MajorCurrency>
+      focused={focused}
+      selection={{
+        kind: "id",
+        selectedId: selectedCurrency ?? currencies[0] ?? null,
+        getId: (row) => row,
+        onChange: (id) => setSelectedCurrency(id),
+      }}
+      rootWidth={width}
+      rootHeight={height}
+      columns={columns}
+      items={dataProvider ? currencies : []}
+      sortColumnId={null}
+      sortDirection="asc"
+      onHeaderClick={() => {}}
+      getItemKey={(row) => row}
+      renderCell={renderCell}
+      onRootKeyDown={handleKeyDown}
+      emptyStateTitle="No market data provider connected."
+    />
   );
 }
 
 export const fxMatrixModule: PluginModule = {
   panes: [
     {
-      id: "fx-matrix",
+      id: FX_MATRIX_PANE_ID,
       name: "FX Cross Rates",
       icon: "F",
       component: FxMatrixPane,
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 105, height: 14 },
+      settings: (context) => ({
+        title: "FX Cross Rates Settings",
+        values: {
+          currencies: resolveCurrencies(context.settings.currencies as string[] | undefined),
+        },
+        fields: [{
+          key: "currencies",
+          label: "Currencies",
+          type: "ordered-multi-select",
+          options: MAJOR_CURRENCIES.map((currency) => ({ value: currency, label: currency })),
+        }],
+      }),
     },
   ],
 
   paneTemplates: [
     {
       id: "fx-matrix-pane",
-      paneId: "fx-matrix",
+      paneId: FX_MATRIX_PANE_ID,
       label: "FX Cross Rates",
       description: "Currency cross-rate matrix for major FX pairs.",
       keywords: ["fx", "forex", "currency", "exchange", "rates", "cross", "matrix"],

package/src/plugins/builtin/fx-matrix/pairs.ts

@@ -3,7 +3,18 @@ export const MAJOR_CURRENCIES = ["USD", "EUR", "GBP", "JPY", "CHF", "CAD", "AUD"
 export type MajorCurrency = typeof MAJOR_CURRENCIES[number];
 
 /** Format rate with appropriate precision — JPY pairs get 2 decimals, others get 4 */
-export function formatRate(rate: number, toCurrency: MajorCurrency): string {
+export function formatRate(rate: number, toCurrency: string): string {
   const decimals = toCurrency === "JPY" ? 2 : 4;
   return rate.toFixed(decimals);
 }
+
+/**
+ * The saved currency selection, falling back to the majors when it is empty or
+ * holds codes this board does not carry.
+ */
+export function resolveCurrencies(saved?: readonly string[]): MajorCurrency[] {
+  const resolved = (saved ?? []).filter(
+    (code): code is MajorCurrency => MAJOR_CURRENCIES.includes(code as MajorCurrency),
+  );
+  return resolved.length > 0 ? resolved : [...MAJOR_CURRENCIES];
+}