gloomberb 0.15.2 → 0.15.3

package/src/plugins/builtin/correlation/relationship/pane.tsx

@@ -5,11 +5,11 @@ import {
   QueryBar,
   StatGrid,
   statGridRows,
-  usePaneFooter,
   usePaneNoticeFooter,
+  usePaneStatusFooter,
   type CompositeAxisDomain,
 } from "../../../../components";
-import { StaticScatterChartSurface, type MultiLineChartSeries } from "../../../../components/chart/static";
+import { StaticScatterChartSurface } from "../../../../components/chart/static";
 import { scalarPoint, staticSeries } from "../../../../components/chart/static/series";
 import { useShortcut, type KeyEventLike } from "../../../../react/input";
 import { usePaneInstance } from "../../../../state/app/context";
@@ -43,10 +43,11 @@ import {
   buildRelationshipRatioSeries,
   buildRelationshipScatterPointsForDate,
   buildRelationshipStatItems,
+  type MultiLineChartSeries,
 } from "./view-model";
 
 export {
-  RELATIONSHIP_GRAPH_PANE_ID, buildRelationshipAnalysis,
+  RELATIONSHIP_GRAPH_PANE_ID,
   buildRelationshipGraphSettingsDef
 } from "./model";
 
@@ -274,9 +275,7 @@ export function RelationshipGraphPane({ focused, width, height }: PaneProps) {
 
   // The legend reads the values at the cursor and the axis carries its date,
   // so the footer only reports loading.
-  usePaneFooter("relationship-graph", () => ({
-    info: loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : [],
-  }), [loading]);
+  usePaneStatusFooter({ registrationId: "relationship-graph", loading });
 
   if (!pair) {
     return (
@@ -356,7 +355,7 @@ export function createRelationshipPaneTemplate(): PaneTemplateDef {
     label: "Relationship Graph",
     description: "Graph ratio, rolling correlation, and regression between two tickers.",
     keywords: ["relationship", "ratio", "graph", "correlation", "regression", "gr"],
-    shortcut: { prefix: "GR", argPlaceholder: "tickers", argKind: "ticker-list" },
+    shortcut: { prefix: "GR", aliases: ["BETA", "HRA"], argPlaceholder: "tickers", argKind: "ticker-list" },
     wizard: [
       {
         key: "tickers",

package/src/plugins/builtin/correlation/relationship/view-model.ts

@@ -1,5 +1,4 @@
 import type { ProjectedChartPoint } from "../../../../components/chart/core/data";
-import type { MultiLineChartSeries } from "../../../../components/chart/static";
 import type { ScatterChartPoint } from "../../../../components/chart/static";
 import { colors } from "../../../../theme/colors";
 import { formatNumber } from "../../../../utils/format";
@@ -10,6 +9,13 @@ import type {
   RelationshipReturnPoint,
 } from "./model";
 
+export interface MultiLineChartSeries {
+  id: string;
+  label: string;
+  color: string;
+  points: Array<{ date: Date; value: number | null }>;
+}
+
 export function formatNullableNumber(value: number | null | undefined, decimals: number): string {
   return typeof value === "number" && Number.isFinite(value) ? formatNumber(value, decimals) : "-";
 }
@@ -87,23 +93,6 @@ export function buildRelationshipScatterPointsForDate(
   }));
 }
 
-export function findRelationshipAlignedPoint(
-  aligned: RelationshipAlignedPoint[],
-  cursorDate: Date | null,
-): RelationshipAlignedPoint | null {
-  if (aligned.length === 0) return null;
-  if (!cursorDate) return aligned.at(-1) ?? null;
-  return aligned.find((entry) => entry.date.getTime() === cursorDate.getTime()) ?? aligned.at(-1) ?? null;
-}
-
-export function findRelationshipCorrelationAtDate(
-  points: ProjectedChartPoint[],
-  cursorDate: Date | null,
-): number | null {
-  if (!cursorDate) return points.at(-1)?.close ?? null;
-  return points.find((point) => point.date.getTime() === cursorDate.getTime())?.close ?? null;
-}
-
 /**
  * The regression of the first ticker's daily returns on the second's, as the
  * pane's summary figures. R² rides with R; sample counts are left out.

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

@@ -1,7 +1,7 @@
 import { apiClient } from "../../../api-client";
-import { ApiRequestError } from "../../../api-client/errors";
 import type { CotBoardPayload, CotClass, CotClassSummary, CotContractPayload, CotFamily, CotPayloadBase } from "../../../api-client/cot";
 import { createPluginCache } from "../../../data/plugin-cache";
+import { loadCloudResource, unavailableOnServer } from "../shared/cloud-resource";
 import type { PricePoint } from "../../../types/financials";
 import { COT_CLASSES, cotPriceMapping } from "./model";
 
@@ -17,29 +17,29 @@ function base(data: CotPayloadBase, family: CotFamily) {
     || !Array.isArray(data.gaps) || !data.gaps.every((gap) => typeof gap === "string")
     || !Array.isArray(data.classes) || data.classes.some((row) => !COT_CLASSES[family].some((option) => option.value === row.id))
     || data.asOf !== null && !date(data.asOf) || !Number.isFinite(Date.parse(data.generatedAt))
-    || !["available", "partial", "unavailable"].includes(data.status)) throw new Error("Gloom Cloud returned an invalid COT report");
+    || !["available", "partial", "unavailable"].includes(data.status)) throw new Error("The server returned an invalid COT report");
 }
 function summary(row: CotClassSummary, family: CotFamily) {
   if (!row || !COT_CLASSES[family].some((option) => option.value === row.id)
     || ![row.long, row.short, row.spreading].every(count) || ![row.net, row.weeklyChange, row.netPercentOfOpenInterest].every(number)
     || row.net !== (row.long == null || row.short == null ? null : row.long - row.short)
-    || row.previousReportDate !== null && !date(row.previousReportDate)) throw new Error("Gloom Cloud returned invalid COT positions");
+    || row.previousReportDate !== null && !date(row.previousReportDate)) throw new Error("The server returned invalid COT positions");
   for (const rank of [row.percentile1Y, row.percentile3Y]) {
     if (!rank || !Number.isSafeInteger(rank.sampleCount) || rank.sampleCount < 0 || typeof rank.completeWindow !== "boolean"
       || ![rank.min, rank.max, rank.mean, rank.rank].every(number) || !date(rank.windowStart) || !date(rank.windowEnd)
       || rank.value !== null && (!number(rank.value) || rank.value < 0 || rank.value > 100)
       || rank.historyStart !== null && !date(rank.historyStart) || rank.historyEnd !== null && !date(rank.historyEnd)) {
-      throw new Error("Gloom Cloud returned invalid COT percentiles");
+      throw new Error("The server returned invalid COT percentiles");
     }
   }
 }
 export function validateCotBoard(data: CotBoardPayload, family: CotFamily, traderClass: CotClass) {
   base(data, family);
-  if (!Array.isArray(data.rows) || data.traderClass !== traderClass) throw new Error("Gloom Cloud returned an invalid COT board");
+  if (!Array.isArray(data.rows) || data.traderClass !== traderClass) throw new Error("The server returned an invalid COT board");
   const seen = new Set<string>();
   for (const row of data.rows) {
     if (!code(row.contractCode) || seen.has(row.contractCode) || !date(row.reportDate) || !count(row.openInterest)
-      || row.position?.id !== traderClass) throw new Error("Gloom Cloud returned an invalid COT market");
+      || row.position?.id !== traderClass) throw new Error("The server returned an invalid COT market");
     seen.add(row.contractCode); summary(row.position, family);
   }
   return data;
@@ -47,7 +47,7 @@ export function validateCotBoard(data: CotBoardPayload, family: CotFamily, trade
 export function validateCotContract(data: CotContractPayload, family: CotFamily, contractCode: string) {
   base(data, family);
   if (data.contract !== null && data.contract.contractCode !== contractCode || !Array.isArray(data.positions) || !Array.isArray(data.history)) {
-    throw new Error("Gloom Cloud returned an invalid COT contract");
+    throw new Error("The server returned an invalid COT contract");
   }
   data.positions.forEach((row) => summary(row, family));
   let previous = "";
@@ -56,29 +56,25 @@ export function validateCotContract(data: CotContractPayload, family: CotFamily,
       || row.positions.some((position) => !COT_CLASSES[family].some((option) => option.value === position.id)
         || ![position.long, position.short, position.spreading].every(count)
         || position.net !== (position.long == null || position.short == null ? null : position.long - position.short))) {
-      throw new Error("Gloom Cloud returned invalid COT history");
+      throw new Error("The server returned invalid COT history");
     }
     previous = row.reportDate;
   }
   return data;
 }
-function unavailable(error: unknown): never {
-  if (error instanceof ApiRequestError && [404, 503].includes(error.status ?? 0)) throw new Error("COT history is not available on this Gloom Cloud server yet");
-  throw error;
-}
+const unavailable = (error: unknown) => unavailableOnServer(error, "COT history is not available yet.", [404, 503]);
 export async function fetchCotBoard(family: CotFamily, traderClass: CotClass, client: Pick<typeof apiClient, "getCloudCotBoard"> = apiClient) {
   try { return validateCotBoard(await client.getCloudCotBoard(family, traderClass), family, traderClass); }
-  catch (error) { return unavailable(error); }
+  catch (error) { throw unavailable(error); }
 }
 export async function loadCotBoard(family: CotFamily, traderClass: CotClass, force = false) {
-  const result = await cotBoardCache.load(`${family}:${traderClass}`, () => fetchCotBoard(family, traderClass), { force });
-  if (result.error instanceof ApiRequestError && [401, 403].includes(result.error.status ?? 0)) throw result.error;
-  return { ...result.data, gaps: [...result.data.gaps, ...(result.refreshError ? [result.refreshError] : [])],
-    status: result.stale && result.data.status === "available" ? "partial" as const : result.data.status };
+  const { payload, stale, refreshError } = await loadCloudResource(cotBoardCache, `${family}:${traderClass}`, () => fetchCotBoard(family, traderClass), { force });
+  return { ...payload, gaps: [...payload.gaps, ...(refreshError ? [refreshError] : [])],
+    status: stale && payload.status === "available" ? "partial" as const : payload.status };
 }
 export async function fetchCotContract(contractCode: string, family: CotFamily, client: Pick<typeof apiClient, "getCloudCotContract"> = apiClient) {
   try { return validateCotContract(await client.getCloudCotContract(contractCode, family), family, contractCode); }
-  catch (error) { return unavailable(error); }
+  catch (error) { throw unavailable(error); }
 }
 export interface CotDetailData { payload: CotContractPayload; price: PricePoint[]; priceSymbol: string | null; priceAsOf: string | null; priceWarning: string | null }
 export async function loadCotDetail(contractCode: string, family: CotFamily, client: Pick<typeof apiClient, "getCloudCotContract" | "getCloudHistory"> = apiClient): Promise<CotDetailData> {

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

@@ -1,7 +1,7 @@
 import type { PluginModule } from "../plugin-module";
 import { cotBoardCache } from "./client";
 import { cotHeadless } from "./headless";
-import { cotContractCode, cotRoot } from "./model";
+import { COT_ROOT_OPTIONS, cotContractCode, cotRoot } from "./model";
 import { CotPane } from "./pane";
 
 export const cotModule: PluginModule = {
@@ -11,7 +11,8 @@ export const cotModule: PluginModule = {
   paneTemplates: [{ id: "cot-cot", paneId: "cot", label: "CFTC Positioning",
     description: "Weekly futures positioning, changes, historical percentiles and cross-market extremes.",
     keywords: ["cot", "cftc", "positioning", "commitments", "managed money", "net spec"],
-    shortcut: { prefix: "COT", aliases: ["CFTC"], argKind: "text" as const, argPlaceholder: "code or root", argOptional: true }, headless: cotHeadless,
+    shortcut: { prefix: "COT", aliases: ["CFTC"], argKind: "text" as const, argPlaceholder: "code or root", argOptional: true,
+      argOptions: () => COT_ROOT_OPTIONS }, headless: cotHeadless,
     createInstance: (context, options) => {
       const input = options?.arg?.trim();
       const code = cotContractCode(input || context.activeTicker);

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

@@ -9,16 +9,18 @@ export const COT_CLASSES: Record<CotFamily, Array<{ value: CotClass; label: stri
   legacy: [{ value: "noncommercial", label: "Noncommercial" }, { value: "commercial", label: "Commercial" }, { value: "nonreportable", label: "Nonreportable" }],
   disaggregated: [{ value: "managed-money", label: "Managed Money" }, { value: "producer", label: "Producer/Merchant" }, { value: "swap", label: "Swap Dealers" }, { value: "other-reportable", label: "Other Reportables" }, { value: "nonreportable", label: "Nonreportable" }],
 };
-const ROOTS: Record<string, { code: string; exchange: string; priceSymbol: string | null }> = {
-  ZN: { code: "043602", exchange: "CBT", priceSymbol: "ZN=F" },
-  ZQ: { code: "045601", exchange: "CBT", priceSymbol: "ZQ=F" },
-  CL: { code: "067651", exchange: "NYM", priceSymbol: "CL=F" },
-  SI: { code: "084691", exchange: "CMX", priceSymbol: "SI=F" },
-  GC: { code: "088691", exchange: "CMX", priceSymbol: "GC=F" },
-  VX: { code: "1170E1", exchange: "CFE", priceSymbol: null },
-  SR3: { code: "134741", exchange: "CME", priceSymbol: null },
-  ES: { code: "13874A", exchange: "CME", priceSymbol: "ES=F" },
+const ROOTS: Record<string, { code: string; exchange: string; priceSymbol: string | null; name: string }> = {
+  ZN: { code: "043602", exchange: "CBT", priceSymbol: "ZN=F", name: "10-Year T-Note" },
+  ZQ: { code: "045601", exchange: "CBT", priceSymbol: "ZQ=F", name: "30-Day Fed Funds" },
+  CL: { code: "067651", exchange: "NYM", priceSymbol: "CL=F", name: "WTI Crude Oil" },
+  SI: { code: "084691", exchange: "CMX", priceSymbol: "SI=F", name: "Silver" },
+  GC: { code: "088691", exchange: "CMX", priceSymbol: "GC=F", name: "Gold" },
+  VX: { code: "1170E1", exchange: "CFE", priceSymbol: null, name: "VIX Futures" },
+  SR3: { code: "134741", exchange: "CME", priceSymbol: null, name: "3-Month SOFR" },
+  ES: { code: "13874A", exchange: "CME", priceSymbol: "ES=F", name: "E-Mini S&P 500" },
 };
+/** The roots `cotContractCode` accepts, labeled "ZQ 30-Day Fed Funds". */
+export const COT_ROOT_OPTIONS = Object.entries(ROOTS).map(([root, row]) => ({ value: root, label: `${root} ${row.name}` }));
 /**
  * Front-month price overlays for major markets without a root alias, each
  * checked to return five years of daily history (2026-09-24). Keyed by CFTC
@@ -136,7 +138,8 @@ export function cotChartSeries(data: CotContractPayload, traderClass: CotClass,
     ...staticSeries(cotNetPoints(data.history, traderClass), { id: "net", label: `${COT_CLASSES[data.reportFamily].find((row) => row.value === traderClass)?.label ?? traderClass} net`, color: colors.warning, calendarSpaced: true }),
     panelId: "net", unit: "contracts", unitGroup: "positions",
   }];
-  if (price.length) series.unshift({
+  // Net positioning is the subject, so it leads the legend and the strip; the front price follows.
+  if (price.length) series.push({
     ...staticSeries(price.map((row) => ({ date: row.date, observedAt: row.date, value: row.close })), { id: "price", label: "Front price", color: colors.positive, calendarSpaced: true }),
     panelId: "price", unit: "", unitGroup: "price",
   });

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

@@ -1,13 +1,16 @@
 import { useCallback, useMemo, useRef, useState } from "react";
-import { CompositeChart, DataTableStackView, DataTableView, PaneStatusBody, QueryBar, Tabs, usePaneFooter, usePaneHeaderTabs, usePaneNoticeFooter, usePaneStatusFooter, type DataTableColumn, type SelectControl } from "../../../components";
+import { ChartTableHeader, CompositeChart, DataTableStackView, spanDigits, DataTableView, PaneStatusBody, QueryBar, usePaneFooter, usePaneNoticeFooter, usePaneStatusFooter, usePaneTabs, useQueryBarSearch, type ChartTableChart, type DataTableColumn, type SelectControl } from "../../../components";
 import { useAsyncResource, usePluginPaneState, useShortcut } from "../../../public/react";
 import { usePaneInstance } from "../../../state/app/context";
 import { useThemeColors } from "../../../theme/theme-context";
 import type { PaneProps } from "../../../types/plugin";
+import type { ResolvedSeries } from "../../../time-series/types";
+import type { CompositeAxisDomain } from "../../../components/chart/composite/types";
 import type { CotBoardRow, CotClass, CotClassSummary, CotFamily } from "../../../api-client/cot";
-import { ApiRequestError } from "../../../api-client/errors";
-import { Box, type InputRenderable } from "../../../ui";
-import { useAutoRefresh } from "../shared/auto-refresh";
+import { isAccessDenied } from "../../../api-client/errors";
+import { Box } from "../../../ui";
+import { useAutoRefresh } from "../../../react/auto-refresh";
+import { compareSortValues, nextHeaderSort, type SortPreference } from "../../../utils/sort-values";
 import { useResearchCloudSession } from "../shared/research-cloud-session";
 import { loadCotBoard, loadCotDetail } from "./client";
 import { COT_CLASSES, COT_MAJOR_CODES, COT_SCOPES, cotChartSeries, cotClass, cotInteger, cotLegendValue, cotMarketName, cotScope, type CotScope } from "./model";
@@ -31,17 +34,21 @@ const POSITION_COLUMNS: DataTableColumn[] = [
   { id: "one", label: "PCTL 1Y", width: 8, align: "right" },
   { id: "three", label: "PCTL 3Y", width: 8, align: "right" },
 ];
-const clearDenied = (error: unknown) => error instanceof ApiRequestError && [401, 403].includes(error.status ?? 0);
+/** Net positioning is the subject: two parts of the plot to the front price's one. */
+const NET_PRICE_PANELS = [{ id: "net", height: 2 }, { id: "price", height: 1 }];
+const NET_PANEL = [{ id: "net" }];
+/** Legend, four net rows, two price rows and the axis; a shorter band keeps the net alone. */
+const PRICE_PANEL_MIN_ROWS = 8;
 const rank = (value: number | null) => value == null ? "--" : value.toFixed(0);
 const cotDetailTitle = (name: string | undefined, code: string | null) => name ? cotMarketName(name) : code ?? undefined;
 
 export function CotPane(props: PaneProps) {
   const pane = usePaneInstance();
   const [family, setFamily] = usePluginPaneState<CotFamily>("report", pane?.settings?.report === "disaggregated" ? "disaggregated" : "legacy");
-  const tabsInHeader = usePaneHeaderTabs({ tabs: FAMILIES, activeValue: family, onSelect: (value) => setFamily(value as CotFamily), focused: props.focused });
+  const { strip: tabStrip, rows: tabRows } = usePaneTabs({ tabs: FAMILIES, activeValue: family, onSelect: (value) => setFamily(value as CotFamily), focused: props.focused, dense: true });
   return <Box width={props.width} height={props.height} flexDirection="column">
-    {!tabsInHeader && <Tabs tabs={FAMILIES} activeValue={family} onSelect={(value) => setFamily(value as CotFamily)} focused={props.focused} dense />}
-    <CotBoard key={family} {...props} height={Math.max(3, props.height - (tabsInHeader ? 0 : 1))} family={family} initialCode={pane?.params?.code ?? null} />
+    {tabStrip}
+    <CotBoard key={family} {...props} height={Math.max(3, props.height - tabRows)} family={family} initialCode={pane?.params?.code ?? null} />
   </Box>;
 }
 function CotBoard({ width, height, focused, family, initialCode }: PaneProps & { family: CotFamily; initialCode: string | null }) {
@@ -50,33 +57,28 @@ function CotBoard({ width, height, focused, family, initialCode }: PaneProps & {
   const [storedClass, setClass] = usePluginPaneState<CotClass>("class", COT_CLASSES[family][0]!.value);
   const traderClass = cotClass(family, storedClass);
   const [selected, setSelected] = usePluginPaneState<string | null>("selected", initialCode);
-  const [open, setOpen] = usePluginPaneState<string | null>("open", initialCode);
+  // A closed detail is stored as "": pane state reads null as unset, so Back
+  // would fall through to the deep-linked code and reopen it.
+  const [storedOpen, setOpen] = usePluginPaneState<string>("open", initialCode ?? "");
+  const open = storedOpen || null;
   const [storedScope, setScope] = usePluginPaneState<CotScope>("scope", "major");
   const scope = cotScope(storedScope);
   const [query, setQuery] = useState("");
-  const [searching, setSearching] = useState(false);
-  const [searchFocus, setSearchFocus] = useState(0);
-  const [sort, setSort] = useState({ id: "", direction: "desc" as "asc" | "desc" });
+  const { active: searching, focus: focusSearch, searchProps } = useQueryBarSearch();
+  const [sort, setSort] = useState<SortPreference<string>>({ columnId: null, direction: "desc" });
   const control = useRef<SelectControl>(null);
   const scopeControl = useRef<SelectControl>(null);
-  const searchInput = useRef<InputRenderable | null>(null);
   const loader = useCallback((force: boolean) => loadCotBoard(family, traderClass, force), [family, traderClass, session.requestKey]);
-  const resource = useAsyncResource(loader, { clearOnError: clearDenied });
+  const resource = useAsyncResource(loader, { clearOnError: isAccessDenied });
   const data = resource.data?.traderClass === traderClass ? resource.data : null;
   const rows = useMemo(() => {
     // A typed query searches every market; the scope only shapes the unsearched board.
     const result = (data?.rows ?? []).filter((row) => query ? `${row.marketName} ${row.contractCode}`.toLowerCase().includes(query.toLowerCase())
       : scope === "all" || COT_MAJOR_CODES.has(row.contractCode));
-    if (!sort.id) return result;
+    if (!sort.columnId) return result;
     const value = (row: CotBoardRow) => ({ name: cotMarketName(row.marketName), code: row.contractCode, net: row.position.net, change: row.position.weeklyChange,
-      one: row.position.percentile1Y.value, three: row.position.percentile3Y.value, asOf: row.reportDate })[sort.id as "name"];
-    return [...result].sort((a, b) => {
-      const left = value(a), right = value(b);
-      if (left == null) return right == null ? 0 : 1;
-      if (right == null) return -1;
-      const order = typeof left === "number" && typeof right === "number" ? left - right : String(left).localeCompare(String(right));
-      return sort.direction === "asc" ? order : -order;
-    });
+      one: row.position.percentile1Y.value, three: row.position.percentile3Y.value, asOf: row.reportDate })[sort.columnId as "name"];
+    return [...result].sort((a, b) => compareSortValues(value(a), value(b), sort.direction));
   }, [data, query, scope, sort]);
   useAutoRefresh(resource.updatedAt, resource.load);
   // The class, scope and search controls live in the board's query bar, so
@@ -88,13 +90,12 @@ function CotBoard({ width, height, focused, family, initialCode }: PaneProps & {
     if (!boardShown) return;
     if (event.name === "c") { event.preventDefault(); control.current?.open(); }
     if (event.name === "s") { event.preventDefault(); scopeControl.current?.open(); }
-    if (event.name === "/") { event.preventDefault(); setSearching(true); setSearchFocus((value) => value + 1); }
   });
   usePaneFooter("cot:actions", () => ({ hints: boardShown ? [
     { id: "class", key: "c", label: "class", onPress: () => control.current?.open() },
     { id: "scope", key: "s", label: "cope", onPress: () => scopeControl.current?.open() },
-    { id: "search", key: "/", label: "search", onPress: () => { setSearching(true); setSearchFocus((value) => value + 1); } },
-  ] : [] }), [boardShown]);
+    { id: "search", key: "/", label: "search", onPress: focusSearch },
+  ] : [] }), [boardShown, focusSearch]);
   usePaneNoticeFooter({ registrationId: "cot:board-notices", focused, enabled: !open, notices: data?.gaps ?? [] });
   usePaneStatusFooter({ registrationId: "cot:board", enabled: !open, loading: resource.loading, error: resource.error,
     info: data ? [{ id: "as-of", parts: [{ text: `CFTC futures only · ${data.asOf ?? "--"} · contracts`, tone: "muted" }] }] : [] });
