gloomberb 0.15.1 → 0.15.3

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

@@ -1,23 +1,27 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { DataTableView, PaneStatusBody, StatGrid, statGridRows, Tabs, usePaneFooter, usePaneHeaderTabs, usePaneNoticeFooter,
-  type DataTableColumn, type StatItem } from "../../../components";
+import { ChartTableHeader, CurveSurface, curveGhostColors, DataTableView, formatPercentAxis, PaneStatusBody, useChartTableSelection,
+  usePaneFooter, usePaneNoticeFooter, usePaneTabs, type DataTableColumn, type StatItem } from "../../../components";
+import { curveStrip, curveSurfaceMinRows } from "../../../components/chart/curve";
 import { useAsyncResource } from "../../../react/async-resource";
-import { useShortcut } from "../../../react/input";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
 import { usePaneSettingValue, usePluginPaneState } from "../../../public/react";
+import { priceColor } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
 import type { PaneProps } from "../../../types/plugin";
+import { formatPercentileRank } from "../../../utils/format";
 import { Box, Text } from "../../../ui";
-import { isPlainKey } from "../../../utils/keyboard";
+import { nextHeaderSort, type SortPreference } from "../../../utils/sort-values";
 import { getSharedMarketDataCoordinator } from "../../../market-data/coordinator";
 import { buildQuoteKey, resolveEntryData } from "../../../market-data/selectors";
 import { useLiveQuoteEntries } from "../../../state/hooks/quote-streaming";
 import type { QuoteSubscriptionTarget } from "../../../types/data-provider";
-import { useAutoRefresh } from "../shared/auto-refresh";
-import { useLiveStreamingSetting } from "../shared/live-streaming";
+import { useAutoRefresh } from "../../../react/auto-refresh";
+import { useLiveStreamingSetting } from "../../../state/hooks/live-streaming";
 import { useLiveSessionRefresh, useThrottledValue } from "../shared/volatility/live-session";
 import { getCachedVolatilityData, loadVolatilityData, type VolatilityLoadResult } from "./client";
-import { boardOrder, buildVolatilityData, IMPLIED_CORRELATION_ROWS, VOLATILITY_CURVE_INDICES, VOLATILITY_INDICES, withLiveVolatilityLevels, type VolatilityBoardRow, type VolatilityIndexId, type VolatilityLiveLevel } from "./model";
-import { VolatilityCurveChart, VolatilityHistoryChart, VolatilityIndexHistoryChart } from "./charts";
+import { boardOrder, buildVolatilityData, IMPLIED_CORRELATION_ROWS, VOLATILITY_CURVE_INDICES, VOLATILITY_INDICES, volatilityCurveLookbacks, withLiveVolatilityLevels, type VolatilityBoardRow, type VolatilityIndexId, type VolatilityLiveLevel } from "./model";
+import { VolatilityHistoryChart, VolatilityIndexHistoryChart } from "./charts";
+import { volatilityCurveRows, volatilityCurveSeries, type VolatilityCurveRow } from "./chart-model";
 import { useVolatilityEvidence } from "./evidence";
 
 /** Streamed index levels rebuild the board at most this often. */
@@ -34,9 +38,16 @@ const BOARD_COLUMNS: DataTableColumn[] = [
   { id: "date", label: "As of", width: 12, align: "left" },
 ];
 const CURVE_COLUMNS: DataTableColumn[] = [
-  { id: "tenor", label: "Tenor", width: 12, align: "left" },
-  { id: "value", label: "IV %", width: 12, align: "right" },
+  { id: "tenor", label: "Tenor", width: 7, align: "left" },
+  { id: "value", label: "IV", width: 8, align: "right" },
+  { id: "change1w", label: "1W chg", width: 8, align: "right" },
+  { id: "change1m", label: "1M chg", width: 8, align: "right" },
 ];
