gloomberb 0.15.2 → 0.15.3

package/src/plugins/builtin/cds/client.ts

@@ -1,4 +1,10 @@
-import { apiClient, type CloudCdsResponse } from "../../../api-client";
+import {
+  apiClient,
+  type CloudCdsHistoryPointPayload,
+  type CloudCdsHistoryResponse,
+  type CloudCdsResponse,
+} from "../../../api-client";
+import type { CloudCdsHistoryParams } from "../../../api-client/paths";
 import type { InstrumentSearchResult } from "../../../types/instrument";
 import { normalizeCdsTrades, type CdsTrade } from "./model";
 
@@ -75,3 +81,29 @@ export async function loadCdsActivity(
     trades: normalizeCdsTrades(response.trades ?? []),
   };
 }
+
+/** Two years: what DTCC keeps readable, so the backend holds no more. */
+const CDS_SPREAD_HISTORY_DAYS = 730;
+
+export interface CdsSpreadHistory {
+  issuer: string | null;
+  points: CloudCdsHistoryPointPayload[];
+}
+
+export type CdsSpreadHistoryLoader = (issuer: string) => Promise<CdsSpreadHistory>;
+export type CdsHistoryFetch = (params: CloudCdsHistoryParams) => Promise<CloudCdsHistoryResponse>;
+
+/**
+ * Daily on-the-run 5Y levels for the name the trade request already resolved,
+ * so no second instrument search runs. Oldest first.
+ */
+export async function loadCdsSpreadHistory(
+  issuer: string,
+  fetchHistory: CdsHistoryFetch = (params) => apiClient.getCloudCdsHistory(params),
+): Promise<CdsSpreadHistory> {
+  const response = await fetchHistory({ issuer, days: CDS_SPREAD_HISTORY_DAYS });
+  const points = (response.points ?? [])
+    .filter((point) => /^\d{4}-\d{2}-\d{2}$/.test(point.date) && Number.isFinite(point.spreadBp))
+    .toSorted((left, right) => left.date.localeCompare(right.date));
+  return { issuer: response.issuer, points };
+}

package/src/plugins/builtin/cds/index.tsx

@@ -4,7 +4,6 @@ import { CDS_PANE_ID } from "./model";
 import { CdsPane } from "./pane";
 import { cdsHeadless } from "./headless";
 
-export { cdsHeadless } from "./headless";
 
 /** Only an explicit argument binds a ticker; bare `CDS` stays market-wide. */
 function explicitSymbol(options?: PaneTemplateCreateOptions): string | null {
@@ -20,14 +19,15 @@ export const cdsModule: PluginModule = {
     component: CdsPane,
     defaultPosition: "right",
     defaultMode: "floating",
-    defaultFloatingSize: { width: 92, height: 22 },
+    // Tall enough for the 5Y line above the trades, like Daily Short Volume.
+    defaultFloatingSize: { width: 92, height: 28 },
   }],
   paneTemplates: [{
     id: "cds-pane",
     paneId: CDS_PANE_ID,
     label: "Single-Name CDS",
-    description: "Single-name corporate CDS trade activity from DTCC public dissemination.",
-    keywords: ["cds", "credit", "default", "swap", "single name", "issuer", "dtcc", "protection"],
+    description: "Single-name corporate CDS trades and 5Y spread history from DTCC public dissemination.",
+    keywords: ["cds", "credit", "default", "swap", "spread", "single name", "issuer", "dtcc", "protection"],
     shortcut: { prefix: "CDS", argPlaceholder: "ticker", argKind: "ticker", argOptional: true },
     headless: cdsHeadless,
     createInstance: (_context, options) => {

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

@@ -1,5 +1,6 @@
-import type { CloudCdsTradePayload } from "../../../api-client";
-import type { DataTableColumn } from "../../../components";
+import type { CloudCdsHistoryPointPayload, CloudCdsTradePayload } from "../../../api-client";
+import type { DataTableColumn, StatItem } from "../../../components";
+import type { TimeSeriesPoint } from "../../../time-series/types";
 import type { TickerRecord } from "../../../types/ticker";
 import { formatCompact } from "../../../utils/format";
 import { compareSortValues, type SortPreference } from "../../../utils/sort-values";
@@ -400,12 +401,57 @@ export function sortTrades(rows: readonly CdsTrade[], sort: TradeSortPreference)
   });
 }
 