@@ -102,7 +103,7 @@ function CotBoard({ width, height, focused, family, initialCode }: PaneProps & {
   return <DataTableStackView<CotBoardRow> columns={BOARD_COLUMNS} items={rows} focused={focused && !searching}
     rootWidth={width} rootHeight={height} selection={{ kind: "id", selectedId: selected, getId: (row) => row.contractCode, onChange: setSelected }}
     getItemKey={(row) => row.contractCode} onActivate={(row) => setOpen(row.contractCode)} freezeFirstColumn
-    sortable sortColumnId={sort.id || null} sortDirection={sort.direction} onHeaderClick={(id) => setSort((current) => ({ id, direction: current.id === id && current.direction === "desc" ? "asc" : "desc" }))}
+    sortable sortColumnId={sort.columnId} sortDirection={sort.direction} onHeaderClick={(id) => setSort((current) => nextHeaderSort(current, id, { firstDirection: "desc" }))}
     renderCell={(row, column) => {
       if (column.id === "name") return { text: cotMarketName(row.marketName) };
       if (column.id === "code") return { text: row.contractCode, color: colors.textMuted };
@@ -112,35 +113,61 @@ function CotBoard({ width, height, focused, family, initialCode }: PaneProps & {
       return { text: row.reportDate, color: colors.textMuted };
     }}
     rootBefore={<QueryBar width={width}
-      search={{ value: query, onChange: setQuery, placeholder: "market or CFTC code", focused, active: searching,
-        onActiveChange: setSearching, focusToken: searchFocus, inputRef: searchInput }}
+      search={{ value: query, onChange: setQuery, placeholder: "market or CFTC code", focused, ...searchProps }}
       filters={[
         { id: "class", label: "Class", value: traderClass, options: COT_CLASSES[family], onChange: setClass, controlRef: control },
         { id: "scope", label: "Scope", value: scope, defaultValue: "major", options: [...COT_SCOPES], onChange: setScope, controlRef: scopeControl },
       ]} />}
-    emptyStateTitle={data ? query ? "No matching COT markets." : "No major markets in this report; switch the scope to all markets." : ""} detailOpen={!!open} onBack={() => setOpen(null)}
+    emptyStateTitle={data ? query ? "No matching COT markets." : "No major markets in this report; switch the scope to all markets." : ""} detailOpen={!!open} onBack={() => setOpen("")}
     detailTitle={cotDetailTitle(data?.rows.find((row) => row.contractCode === open)?.marketName, open)}
-    detailContent={open ? <CotDetail key={`${family}:${open}`} width={width} height={Math.max(3, height - 2)} focused={focused}
+    detailContent={open ? <CotDetail key={`${family}:${open}`} width={width} height={Math.max(3, height - 1)} focused={focused}
       code={open} family={family} traderClass={traderClass} onClassChange={setClass} /> : null} />;
 }
 
+/**
+ * The charted class's net over the contract's history, with the front price
+ * below it when the band has rows for both. The legend formats each series in
+ * its own units, which the kit's value-only formatter cannot.
+ */
+/**
+ * Each panel's ticks in its own units, with decimals from its own range: whole
+ * contracts in thousands for the net, the price at the precision its span needs
+ * (so 116 / 84.1 / 51.8 reads 120 / 80 / 50).
+ */
+const cotAxisValue = (value: number, domain: CompositeAxisDomain) => domain.unitGroup === "positions"
+  ? `${(value / 1_000).toFixed(spanDigits({ min: domain.min / 1_000, max: domain.max / 1_000 }))}K`
+  : value.toFixed(spanDigits(domain));
+
+function CotChart({ series, width, height }: { series: ResolvedSeries[]; width: number; height: number }) {
+  const withPrice = series.length > 1 && height >= PRICE_PANEL_MIN_ROWS;
+  const shown = useMemo(() => withPrice ? series : series.filter((entry) => entry.id === "net"), [series, withPrice]);
+  return <CompositeChart series={shown} panels={withPrice ? NET_PRICE_PANELS : NET_PANEL} width={width} height={height}
+    focused={false} navigable={false} showLegend showTimeAxis formatValue={cotLegendValue} formatAxisValue={cotAxisValue}
+    remoteKind="cot-history" />;
+}
+
 function CotDetail({ width, height, focused, code, family, traderClass, onClassChange }: Pick<PaneProps, "width" | "height" | "focused"> & { code: string; family: CotFamily; traderClass: CotClass; onClassChange: (value: CotClass) => void }) {
   const colors = useThemeColors();
   const session = useResearchCloudSession();
   const loader = useCallback(() => loadCotDetail(code, family), [code, family, session.requestKey]);
-  const resource = useAsyncResource(loader, { clearOnError: clearDenied });
+  const resource = useAsyncResource(loader, { clearOnError: isAccessDenied });
   const data = resource.data;
   const payload = data?.payload;
   const current = payload?.positions.find((row) => row.id === traderClass);
   const series = useMemo(() => data ? cotChartSeries(data.payload, traderClass, data.price, colors) : [], [data, traderClass, colors]);
   // The selected class row already carries the net and both ranks, and the
-  // legend the charted net, so the detail opens on the chart. A rank over a
-  // short history is a limitation, so it sits behind the warning.
+  // legend names the class it charts, so the detail opens on the chart. A rank
+  // over a short history is a limitation, so it sits behind the warning.
   const partialRanks = current ? ([1, 3] as const).flatMap((years) => {
     const window = years === 1 ? current.percentile1Y : current.percentile3Y;
     return window.completeWindow ? [] : [`${years}Y percentiles rank a partial history${window.historyStart ? ` from ${window.historyStart}` : ""}.`];
   }) : [];
-  const chartHeight = Math.max(6, Math.floor((height - 1) * 0.65));
+  const charted = (series.find((entry) => entry.id === "net")?.points ?? []).filter((point) => point.value != null).length >= 2;
+  const chart = useMemo<ChartTableChart | null>(() => charted ? {
+    // The kit reads the strip from the first series, the net.
+    series, formatValue: (value) => cotInteger(value, true),
+    render: (size) => <CotChart series={series} width={size.width} height={size.height} />,
+  } : null, [charted, series]);
   useAutoRefresh(resource.updatedAt, resource.load);
   useShortcut((event) => {
     if (focused && !event.targetEditable && !event.ctrl && !event.meta && !event.alt && !event.super && event.name === "r") {
@@ -151,15 +178,13 @@ function CotDetail({ width, height, focused, code, family, traderClass, onClassC
   usePaneStatusFooter({ registrationId: "cot:detail", loading: resource.loading, error: resource.error,
     info: payload ? [{ id: "as-of", parts: [{ text: `CFTC ${payload.asOf ?? "--"} · contracts${data?.priceAsOf ? ` · ${data.priceSymbol} ${data.priceAsOf}` : ""}`, tone: "muted" }] }] : [] });
   return <PaneStatusBody loading={resource.loading && !data} error={!data ? resource.error : null} empty={!!payload && !payload.contract} subject="COT contract">
-    {payload && data ? <Box width={width} height={height} flexDirection="column">
-      <CompositeChart series={series} panels={data.price.length ? [{ id: "price", height: 2 }, { id: "net", height: 1 }] : [{ id: "net" }]}
-        width={width} height={chartHeight} focused={focused} showLegend showTimeAxis navigable={false} formatValue={cotLegendValue} remoteKind="cot-history" />
-      <DataTableView columns={POSITION_COLUMNS} items={payload.positions} focused={focused} rootWidth={width} rootHeight={Math.max(3, height - chartHeight)}
-        selection={{ kind: "id", selectedId: traderClass, getId: (row) => row.id, onChange: (id) => onClassChange(id as CotClass) }}
-        onActivate={(row) => onClassChange(row.id)} getItemKey={(row) => row.id} sortColumnId={null} sortDirection="asc"
-        renderCell={(row: CotClassSummary, column) => ({ text: column.id === "name" ? row.label : column.id === "one" ? rank(row.percentile1Y.value)
-          : column.id === "three" ? rank(row.percentile3Y.value) : cotInteger(column.id === "change" ? row.weeklyChange : row[column.id as "long" | "short" | "net"], column.id === "net" || column.id === "change") })}
-        emptyStateTitle="Position classes unavailable." />
-    </Box> : null}
+    {payload && data ? <DataTableView columns={POSITION_COLUMNS} items={payload.positions} focused={focused} rootWidth={width} rootHeight={height}
+      rootBefore={<ChartTableHeader width={width} height={height} tableRows={payload.positions.length} chart={chart}
+        tableColumns={POSITION_COLUMNS} />}
+      selection={{ kind: "id", selectedId: traderClass, getId: (row) => row.id, onChange: (id) => onClassChange(id as CotClass) }}
+      onActivate={(row) => onClassChange(row.id)} getItemKey={(row) => row.id} sortColumnId={null} sortDirection="asc"
+      renderCell={(row: CotClassSummary, column) => ({ text: column.id === "name" ? row.label : column.id === "one" ? rank(row.percentile1Y.value)
+        : column.id === "three" ? rank(row.percentile3Y.value) : cotInteger(column.id === "change" ? row.weeklyChange : row[column.id as "long" | "short" | "net"], column.id === "net" || column.id === "change") })}
+      emptyStateTitle="Position classes unavailable." /> : null}
   </PaneStatusBody>;
 }

package/src/plugins/builtin/credit-boards/cdx-pane.tsx

@@ -0,0 +1,140 @@
+import { useMemo } from "react";
+import {
+  ChartTableHeader,
+  CompositeChart,
+  MarketBoardStack,
+  PaneStatusBody,
+  type ChartTableChart,
+  type PaneFooterSegment,
+  type StatItem,
+} from "../../../components";
+import { staticSeries } from "../../../components/chart/static/series";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
+import { usePaneStatusFooter } from "../../../components/layout/pane/status-footer";
+import { signedMoveColor, StatChartDetail } from "../../../components/market-board";
+import { useAsyncResource } from "../../../react/async-resource";
+import { useAutoRefresh } from "../../../react/auto-refresh";
+import { colors } from "../../../theme/colors";
+import { useThemeColors } from "../../../theme/theme-context";
+import type { PaneProps } from "../../../types/plugin";
+import { formatPercentileRank } from "../../../utils/format";
+import { usePluginPaneState } from "../../runtime";
+import { formatAsOf } from "../cds/model";
+import { getCachedCdxBoard, loadCdxBoard } from "./client";
+import {
+  axisFormatter,
+  cdxRows,
+  formatContract,
+  formatLevel,
+  formatMove,
+  type CdxRow,
+} from "./model";
+
+const PANELS = [{ id: "main" }];
+const EMPTY_ROWS: CdxRow[] = [];
+
+/** The index's 5Y line, named as the board names it. */
+function historySeries(row: CdxRow) {
+  return [staticSeries(row.index.points.map((point) => ({
+    date: new Date(`${point.date}T00:00:00Z`), observedAt: new Date(`${point.date}T00:00:00Z`), value: point.level,
+  })), { id: row.id, label: `${row.label} 5Y`, color: colors.positive, calendarSpaced: true })];
+}
+
+function historyChart(row: CdxRow): ChartTableChart {
+  const quote = row.index.quote;
+  return {
+    series: row.index.points.length >= 3 ? historySeries(row) : [],
+    formatValue: (value: number) => formatLevel(quote, value),
+    formatAxisValue: axisFormatter(quote),
+    remoteKind: "cdx-history",
+    // An index without a history keeps the band, so the board does not jump under the cursor.
+    empty: `No history for ${row.label}`,
+  };
+}
+
+function HistoryChart({ row, width, height, focused }: { row: CdxRow; width: number; height: number; focused: boolean }) {
+  const series = useMemo(() => historySeries(row), [row]);
+  return <CompositeChart series={series} panels={PANELS} width={width} height={height} focused={focused} showLegend={false}
+    navigable={false} showTimeAxis formatAxisValue={axisFormatter(row.index.quote)} remoteKind="cdx-history" />;
+}
+
+function IndexDetail({ row, width, height, focused }: { row: CdxRow; width: number; height: number; focused: boolean }) {
+  const { index, year } = row;
+  const items: StatItem[] = [
+    { id: "level", label: index.quote === "spread" ? "5Y spread" : "5Y price", value: formatLevel(index.quote, index.level),
+      detail: `${formatPercentileRank(year.percentile, "1Y")} · ${index.date ?? "--"}` },
+    { id: "1d", label: "1D", value: formatMove(index.quote, index.change1D) },
+    { id: "1w", label: "1W", value: formatMove(index.quote, index.change1W) },
+    { id: "range", label: "1Y range", value: `${formatLevel(index.quote, year.low)} to ${formatLevel(index.quote, year.high)}` },
+    { id: "contract", label: "Contract", value: formatContract(index.maturity), detail: `${index.couponBp}bp coupon` },
+    { id: "prints", label: "Prints", value: index.prints == null ? "--" : String(index.prints) },
+  ];
+  return (
+    <StatChartDetail items={items} width={width} height={height} empty={index.points.length < 3}
+      emptySubject="index history" emptyTitle="No history available."
+      renderChart={(chartHeight) => <HistoryChart row={row} width={width} height={chartHeight} focused={focused} />} />
+  );
+}
+
+export function CdxPane({ paneId, focused, width, height }: PaneProps) {
+  const theme = useThemeColors();
+  const resource = useAsyncResource(loadCdxBoard, { initialData: getCachedCdxBoard });
+  const { loading, load: refresh, reload } = resource;
+  const payload = resource.data?.payload ?? null;
+  const rows = useMemo(() => payload ? cdxRows(payload.indexes, payload.asOf) : EMPTY_ROWS, [payload]);
+  const [selectedId, setSelectedId] = usePluginPaneState<string | null>("selected", null);
+  const [openId, setOpenId] = usePluginPaneState<string | null>("open", null);
+  useAutoRefresh(resource.updatedAt, refresh);
+  usePaneRefreshKey(reload, { focused, enabled: !loading });
+
+  const asOf = formatAsOf(payload?.asOf ?? null);
+  const info = useMemo<PaneFooterSegment[]>(() => [
+    ...(asOf ? [{ id: "as-of", parts: [{ text: `as of ${asOf}`, tone: "muted" as const }] }] : []),
+    ...(payload ? [{ id: "delayed", parts: [{ text: "delayed", tone: "muted" as const }] }] : []),
+    ...(resource.data?.stale ? [{ id: "stale", parts: [{ text: "STALE", tone: "warning" as const }] }] : []),
+  ], [asOf, payload, resource.data?.stale]);
+  usePaneStatusFooter({
+    registrationId: paneId,
+    loading,
+    error: resource.error ?? resource.data?.refreshError ?? null,
+    info,
+  });
+
+  // The 1W move and the print count ride beside the board's own 1D column.
+  const extraColumns = useMemo(() => [
+    {
+      column: { id: "week", label: "1W", width: 10, align: "right" as const },
+      sortValue: (row: CdxRow) => row.week,
+      renderCell: (row: CdxRow) => ({
+        text: formatMove(row.index.quote, row.index.change1W),
+        color: signedMoveColor(row.week, row.adverseMove, theme),
+      }),
+    },
+    {
+      column: { id: "prints", label: "PRINTS", width: 7, align: "right" as const },
+      sortValue: (row: CdxRow) => row.index.prints,
+      renderCell: (row: CdxRow) => ({
+        text: row.index.prints == null ? "--" : String(row.index.prints),
+        color: theme.textMuted,
+      }),
+    },
+  ], [theme]);
+
+  if (rows.length === 0) {
+    return (
+      <PaneStatusBody loading={loading} error={resource.error} empty={!loading && !resource.error}
+        loadingLabel="Loading index CDS..." subject="Index CDS" align="center" width={width} height={height} />
+    );
+  }
+
+  // The selected index's history sits above the board; the legend names it.
+  const selected = rows.find((row) => row.id === selectedId) ?? rows[0];
+  return (
+    <MarketBoardStack rows={rows} width={width} height={height} focused={focused}
+      rootBefore={({ columns }) => <ChartTableHeader width={width} height={height} tableRows={rows.length}
+        tableColumns={columns} chart={selected ? historyChart(selected) : null} />}
+      selectedId={selectedId} onSelectedIdChange={setSelectedId} openId={openId} onOpenIdChange={setOpenId}
+      labelHeader="INDEX" labelWidth={16} valueLabel="5Y" valueWidth={9} signedChange extraColumns={extraColumns}
+      renderDetail={(row) => <IndexDetail row={row} width={width} height={Math.max(5, height - 2)} focused={focused} />} />
+  );
+}