+const CURVE_CAPTION = "IV % by tenor";
+const curveRowKey = (row: VolatilityCurveRow) => row.id;
+// Left and Right step along the tenors, the way the curve reads.
+const curveRowPosition = (row: VolatilityCurveRow) => new Date(row.days * 86_400_000);
+const formatIv = (value: number) => value.toFixed(2);
 const number = (value: number | null | undefined, signed = false) => value == null || !Number.isFinite(value)
   ? "--" : `${signed && value > 0 ? "+" : ""}${value.toFixed(2)}`;
 const percentile = (value: number | null | undefined) => value == null || !Number.isFinite(value) ? "--" : value.toFixed(0);
@@ -44,10 +55,12 @@ const TERM_STATE_LABELS: Record<string, string> = { normal: "Contango", inverted
 
 export function VolatilityPane({ focused, width, height }: PaneProps) {
   const colors = useThemeColors();
+  // By the sign the two-decimal text shows, so a move that rounds to zero stays neutral.
+  const signColor = (value: number) => priceColor(Number(value.toFixed(2)), colors);
   const [initialTab] = usePaneSettingValue("initialTab", "curve");
   const [tab, setTab] = usePluginPaneState("activeTabId", initialTab);
   const [selectedId, setSelectedId] = usePluginPaneState<string | null>("selectedIndexId", "vix");
-  const [sort, setSort] = useState<{ id: string | null; direction: "asc" | "desc" }>({ id: null, direction: "asc" });
+  const [sort, setSort] = useState<SortPreference<string>>({ columnId: null, direction: "asc" });
   const [partial, setPartial] = useState<VolatilityLoadResult | null>(null);
   const controller = useRef<AbortController | null>(null);
   const request = useCallback(async (force: boolean) => {
@@ -105,8 +118,8 @@ export function VolatilityPane({ focused, width, height }: PaneProps) {
   const loading = !!result && result.loaded < result.total;
   const rows = useMemo(() => {
     const ordered = boardOrder(data?.board ?? []).filter((row) => row.value != null || (loading && !row.error));
-    if (!sort.id) return ordered;
-    const key = sort.id as keyof VolatilityBoardRow;
+    if (!sort.columnId) return ordered;
+    const key = sort.columnId as keyof VolatilityBoardRow;
     return ordered.sort((left, right) => {
       const a = left[key], b = right[key];
       if (a == null) return b == null ? 0 : 1;
@@ -123,11 +136,9 @@ export function VolatilityPane({ focused, width, height }: PaneProps) {
   const cycleTab = () => setTab(TABS[(TABS.findIndex((entry) => entry.value === tab) + 1) % TABS.length]!.value);
   // One binding for every tab and for the loading and failed bodies, where no
   // table is mounted; the footer binds the `v` hint.
-  useShortcut((event) => {
-    if (!isPlainKey(event, "r")) return;
-    event.preventDefault();
+  usePaneRefreshKey(() => {
     if (!resource.loading) void resource.reload();
-  }, { enabled: focused });
+  }, { focused });
   const asOf = tab === "history" ? data?.fred.termDate : tab === "board" ? selected?.date : data?.curve.date;
   // A level from the stream is labelled intraday with its time; closes keep their date.
   const intraday = (id: VolatilityIndexId | undefined, date: string | null | undefined) => {
@@ -146,43 +157,64 @@ export function VolatilityPane({ focused, width, height }: PaneProps) {
     ...(data ? [{ id: "basis", parts: [{ text: observationBasis, tone: "muted" as const }] }] : []),
     ...(asOf ? [{ id: "date", parts: [{ text: observationTime && (tab === "board" || liveObservation) ? `${observationTime.slice(0, 16).replace("T", " ")} UTC` : asOf, tone: "muted" as const }] }] : []),
   ], hints: [{ id: "view", key: "v", label: "iew", onPress: cycleTab }] }), [resource.loading, result?.stale, data, asOf, observationTime, observationBasis, tab, liveObservation]);
-  const tabsInHeader = usePaneHeaderTabs({ tabs: TABS, activeValue: tab, onSelect: setTab, focused });
-  const tabRows = tabsInHeader ? 0 : 1;
+  const { strip: tabStrip, rows: tabRows } = usePaneTabs({ tabs: TABS, activeValue: tab, onSelect: setTab, focused, dense: true });
   const contentHeight = Math.max(5, height - tabRows);
   // The board needs only its rows; the selected index history takes the rest.
   const boardHeight = Math.max(5, Math.min(rows.length + 2, Math.floor(contentHeight * 0.62)));
   const curve = data?.curve;
-  // The tenor table needs only its rows; the curve chart takes the rest.
-  const curveTableHeight = Math.min(Math.max(2, (curve?.points.length ?? 0) + 1), 8, Math.max(4, Math.floor(contentHeight * 0.3)));
+  // The week- and month-back curves come from the histories the board already loaded.
+  const lookbacks = useMemo(() => data ? volatilityCurveLookbacks(data) : [], [data]);
+  const curveRows = useMemo(() => curve ? volatilityCurveRows(curve, lookbacks) : [], [curve, lookbacks]);
+  const curveSeries = useMemo(() => curve ? volatilityCurveSeries(curve, lookbacks, {
+    current: curve.termState === "inverted" ? colors.negative : colors.positive, ghosts: curveGhostColors(colors),
+  }) : [], [colors, curve, lookbacks]);
+  const curveSelectedId = curveRows.some((row) => row.id === selectedId) ? selectedId : curveRows[0]?.id ?? null;
+  useChartTableSelection({ rows: curveRows, getId: curveRowKey, getDate: curveRowPosition, selectedId: curveSelectedId,
+    onSelect: setSelectedId, focused, enabled: tab === "curve" });
+  const curveHeight = Math.max(1, height - tabRows);
+  // The strip's label shares its row with the curve's shape and the point. A
+  // curve with fewer than two closes has neither, so the tenors take the band.
+  const curveBandStrip = curveStrip(curveSeries, formatIv, { caption: "IV %", selectedPointId: curveSelectedId });
   const curveStats: StatItem[] = curve ? [
     { id: "structure", label: "Structure", value: TERM_STATE_LABELS[curve.termState] ?? curve.termState,
       tone: curve.termState === "inverted" ? "warning" : curve.termState === "normal" ? "positive" : "neutral" },
     { id: "ratio", label: "3M/30D", value: number(curve.ratio),
-      detail: curve.ratio == null ? undefined : `${percentile(curve.ratioPercentile1y)} pctl 1Y` },
+      detail: curve.ratio == null ? undefined : formatPercentileRank(curve.ratioPercentile1y, "1Y") },
     { id: "spread", label: "Spread", value: `${number(curve.slope, true)} pts` },
   ] : [];
   const ready = !!data && (data.board.some((row) => row.value != null) || data.fred.metrics.some((metric) => metric.value != null));
   return <Box width={width} height={height} flexDirection="column" overflow="hidden">
-    {!tabsInHeader && <Tabs tabs={TABS} activeValue={tab} onSelect={setTab} variant="underline" dense focused={focused} />}
+    {tabStrip}
     <PaneStatusBody subject="volatility" loading={resource.loading && !ready} error={!ready ? resource.error ?? result?.errors[0] ?? null : null} empty={!resource.loading && !ready}>
-      {data && tab === "curve" && <>
-        <StatGrid items={curveStats} width={width} />
-        <VolatilityCurveChart curve={data.curve} width={width} height={Math.max(4, contentHeight - curveTableHeight - statGridRows(curveStats, width))} focused={focused} />
-        <DataTableView focused={focused} columns={CURVE_COLUMNS} items={data.curve.points} rootWidth={width} rootHeight={curveTableHeight}
-          emptyStateTitle="VIX curve unavailable." getItemKey={(row) => row.id} selection={{ kind: "id", selectedId, getId: (row) => row.id, onChange: setSelectedId }}
-          onActivate={(row) => { setSelectedId(row.id); setTab("board"); }}
-          sortColumnId={null} sortDirection="asc"
-          getExportMetadata={() => [["as of", data.curve.date], ["source", data.curve.source], ["units", "IV percent"], ["warnings", ...notices]]}
-          renderCell={(row, column) => ({ text: column.id === "value" ? number(row.value) : String(row.tenor),
-            color: row.value == null ? colors.textMuted : column.id === "value" ? colors.warning : colors.text })} />
-      </>}
+      {data && tab === "curve" && <DataTableView<VolatilityCurveRow> focused={focused} columns={CURVE_COLUMNS} items={curveRows}
+        rootWidth={width} rootHeight={curveHeight}
+        emptyStateTitle="VIX curve unavailable." getItemKey={curveRowKey}
+        selection={{ kind: "id", selectedId: curveSelectedId, getId: curveRowKey, onChange: setSelectedId }}
+        onActivate={(row) => { setSelectedId(row.id); setTab("board"); }}
+        sortColumnId={null} sortDirection="asc"
+        getExportMetadata={() => [["as of", data.curve.date], ["source", data.curve.source], ["units", "IV percent"], ["warnings", ...notices]]}
+        renderCell={(row, column) => {
+          if (column.id === "tenor") return { text: row.tenor, color: row.value == null ? colors.textMuted : colors.text };
+          if (column.id === "value") return { text: number(row.value), color: row.value == null ? colors.textMuted : colors.warning };
+          const change = column.id === "change1w" ? row.change1w : row.change1m;
+          // Up and down colors, as on every board; the board's 1Y percentile says whether vol is high.
+          return { text: number(change, true), color: change == null ? colors.textMuted : signColor(change) };
+        }}
+        rootBefore={<ChartTableHeader width={width} height={curveHeight} tableRows={curveRows.length} figures={curveStats} chart={curveBandStrip ? {
+          render: (size) => <CurveSurface series={curveSeries} width={size.width} height={size.height} display="chart"
+            caption={CURVE_CAPTION} xScale="log" formatValue={formatIv} formatAxisValue={formatPercentAxis}
+            selectedPointId={curveSelectedId} onSelectedPointChange={(id) => setSelectedId(id)} />,
+          minRows: curveSurfaceMinRows({ series: curveSeries, width, caption: CURVE_CAPTION }),
+          strip: curveBandStrip,
+        } : null} />} />}
       {data && tab === "history" && <VolatilityHistoryChart fred={data.fred} width={width} height={contentHeight} focused={focused} />}
       {data && tab === "board" && <>
         <DataTableView<VolatilityBoardRow> focused={focused} columns={BOARD_COLUMNS} items={rows} rootWidth={width} rootHeight={boardHeight}
           emptyStateTitle="Volatility indices unavailable." getItemKey={(row) => row.id} selection={{ kind: "id", selectedId: selected?.id ?? null, getId: (row) => row.id, onChange: setSelectedId }}
           onActivate={(row) => setSelectedId(row.id)} sortable
-          sortColumnId={sort.id} sortDirection={sort.direction} onHeaderClick={(id) => setSort(id === sort.id && sort.direction === "desc" ? { id: null, direction: "asc" } : { id, direction: id === sort.id ? "desc" : "asc" })}
-          onSortChange={(id, direction) => setSort({ id, direction })}
+          sortColumnId={sort.columnId} sortDirection={sort.direction}
+          onHeaderClick={(id) => setSort((current) => nextHeaderSort(current, id, { resetTo: { columnId: null, direction: "asc" } }))}
+          onSortChange={(columnId, direction) => setSort({ columnId, direction })}
           getExportMetadata={() => [["basis", "daily history; sparse observations retain their timestamp"], ["percentile", "one year, at least 200 observations and 300 calendar days"], ["warnings", ...notices]]}
           renderCell={(row, column) => ({ text: column.id === "id" ? row.id.toUpperCase()
             : column.id === "label" ? row.label
@@ -190,7 +222,9 @@ export function VolatilityPane({ focused, width, height }: PaneProps) {
             : ["value", "change1d", "change1dPercent"].includes(column.id)
               ? number(row[column.id as "value" | "change1d" | "change1dPercent"], column.id.startsWith("change"))
               : String(row.date ?? "--"),
-            color: column.id.startsWith("change") && row.change1d != null ? row.change1d > 0 ? colors.warning : row.change1d < 0 ? colors.positive : colors.text
+            // Changes take the sign; vol high for its year is the warning a rise used to carry.
+            color: column.id.startsWith("change") && row.change1d != null ? signColor(row.change1d)
+              : column.id === "percentile1y" && row.percentile1y != null && Math.round(row.percentile1y) >= 80 ? colors.warning
               : row.value == null ? colors.textMuted : colors.text })} />
         {selected && <>
           <Box height={1} paddingX={1}><Text fg={colors.textDim}>{`${selected.id.toUpperCase() === selected.label ? selected.label : `${selected.id.toUpperCase()} · ${selected.label}`} · ${selected.unit} · ${selected.date ?? "--"}`}</Text></Box>

package/src/plugins/builtin/world-indices/client.ts

@@ -1,16 +1,13 @@
 import type { DataProvider } from "../../../types/data-provider";
 import type { Quote } from "../../../types/financials";
 import type { IndexEntry } from "./indices";
+import { errorMessage } from "../../../utils/errors";
 
 export interface WorldIndexQuoteResult {
   quotes: Map<string, Quote | null>;
   errors: string[];
 }
 
-function errorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : String(error);
-}
-
 export async function loadWorldIndexQuotes(
   entries: readonly IndexEntry[],
   provider: DataProvider,

package/src/plugins/builtin/world-indices/footer.ts

@@ -1,40 +1,17 @@
 import { usePaneFooter, type PaneFooterSegment } from "../../../components";
-import { isPlainKey } from "../../../utils/keyboard";
-import { useShortcut } from "../../../react/input";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
 import {
+  boardErrorMessage,
   quoteBoardFooterInfo,
   quoteBoardStatus,
   type BoardQuoteMap,
 } from "../shared/use-quote-board";
 
-const ERROR_MESSAGE_MAX_LENGTH = 48;
-
-/** The reason a board is empty, taken from the per-symbol errors the board records. */
-export function boardErrorMessage(quotes: BoardQuoteMap): string | null {
-  let total = 0;
-  let unavailable = 0;
-  let message: string | null = null;
-  for (const state of quotes.values()) {
-    total += 1;
-    if (state.quote || state.loading) continue;
-    unavailable += 1;
-    message ??= state.error;
-  }
-  if (total === 0 || unavailable < total || !message) return null;
-  return message.length > ERROR_MESSAGE_MAX_LENGTH
-    ? `${message.slice(0, ERROR_MESSAGE_MAX_LENGTH - 1)}…`
-    : message;
-}
-
 export function useWorldIndicesFooter(quotes: BoardQuoteMap, onRefresh: () => void, focused: boolean) {
   const status = quoteBoardStatus(quotes);
   const errorMessage = boardErrorMessage(quotes);
 
-  useShortcut((event) => {
-    if (!focused || !isPlainKey(event, "r")) return;
-    event.preventDefault?.();
-    onRefresh();
-  }, { enabled: focused });
+  usePaneRefreshKey(onRefresh, { focused });
 
   usePaneFooter(
     "world-indices",

package/src/plugins/builtin/world-indices/index.tsx

@@ -5,7 +5,8 @@ import type { PluginModule } from "../plugin-module";
 import { TICKER_RESEARCH_PANE_ID } from "../../../types/config";
 import { usePaneSettingValue } from "../../../state/app/context";
 import { useAssetData, usePluginTickerActions } from "../../runtime";
-import { useLiveStreamingSetting } from "../shared/live-streaming";
+import { useLiveStreamingSetting } from "../../../state/hooks/live-streaming";
+import { nextHeaderSort } from "../../../utils/sort-values";
 import { useQuoteBoard, useVisibleBoardSymbols } from "../shared/use-quote-board";
 import { WORLD_INDICES, REGION_LABELS, getIndicesByRegion, resolveIndexEntries } from "./indices";
 import { useWorldIndicesFooter } from "./footer";
@@ -14,7 +15,7 @@ import { worldIndicesHeadless } from "./headless";
 import {
   buildFlatRows,
   DEFAULT_SORT_PREFERENCE,
-  nextSortPreference,
+  type WorldIndexColumnId,
   type WorldIndexSortPreference,
   type WorldIndexTableRow,
 } from "./model";
@@ -25,7 +26,6 @@ import {
   type WorldIndexColumn,
 } from "./table";
 
-export { worldIndicesHeadless } from "./headless";
 
 /** Stable identity: a fresh literal here would remount the board every render. */
 const NO_SAVED_SYMBOLS: string[] = [];
@@ -93,7 +93,9 @@ function WorldIndicesPane({ focused, width, height }: PaneProps) {
   }, [flatRows]);
 
   const handleHeaderClick = useCallback((columnId: string) => {
-    setSortPreference((current) => nextSortPreference(current, columnId));
+    setSortPreference((current) => nextHeaderSort(current, columnId as WorldIndexColumnId, {
+      resetTo: DEFAULT_SORT_PREFERENCE,
+    }));
   }, []);
 
   const columns = useMemo<WorldIndexColumn[]>(() => createWorldIndexColumns(width), [width]);
@@ -102,11 +104,7 @@ function WorldIndicesPane({ focused, width, height }: PaneProps) {
   const renderCell = useCallback((
     row: WorldIndexTableRow,
     column: WorldIndexColumn,
-    _index: number,
-    rowState: { selected: boolean },
-  ) => {
-    return renderWorldIndexCell(row, column, rowState, quotes, { sessionText });
-  }, [quotes, sessionText]);
+  ) => renderWorldIndexCell(row, column, quotes, { sessionText }), [quotes, sessionText]);
 
   useWorldIndicesFooter(quotes, refresh, focused);
 
@@ -137,6 +135,7 @@ function WorldIndicesPane({ focused, width, height }: PaneProps) {
       onVisibleRangeChange={setVisibleRange}
       renderSectionHeader={renderRegionHeader}
       renderCell={renderCell}
+      selectedTextOverridesCellColor
       emptyStateTitle="No market data provider connected."
     />
   );

package/src/plugins/builtin/world-indices/model.ts

@@ -90,17 +90,3 @@ export function buildFlatRows(
   }
   return rows;
 }
-
-export function nextSortPreference(
-  current: WorldIndexSortPreference,
-  columnId: string,
-): WorldIndexSortPreference {
-  const typedColumnId = columnId as WorldIndexColumnId;
-  if (current.columnId !== typedColumnId) {
-    return { columnId: typedColumnId, direction: "asc" };
-  }
-  if (current.direction === "asc") {
-    return { columnId: typedColumnId, direction: "desc" };
-  }
-  return DEFAULT_SORT_PREFERENCE;
-}

package/src/plugins/builtin/world-indices/table.tsx

@@ -1,9 +1,9 @@
 import type { DataTableCell, DataTableColumn } from "../../../components";
-import { marketStateColor, marketStateLabel } from "../../../market-data/market/status";
-import { colors, priceColor } from "../../../theme/colors";
+import { colors } from "../../../theme/colors";
+import type { Quote } from "../../../types/financials";
 import { TextAttributes } from "../../../ui";
-import { formatNumber, formatPercentRaw } from "../../../utils/format";
-import { marketStatusDot, type BoardQuoteMap } from "../shared/use-quote-board";
+import { formatNumber } from "../../../utils/format";
+import { renderQuoteBoardCell, type BoardQuoteMap } from "../shared/use-quote-board";
 import type {
   WorldIndexColumnId,
   WorldIndexTableRow,
@@ -62,91 +62,33 @@ export function createWorldIndexColumns(width: number): WorldIndexColumn[] {
   ];
 }
 
-const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-
-/**
- * 24-hour UTC, like the other panes' TIME UTC columns, so the cell stays 5 wide
- * and never clips. A quote from an earlier UTC day shows its date instead, so a
- * closed market's last print is not read as a time today.
- */
-export function formatQuoteTime(lastUpdated: number | undefined, now = Date.now()): string {
-  if (!lastUpdated) return "—";
-  const date = new Date(lastUpdated);
-  const today = new Date(now);
-  if (date.getUTCFullYear() !== today.getUTCFullYear() || date.getUTCMonth() !== today.getUTCMonth()
-    || date.getUTCDate() !== today.getUTCDate()) {
-    return `${MONTHS[date.getUTCMonth()]} ${date.getUTCDate()}`;
-  }
-  return `${String(date.getUTCHours()).padStart(2, "0")}:${String(date.getUTCMinutes()).padStart(2, "0")}`;
-}
+const formatIndexPrice = (quote: Quote) => formatNumber(quote.price, 2);
+const formatIndexChange = (quote: Quote) =>
+  `${quote.change >= 0 ? "+" : "-"}${formatNumber(Math.abs(quote.change), 2)}`;
 
 export function renderWorldIndexCell(
   row: WorldIndexTableRow,
   column: WorldIndexColumn,
-  rowState: { selected: boolean },
   quotes: BoardQuoteMap,
   options?: { sessionText?: boolean },
 ): DataTableCell {
   if (row.type === "header") return { text: "" };
 
   const { entry } = row;
-  const state = quotes.get(entry.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 "symbol":
       return {
         text: entry.shortName,
-        color: selectedColor ?? colors.textBright,
+        color: colors.textBright,
         attributes: TextAttributes.BOLD,
       };
     case "name":
-      return {
-        text: entry.name,
-        color: selectedColor,
-      };
-    case "price":
-      if (loadingCell) return { text: "…", color: dimmed };
-      if (!quote || !Number.isFinite(quote.price)) return { text: "—", color: dimmed };
-      // A retained quote still beats a dash; dim it so stale is visible.
-      return {
-        text: formatNumber(quote.price, 2),
-        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: `${quote.change >= 0 ? "+" : "-"}${formatNumber(Math.abs(quote.change), 2)}`,
-        color: selectedColor ?? priceColor(quote.change),
-      };
-    case "changePercent":
-      if (loadingCell) return { text: "…", color: dimmed };
-      if (!quote || quote.changePercent === undefined) return { text: "—", color: dimmed };
-      return {
-        text: formatPercentRaw(quote.changePercent),
-        color: selectedColor ?? priceColor(quote.changePercent),
-      };
-    case "time":
-      if (loadingCell) return { text: "…", color: dimmed };
-      return { text: formatQuoteTime(quote?.lastUpdated), color: dimmed };
+      return { text: entry.name };
+    default:
+      return renderQuoteBoardCell(column.id, quotes.get(entry.symbol), {
+        sessionText: options?.sessionText,
+        formatPrice: formatIndexPrice,
+        formatChange: formatIndexChange,
+      });
   }
 }

package/src/plugins/builtin/world-venue-map/map.tsx

@@ -1,6 +1,6 @@
 import { createElement, useCallback, useEffect, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
 import type { CloudWorldVenuePayload } from "../../../api-client";
-import { Box, ChartSurface, Text, useNativeRenderer, useUiHost } from "../../../ui";
+import { Box, ChartSurface, Text, useNativeRenderer, useUiCapabilities, useUiHost } from "../../../ui";
 import { useThemeColors } from "../../../theme/theme-context";
 import { resolveNativeBitmapSize, shouldRenderNativeBitmap } from "../../../components/chart/native/bitmap-support";
 import { drawCircle, drawLine, fillOpaque, parseHex } from "../../../components/chart/native/raster/primitives";
@@ -515,7 +515,7 @@ function DesktopWorldVenueMap(props: WorldVenueMapProps) {
 }
 
 export function WorldVenueMap(props: WorldVenueMapProps) {
-  return useUiHost().kind === "desktop-web"
+  return useUiCapabilities().nativePaneChrome === true
     ? <DesktopWorldVenueMap {...props} />
     : <TerminalWorldVenueMap {...props} />;
 }

package/src/plugins/builtin/world-venue-map/model.ts

@@ -1,4 +1,5 @@
 import type { CloudWorldVenuePayload } from "../../../api-client";
+import { clamp } from "../../../utils/math";
 
 export interface WorldMapPoint {
   x: number;
@@ -28,10 +29,6 @@ export const DEFAULT_WORLD_MAP_VIEWPORT: WorldMapViewport = {
   centerLatitude: (MAX_LATITUDE + MIN_LATITUDE) / 2,
 };
 
-function clamp(value: number, min: number, max: number): number {
-  return Math.max(min, Math.min(max, value));
-}
-
 function mapExtent(width: number, height: number, yUnitAspect = 1) {
   const availableWidth = Math.max(width - 1, 0);
   const availableHeight = Math.max(height - 1, 0);