-export function nextSort<Id extends string>(
-  current: SortPreference<Id>,
-  columnId: Id,
-  fallback: SortPreference<Id>,
-): SortPreference<Id> {
-  if (current.columnId !== columnId) return { columnId, direction: "asc" };
-  if (current.direction === "asc") return { columnId, direction: "desc" };
-  return fallback;
+const DAY_MS = 86_400_000;
+
+/** Three weeks without a level breaks the line instead of drawing one nobody traded. */
+const CHART_GAP_MS = 21 * DAY_MS;
+
+export function spreadChartPoints(points: readonly CloudCdsHistoryPointPayload[]): TimeSeriesPoint[] {
+  const out: TimeSeriesPoint[] = [];
+  let previous: number | null = null;
+  for (const point of points) {
+    const time = Date.parse(`${point.date}T00:00:00Z`);
+    if (!Number.isFinite(time)) continue;
+    if (previous !== null && time - previous > CHART_GAP_MS) {
+      const gap = new Date(previous + DAY_MS);
+      out.push({ date: gap, observedAt: gap, value: null });
+    }
+    const date = new Date(time);
+    out.push({ date, observedAt: date, value: point.spreadBp });
+    previous = time;
+  }
+  return out;
+}
+
+function formatSpreadChange(value: number): string {
+  const rounded = Math.round(value);
+  return `${rounded > 0 ? "+" : ""}${rounded}bp`;
+}
+
+/**
+ * The latest level, its move over a month, and the range of what the chart
+ * shows. The month compares against the last level 30 to 45 days older on the
+ * same contract, so neither a gap nor a roll to the next contract, which
+ * trades wider, passes for a move.
+ */
+export function spreadFigures(points: readonly CloudCdsHistoryPointPayload[]): StatItem[] {
+  const latest = points.at(-1);
+  if (!latest) return [];
+  const latestTime = Date.parse(`${latest.date}T00:00:00Z`);
+  const monthAgo = points.findLast((point) => {
+    if (point.maturity !== latest.maturity) return false;
+    const age = latestTime - Date.parse(`${point.date}T00:00:00Z`);
+    return age >= 30 * DAY_MS && age <= 45 * DAY_MS;
+  });
+  const levels = points.map((point) => point.spreadBp);
+  return [
+    { id: "spread", label: "5Y spread", value: formatBp(latest.spreadBp), detail: latest.date },
+    ...(monthAgo ? [{ id: "change", label: "1M", value: formatSpreadChange(latest.spreadBp - monthAgo.spreadBp) }] : []),
+    ...(points.length >= 2 ? [{
+      id: "range",
+      label: "Range",
+      value: `${formatBp(Math.min(...levels)).slice(0, -2)} to ${formatBp(Math.max(...levels))}`,
+      detail: `since ${points[0]!.date}`,
+    }] : []),
+  ];
 }

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

@@ -1,24 +1,34 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import {
+  ChartTableHeader,
   DataTableStackView,
   DataTableView,
-  EmptyState, PaneStatusBody, StatGrid,
+  EmptyState, formatBpAxis, PaneStatusBody, staticSeries,
+  useChartTableSelection,
   usePaneMenuItems,
+  usePaneNoticeFooter,
   type DataTableCell,
   type DataTableKeyEvent,
-  type PaneFooterSegment
+  type PaneFooterSegment,
+  type StatItem
 } from "../../../components";
+import type { CloudCdsHistoryPointPayload } from "../../../api-client";
 import { useAsyncResource } from "../../../react/async-resource";
-import { useShortcut } from "../../../react/input";
 import { colors } from "../../../theme/colors";
 import type { PaneProps } from "../../../types/plugin";
 import { TextAttributes } from "../../../ui";
 import { isPlainKey } from "../../../utils/keyboard";
-import { cycleSortPreference } from "../../../utils/sort-values";
+import { cycleSortPreference, nextHeaderSort } from "../../../utils/sort-values";
 import { usePluginPaneState } from "../../runtime";
-import { useAutoRefresh } from "../shared/auto-refresh";
-import { usePaneStatusFooter } from "../shared/pane-footer";
-import { loadCdsActivity, type CdsActivityLoader } from "./client";
+import { useAutoRefresh } from "../../../react/auto-refresh";
+import { usePaneStatusFooter } from "../../../components/layout/pane/status-footer";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
+import {
+  loadCdsActivity,
+  loadCdsSpreadHistory,
+  type CdsActivityLoader,
+  type CdsSpreadHistoryLoader,
+} from "./client";
 import {
   DEFAULT_ISSUER_SORT,
   DEFAULT_TRADE_SORT,
@@ -32,10 +42,11 @@ import {
   formatMaturity,
   formatNotional,
   formatUpfront,
-  nextSort,
   resolveIssuerQuery,
   sortIssuers,
   sortTrades,
+  spreadChartPoints,
+  spreadFigures,
   summarizeIssuers,
   tradesForIssuer,
   type CdsIssuerSummary,
@@ -52,24 +63,22 @@ import { usePaneTickerIdentity } from "../../../state/hooks/pane-ticker";
 function renderIssuerCell(
   row: CdsIssuerSummary,
   column: IssuerColumn,
-  selected: boolean,
 ): DataTableCell {
-  const selectedColor = selected ? colors.selectedText : undefined;
   switch (column.id) {
     case "issuer":
       return {
         text: row.issuer,
-        color: selectedColor ?? colors.textBright,
+        color: colors.textBright,
         attributes: TextAttributes.BOLD,
       };
     case "trades":
-      return { text: String(row.trades), color: selectedColor ?? colors.text };
+      return { text: String(row.trades), color: colors.text };
     case "last":
-      return { text: formatEventTime(row.lastTradeAt), color: selectedColor ?? colors.textMuted };
+      return { text: formatEventTime(row.lastTradeAt), color: colors.textMuted };
     case "spread":
       return {
         text: formatBp(row.latestSpreadBp),
-        color: selectedColor ?? (row.latestSpreadBp == null ? colors.textDim : colors.text),
+        color: row.latestSpreadBp == null ? colors.textDim : colors.text,
       };
   }
 }
@@ -78,41 +87,32 @@ function renderIssuerCell(
 // identity between pane renders.
 const issuerKey = (row: CdsIssuerSummary) => row.key;
 const tradeKey = (trade: CdsTrade) => trade.id;
-const renderIssuerRow = (
-  row: CdsIssuerSummary,
-  column: IssuerColumn,
-  _index: number,
-  state: { selected: boolean },
-) => renderIssuerCell(row, column, state.selected);
-const renderTradeRow = (
-  trade: CdsTrade,
-  column: TradeColumn,
-  _index: number,
-  state: { selected: boolean },
-) => renderTradeCell(trade, column, state.selected);
-
-function renderTradeCell(row: CdsTrade, column: TradeColumn, selected: boolean): DataTableCell {
-  const selectedColor = selected ? colors.selectedText : undefined;
+/**
+ * Trades on another contract than the one the 5Y line follows are dimmed, so
+ * the headline, the line and the bright rows describe the same instrument.
+ */
+function renderTradeCell(row: CdsTrade, column: TradeColumn, lineMaturity: string | null): DataTableCell {
+  const dimmed = lineMaturity && row.maturity !== lineMaturity ? colors.textDim : undefined;
   switch (column.id) {
     case "time":
-      return { text: formatEventTime(row.eventAt), color: selectedColor ?? colors.textMuted };
+      return { text: formatEventTime(row.eventAt), color: dimmed ?? colors.textMuted };
     case "maturity":
-      return { text: formatMaturity(row.maturity), color: selectedColor ?? colors.text };
+      return { text: formatMaturity(row.maturity), color: dimmed ?? colors.text };
     case "notional":
-      return { text: formatNotional(row), color: selectedColor ?? colors.textBright };
+      return { text: formatNotional(row), color: dimmed ?? colors.textBright };
     case "currency":
-      return { text: row.currency ?? "--", color: selectedColor ?? colors.textDim };
+      return { text: row.currency ?? "--", color: dimmed ?? colors.textDim };
     case "coupon":
-      return { text: formatBp(row.couponBp), color: selectedColor ?? colors.text };
+      return { text: formatBp(row.couponBp), color: dimmed ?? colors.text };
     case "spread":
       return {
         text: formatBp(row.spreadBp),
-        color: selectedColor ?? (row.spreadBp == null ? colors.textDim : colors.textBright),
+        color: dimmed ?? (row.spreadBp == null ? colors.textDim : colors.textBright),
       };
     case "upfront":
       return {
         text: formatUpfront(row),
-        color: selectedColor ?? (row.upfront == null ? colors.textDim : colors.text),
+        color: dimmed ?? (row.upfront == null ? colors.textDim : colors.text),
       };
   }
 }
@@ -128,6 +128,7 @@ function CdsTradeTable({
   onSelect,
   onKeyDown,
   before,
+  lineMaturity = null,
 }: {
   trades: CdsTrade[];
   focused: boolean;
@@ -139,8 +140,13 @@ function CdsTradeTable({
   onSelect: (id: string | null) => void;
   onKeyDown: (event: DataTableKeyEvent) => boolean;
   before?: ReactNode;
+  /** The contract the 5Y line follows today. */
+  lineMaturity?: string | null;
 }) {
   const columns = useMemo(() => buildTradeColumns(width), [width]);
+  const renderTradeRow = useCallback((trade: CdsTrade, column: TradeColumn) => (
+    renderTradeCell(trade, column, lineMaturity)
+  ), [lineMaturity]);
   return (
     <DataTableView<CdsTrade, TradeColumn>
       focused={focused}
@@ -161,16 +167,70 @@ function CdsTradeTable({
       onHeaderClick={(columnId) => onSort(columnId as TradeColumnId)}
       getItemKey={tradeKey}
       renderCell={renderTradeRow}
+      selectedTextOverridesCellColor
       emptyStateTitle="No reported trades."
     />
   );
 }
 
 const NO_TRADES: CdsTrade[] = [];
+const NO_POINTS: CloudCdsHistoryPointPayload[] = [];
+/**
+ * The 5Y line has one point per New York trade date, dated at UTC midnight, so
+ * a trade's cursor is its New York day, not its time: an afternoon print would
+ * otherwise snap to the next day's point.
+ */
+const tradeDate = (trade: CdsTrade) =>
+  new Date(`${new Date(trade.eventAt).toLocaleDateString("en-CA", { timeZone: "America/New_York" })}T00:00:00Z`);
+
+/**
+ * The issuer's figures, then its 5Y line over the trades, sized by the chart
+ * table layout. The selected trade is the chart's cursor.
+ */
+function IssuerHeader({ issuer, points, trades, width, height, focused, loading, selectedId, onSelect }: {
+  /** Left out in the stack detail, whose title already names the issuer. */
+  issuer?: string;
+  points: readonly CloudCdsHistoryPointPayload[];
+  trades: readonly CdsTrade[];
+  width: number;
+  height: number;
+  focused: boolean;
+  loading: boolean;
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+}) {
+  // The level, then whose spread it is: in a short pane the figures at the end
+  // give way. While the history loads the level holds its place, so the trades
+  // do not move when it lands.
+  const [level, ...rest] = loading && !points.length
+    ? [{ id: "spread", label: "5Y spread", value: "--" }]
+    : spreadFigures(points);
+  const figures: StatItem[] = [
+    ...(level ? [level] : []),
+    ...(issuer ? [{ id: "issuer", label: "Issuer", value: issuer }] : []),
+    ...rest,
+  ];
+  const series = useMemo(() => [staticSeries(spreadChartPoints(points), {
+    id: "cds-5y", label: "5Y spread", color: colors.positive, calendarSpaced: true,
+  })], [points]);
+  const link = useChartTableSelection({
+    rows: trades, getId: tradeKey, getDate: tradeDate,
+    selectedId: selectedId && trades.some((trade) => trade.id === selectedId) ? selectedId : trades[0]?.id ?? null,
+    onSelect, focused,
+  });
+  return (
+    <ChartTableHeader width={width} height={height} tableRows={trades.length} figures={figures}
+      tableColumns={buildTradeColumns(width)}
+      chart={points.length >= 2 || loading ? {
+        series, formatValue: formatBp, formatAxisValue: formatBpAxis, remoteKind: "cds-spread-history", loading, ...link,
+      } : null} />
+  );
+}
 
 interface CdsPaneProps extends PaneProps {
   /** Injected by tests so the pane renders without the cloud backend. */
   loadActivity?: CdsActivityLoader;
+  loadHistory?: CdsSpreadHistoryLoader;
 }
 
 export function CdsPane({
@@ -179,6 +239,7 @@ export function CdsPane({
   width,
   height,
   loadActivity = loadCdsActivity,
+  loadHistory = loadCdsSpreadHistory,
 }: CdsPaneProps) {
   const { symbol, ticker } = usePaneTickerIdentity();
   const issuerQuery = useMemo(() => resolveIssuerQuery(symbol, ticker), [symbol, ticker]);
@@ -209,6 +270,27 @@ export function CdsPane({
   ), [issuerQuery, selectedIssuerKey, tradeSort, trades]);
   const selectedSummary = issuers.find((row) => row.key === selectedIssuerKey) ?? null;
 
+  // The 5Y line follows the name the tape was queried for: the resolved company
+  // for a bound ticker, the open row in the market-wide list.
+  const historyIssuer = issuerQuery
+    ? activity?.issuer ?? null
+    : detailOpen && selectedSummary ? selectedSummary.issuer : null;
+  const loadHistoryRef = useRef(loadHistory);
+  loadHistoryRef.current = loadHistory;
+  const historyRequest = useCallback(() => loadHistoryRef.current(historyIssuer!), [historyIssuer]);
+  const history = useAsyncResource(historyIssuer ? historyRequest : null);
+  useAutoRefresh(history.updatedAt, history.load);
+  const spreadPoints = history.data?.points ?? NO_POINTS;
+  // The band holds its rows while the first history loads, so the trades do not jump.
+  const historyLoading = !!historyIssuer && history.loading && !history.data;
+  const lineMaturity = spreadPoints.at(-1)?.maturity ?? null;
+  // Without it a failed request reads as a name with no 5Y line.
+  usePaneNoticeFooter({
+    registrationId: `${paneId}:cds-history`,
+    focused,
+    notices: historyIssuer && history.error && !history.data ? ["5Y spread history unavailable."] : [],
+  });
+
   useEffect(() => {
     if (issuerQuery) return;
     if (selectedIssuerKey && issuers.some((row) => row.key === selectedIssuerKey)) return;
@@ -229,12 +311,10 @@ export function CdsPane({
     });
   }, []);
 
-  // Refresh answers in every state, including the failed load that mounts no table.
-  useShortcut((event) => {
-    if (!isPlainKey(event, "r")) return;
-    event.preventDefault();
+  usePaneRefreshKey(() => {
     load();
-  }, { enabled: focused });
+    if (historyIssuer) history.load();
+  }, { focused });
 
   const handleKey = useCallback((event: DataTableKeyEvent, cycle: (step: 1 | -1) => void): boolean => {
     if (isPlainKey(event, "]", "[")) {
@@ -270,7 +350,7 @@ export function CdsPane({
   ], [activity, asOfLabel]);
   usePaneStatusFooter({
     registrationId: paneId,
-    loading: status === "loading",
+    loading: status === "loading" || (!!historyIssuer && history.loading && !history.data),
     error,
     info: footerInfo,
   });
@@ -289,8 +369,10 @@ export function CdsPane({
     // The pane title already carries the ticker, so the body leads with the
     // issuer name the backend was actually queried for, which is the expanded
     // company name once instrument search has resolved a bare symbol.
-    const resolved = (
-      <StatGrid items={[{ id: "issuer", label: "Issuer", value: activity.issuer ?? issuerQuery }]} width={width} />
+    const header = (
+      <IssuerHeader issuer={activity.issuer ?? issuerQuery} points={spreadPoints} trades={visibleTrades}
+        width={width} height={height} focused={focused} loading={historyLoading}
+        selectedId={selectedTradeId} onSelect={setSelectedTradeId} />
     );
     return (
       <CdsTradeTable
@@ -299,11 +381,12 @@ export function CdsPane({
         width={width}
         height={height}
         sort={tradeSort}
-        onSort={(columnId) => setTradeSort((current) => nextSort(current, columnId, DEFAULT_TRADE_SORT))}
+        onSort={(columnId) => setTradeSort((current) => nextHeaderSort(current, columnId, { resetTo: DEFAULT_TRADE_SORT }))}
         selectedId={selectedTradeId}
         onSelect={setSelectedTradeId}
         onKeyDown={handleTradeKey}
-        before={resolved}
+        before={header}
+        lineMaturity={lineMaturity}
       />
     );
   }
@@ -320,11 +403,17 @@ export function CdsPane({
           trades={visibleTrades}
           focused={focused && detailOpen}
           width={width}
+          before={spreadPoints.length || historyLoading ? (
+            <IssuerHeader points={spreadPoints} trades={visibleTrades} width={width}
+              height={Math.max(0, height - 1)} focused={focused && detailOpen} loading={historyLoading}
+              selectedId={selectedTradeId} onSelect={setSelectedTradeId} />
+          ) : undefined}
           sort={tradeSort}
-          onSort={(columnId) => setTradeSort((current) => nextSort(current, columnId, DEFAULT_TRADE_SORT))}
+          onSort={(columnId) => setTradeSort((current) => nextHeaderSort(current, columnId, { resetTo: DEFAULT_TRADE_SORT }))}
           selectedId={selectedTradeId}
           onSelect={setSelectedTradeId}
           onKeyDown={handleTradeKey}
+          lineMaturity={lineMaturity}
         />
       ) : null}
       onDetailKeyDown={handleTradeKey}
@@ -347,10 +436,11 @@ export function CdsPane({
       sortColumnId={issuerSort.columnId}
       sortDirection={issuerSort.direction}
       onHeaderClick={(columnId) => setIssuerSort((current) => (
-        nextSort(current, columnId as IssuerColumnId, DEFAULT_ISSUER_SORT)
+        nextHeaderSort(current, columnId as IssuerColumnId, { resetTo: DEFAULT_ISSUER_SORT })
       ))}
       getItemKey={issuerKey}
-      renderCell={renderIssuerRow}
+      renderCell={renderIssuerCell}
+      selectedTextOverridesCellColor
       emptyStateTitle={error ? "CDS activity unavailable." : "No reported single-name CDS trades."}
     />
   );

package/src/plugins/builtin/central-bank-rates/client.ts

@@ -1,7 +1,7 @@
 import { apiClient } from "../../../api-client";
-import { ApiRequestError } from "../../../api-client/errors";
 import type { CentralBankRatesPayload } from "../../../api-client/central-bank-rates";
 import { createPluginCache } from "../../../data/plugin-cache";
+import { cachedCloudResource, loadCloudResource, unavailableOnServer } from "../shared/cloud-resource";
 
 export const centralBankRatesCache = createPluginCache<CentralBankRatesPayload>({
   kind: "central-bank-rates", source: "gloom-cloud", schemaVersion: 1,
@@ -15,7 +15,7 @@ const urlOrNull = (value: unknown) => value === null || typeof value === "string
 
 /** An incompatible deployment cannot turn missing dates or units into current policy rates. */
 export function validateCentralBankRates(payload: CentralBankRatesPayload): CentralBankRatesPayload {
-  const invalid = () => { throw new Error("Gloom Cloud returned invalid central-bank observations"); };
+  const invalid = () => { throw new Error("The server returned invalid central-bank observations"); };
   if (!payload || !Number.isFinite(Date.parse(payload.generatedAt)) || !["available", "partial", "unavailable"].includes(payload.status)
     || !Array.isArray(payload.rows) || !strings(payload.gaps)) return invalid();
   const ids = new Set<string>();
@@ -51,19 +51,7 @@ export function validateCentralBankRates(payload: CentralBankRatesPayload): Cent
 
 export async function fetchCentralBankRates(client: Pick<typeof apiClient, "getCloudCentralBankRates"> = apiClient) {
   try { return validateCentralBankRates(await client.getCloudCentralBankRates()); }
-  catch (error) {
-    if (error instanceof ApiRequestError && error.status === 404) throw new Error("Central bank rates are not available on this Gloom Cloud server yet");
-    throw error;
-  }
-}
-export interface CentralBankRatesResource { payload: CentralBankRatesPayload; stale: boolean; refreshError: string | null }
-export function getCachedCentralBankRates(): CentralBankRatesResource | null {
-  const cached = centralBankRatesCache.get("g20", { allowExpired: true });
-  // The pane revalidates this copy on mount; only a failed refresh makes it stale.
-  return cached ? { payload: cached.data, stale: false, refreshError: null } : null;
-}
-export async function loadCentralBankRates(force = false): Promise<CentralBankRatesResource> {
-  const result = await centralBankRatesCache.load("g20", () => fetchCentralBankRates(), { force });
-  if (result.error instanceof ApiRequestError && [401, 403].includes(result.error.status ?? 0)) throw result.error;
-  return { payload: result.data, stale: result.stale, refreshError: result.refreshError ?? null };
+  catch (error) { throw unavailableOnServer(error, "Central bank rates are not available yet."); }
 }
+export const getCachedCentralBankRates = () => cachedCloudResource(centralBankRatesCache, "g20");
+export const loadCentralBankRates = (force = false) => loadCloudResource(centralBankRatesCache, "g20", () => fetchCentralBankRates(), { force });

package/src/plugins/builtin/central-bank-rates/headless.ts

@@ -3,7 +3,7 @@ import { fetchCentralBankRates } from "./client";
 import { hasNoPolicyRate, policyBoardRow, policyNotices } from "./model";
 
 export const centralBankRatesHeadless: HeadlessPaneDefinition<"bundle"> = {
-  discovery: { aliases: ["CBR", "ECFC", "CBRT"], dataRequirements: ["Gloom Cloud central-bank-rates endpoint"],
+  discovery: { aliases: ["CBR", "CBRT"], dataRequirements: ["Gloom Cloud central-bank-rates endpoint"],
     limitations: ["Published policy observations with individual dates", "Policy instruments differ", "Only US meeting dates are maintained"] },
   shape: "bundle", options: [], argument: { kind: "none" }, describe: "G20 central bank policy rates",
   async load(_args, ctx) {

package/src/plugins/builtin/central-bank-rates/index.tsx

@@ -10,7 +10,7 @@ export const centralBankRatesModule: PluginModule = {
   paneTemplates: [{
     id: "central-bank-rates-cbr", paneId: "central-bank-rates", label: "Central Bank Rates",
     description: "G20 policy rates, last observed changes and dated historical context.",
-    keywords: ["central", "bank", "policy", "rates", "g20", "cbr", "ecfc", "cbrt"], shortcut: { prefix: "CBR", aliases: ["ECFC", "CBRT"] },
+    keywords: ["central", "bank", "policy", "rates", "g20", "cbr", "cbrt"], shortcut: { prefix: "CBR", aliases: ["CBRT"] },
     headless: centralBankRatesHeadless,
   }],
   setup(ctx) { centralBankRatesCache.attach(ctx.persistence); },

package/src/plugins/builtin/central-bank-rates/pane.tsx

@@ -1,19 +1,20 @@
 import { useCallback, useMemo } from "react";
 import { Box } from "../../../ui";
-import { useAsyncResource, useAutoRefresh, usePluginPaneState, useShortcut, useUpdatedAgo } from "../../../public/react";
-import { CompositeChart, MarketBoardStack, PaneStatusBody, StatGrid, statGridRows, usePaneNoticeFooter, usePaneStatusLinkFooter, type StatItem } from "../../../components";
+import { useAsyncResource, useAutoRefresh, usePluginPaneState, useUpdatedAgo } from "../../../public/react";
+import { CompositeChart, MarketBoardStack, PaneStatusBody, usePaneNoticeFooter, usePaneStatusLinkFooter, type StatItem } from "../../../components";
 import { colors } from "../../../theme/colors";
-import { ApiRequestError } from "../../../api-client/errors";
+import { isAccessDenied } from "../../../api-client/errors";
 import type { CentralBankRow } from "../../../api-client/central-bank-rates";
 import { staticSeries } from "../../../components/chart/static/series";
+import { StatChartDetail } from "../../../components/market-board";
 import type { PaneProps } from "../../../types/plugin";
-import { isPlainKey } from "../../../utils/keyboard";
+import { formatPercentileRank } from "../../../utils/format";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
 import { useResearchCloudSession } from "../shared/research-cloud-session";
 import { getCachedCentralBankRates, loadCentralBankRates } from "./client";
 import { hasNoPolicyRate, policyBoardRow, policyChange, policyHistory, policyLevel, policyNotices, policyRate } from "./model";
 
 const PANELS = [{ id: "main" }];
-const clearDenied = (error: unknown) => error instanceof ApiRequestError && [401, 403].includes(error.status ?? 0);
 
 function PolicyDetail({ row, width, height, focused }: { row: CentralBankRow; width: number; height: number; focused: boolean }) {
   const history = useMemo(() => policyHistory(row), [row]);
@@ -24,7 +25,7 @@ function PolicyDetail({ row, width, height, focused }: { row: CentralBankRow; wi
   // count; short details keep the figures several to a row.
   const items: StatItem[] = [
     { id: "level", label: row.range ? "Target range" : "Policy rate", value: policyLevel(row),
-      detail: `${p.value == null ? "--" : p.value.toFixed(0)} pctl 1Y` },
+      detail: formatPercentileRank(p.value, "1Y") },
     { id: "move", label: "Last move", value: policyChange(row), detail: row.lastChangeDate ?? undefined },
     // A target range ranks and charts its midpoint, which the band's range would not say.
     { id: "range", label: "1Y range", value: `${policyRate(p.min)} to ${policyRate(p.max)}`, detail: row.range ? "midpoint" : undefined },
@@ -36,20 +37,16 @@ function PolicyDetail({ row, width, height, focused }: { row: CentralBankRow; wi
     { id: "source", label: "Source", value: row.source?.toUpperCase() ?? "--", detail: row.sourceSeriesIds.join(", ") || undefined },
     { id: "instrument", label: "Instrument", value: row.instrument, detail: row.centralBank ?? undefined, wide: true },
   ];
-  const summaryHeight = statGridRows(items, width);
-  return <Box flexDirection="column" width={width} height={height}>
-    <StatGrid items={items} width={width} />
-    <PaneStatusBody empty={!history.some((point) => point.value != null)} subject="policy history" emptyTitle="No policy history available.">
-      <CompositeChart series={series} panels={PANELS} width={width} height={Math.max(3, height - summaryHeight)} showLegend={false}
-        focused={focused} navigable={false} showTimeAxis formatAxisValue={policyRate} remoteKind="central-bank-policy-history" />
-    </PaneStatusBody>
-  </Box>;
+  return <StatChartDetail items={items} width={width} height={height} empty={!history.some((point) => point.value != null)}
+    emptySubject="policy history" emptyTitle="No policy history available."
+    renderChart={(chartHeight) => <CompositeChart series={series} panels={PANELS} width={width} height={chartHeight} showLegend={false}
+      focused={focused} navigable={false} showTimeAxis formatAxisValue={policyRate} remoteKind="central-bank-policy-history" />} />;
 }
 
 export function CentralBankRatesPane({ width, height, focused }: PaneProps) {
   const session = useResearchCloudSession();
   const loader = useCallback((force: boolean) => loadCentralBankRates(force), [session.requestKey]);
-  const resource = useAsyncResource(loader, { initialData: getCachedCentralBankRates, clearOnError: clearDenied });
+  const resource = useAsyncResource(loader, { initialData: getCachedCentralBankRates, clearOnError: isAccessDenied });
   const [selectedId, setSelectedId] = usePluginPaneState<string | null>("selected", null);
   const [openId, setOpenId] = usePluginPaneState<string | null>("open", null);
   const data = resource.data?.payload;
@@ -57,15 +54,13 @@ export function CentralBankRatesPane({ width, height, focused }: PaneProps) {
   const selected = rows.find((row) => row.id === openId) ?? rows.find((row) => row.id === selectedId);
   const updatedAgo = useUpdatedAgo(resource.updatedAt);
   useAutoRefresh(resource.updatedAt, resource.load);
-  useShortcut((event) => { if (focused && isPlainKey(event, "r")) { event.preventDefault(); void resource.reload(); } });
+  usePaneRefreshKey(() => void resource.reload(), { focused });
   usePaneNoticeFooter({ registrationId: "central-bank-rates:notices", focused,
     notices: [...(data ? policyNotices(data) : []), ...(resource.data?.refreshError ? [resource.data.refreshError] : [])] });
   usePaneStatusLinkFooter({ registrationId: "central-bank-rates", focused, loading: resource.loading, error: resource.error,
     url: selected?.observation.sourceUrl ?? null, showOpenHint: true,
-    info: data ? [
-      ...(updatedAgo ? [{ id: "updated", parts: [{ text: updatedAgo, tone: "muted" as const }] }] : []),
-      ...(resource.data?.stale ? [{ id: "stale", parts: [{ text: "stale", tone: "warning" as const }] }] : []),
-    ] : [],
+    info: data && updatedAgo ? [{ id: "updated", parts: [{ text: updatedAgo, tone: "muted" as const }] }] : [],
+    stale: !!data && resource.data?.stale,
   });
   return <Box width={width} height={height} flexDirection="column">
     <PaneStatusBody loading={resource.loading && !data} error={!data ? resource.error : null}