gloomberb 0.15.2 → 0.15.3

package/src/plugins/builtin/rate-path/client.ts

@@ -1,7 +1,7 @@
 import { apiClient } from "../../../api-client";
-import { ApiRequestError } from "../../../api-client/errors";
 import type { RatePathPayload } from "../../../api-client/rates";
 import { createPluginCache } from "../../../data/plugin-cache";
+import { loadCloudResource, unavailableOnServer } from "../shared/cloud-resource";
 
 export const ratePathCache = createPluginCache<RatePathPayload>({
   kind: "rate-path", source: "gloom-cloud", schemaVersion: 1,
@@ -15,11 +15,11 @@ export function validateRatePath(payload: RatePathPayload): RatePathPayload {
     || !payload.current?.effr || !payload.current.targetLower || !payload.current.targetUpper
     || !payload.dotPlot || !Array.isArray(payload.dotPlot.points) || !payload.schedule
     || !Number.isFinite(Date.parse(payload.fetchedAt))) {
-    throw new Error("Gloom Cloud returned an invalid rate path");
+    throw new Error("The server returned an invalid rate path");
   }
   for (const row of [...payload.meetings, ...payload.fedFunds, ...payload.sofr]) {
     if (!numberOrNull(row.impliedRate) || !numberOrNull(row.percentile) || !Number.isInteger(row.samples)) {
-      throw new Error("Gloom Cloud returned an invalid rate observation");
+      throw new Error("The server returned an invalid rate observation");
     }
   }
   for (const meeting of payload.meetings) {
@@ -29,7 +29,7 @@ export function validateRatePath(payload: RatePathPayload): RatePathPayload {
       || meeting.probabilities.some((point) => !Number.isFinite(point.targetMidpoint)
         || !Number.isFinite(point.probability) || point.probability < 0 || point.probability > 1)
       || meeting.probabilities.length > 0 && Math.abs(meeting.probabilities.reduce((sum, point) => sum + point.probability, 0) - 1) > 1e-6) {
-      throw new Error("Gloom Cloud returned invalid meeting probabilities");
+      throw new Error("The server returned invalid meeting probabilities");
     }
   }
   return payload;
@@ -37,12 +37,7 @@ export function validateRatePath(payload: RatePathPayload): RatePathPayload {
 
 export async function fetchRatePath(client: Pick<typeof apiClient, "getCloudRatePath"> = apiClient): Promise<RatePathPayload> {
   try { return validateRatePath(await client.getCloudRatePath()); }
-  catch (error) {
-    if (error instanceof ApiRequestError && error.status === 404) {
-      throw new Error("Rate path is not available on this Gloom Cloud server yet");
-    }
-    throw error;
-  }
+  catch (error) { throw unavailableOnServer(error, "Rate path is not available yet."); }
 }
 
 export function getCachedRatePath(): RatePathPayload | null {
@@ -52,10 +47,6 @@ export function getCachedRatePath(): RatePathPayload | null {
 }
 
 export async function loadRatePath(force = false): Promise<RatePathPayload> {
-  const result = await ratePathCache.load("usd", () => fetchRatePath(), { force });
-  if (result.error instanceof ApiRequestError && [401, 403].includes(result.error.status ?? 0)) throw result.error;
-  return {
-    ...result.data, stale: result.stale || result.data.stale,
-    gaps: [...result.data.gaps, ...(result.refreshError ? [result.refreshError] : [])],
-  };
+  const { payload, stale, refreshError } = await loadCloudResource(ratePathCache, "usd", () => fetchRatePath(), { force });
+  return { ...payload, stale: stale || payload.stale, gaps: [...payload.gaps, ...(refreshError ? [refreshError] : [])] };
 }

package/src/plugins/builtin/rate-path/headless.ts

@@ -1,13 +1,13 @@
 import type { RateMeeting } from "../../../api-client/rates";
 import type { HeadlessPaneColumn, HeadlessPaneDefinition } from "../../../types/plugin";
 import { fetchRatePath } from "./client";
-import { rateText } from "./model";
+import { meetingMoves, moveOddsText, movesPriced, movesText, rateText } from "./model";
+import { finiteOrNull } from "../../../utils/guards";
 
-const num = (value: unknown): number | null => typeof value === "number" && Number.isFinite(value) ? value : null;
-const rate = (value: unknown) => rateText(num(value));
-const pctl = (value: unknown) => num(value)?.toFixed(0) ?? "--";
+const rate = (value: unknown) => rateText(finiteOrNull(value));
+const pctl = (value: unknown) => finiteOrNull(value)?.toFixed(0) ?? "--";
 const bps = (value: unknown) => {
-  const bp = num(value);
+  const bp = finiteOrNull(value);
   return bp == null ? "--" : `${bp > 0 ? "+" : ""}${bp.toFixed(1)}bp`;
 };
 const timestamp = (value: unknown) => typeof value === "string" ? value.replace("T", " ").slice(0, 16) : "--";
@@ -19,7 +19,7 @@ const probabilities = (value: unknown) => {
 
 const contractColumns: HeadlessPaneColumn[] = [
   { key: "symbol", header: "Symbol" }, { key: "month", header: "Month" },
-  { key: "price", header: "Price", align: "right", format: (value) => num(value)?.toFixed(3) ?? "--" },
+  { key: "price", header: "Price", align: "right", format: (value) => finiteOrNull(value)?.toFixed(3) ?? "--" },
   { key: "impliedRate", header: "Implied rate", align: "right", format: rate },
   { key: "percentile", header: "Pctl 1Y", align: "right", format: pctl },
   { key: "samples", header: "Samples", align: "right" },
@@ -33,6 +33,7 @@ export const ratePathHeadless: HeadlessPaneDefinition<"bundle"> = {
   shape: "bundle", argument: { kind: "none" }, options: [], describe: "US rate path",
   async load(_args, ctx) {
     const data = await fetchRatePath(ctx.apiClient);
+    const moves = meetingMoves(data.meetings);
     return {
       sections: [
         { title: "Current policy", columns: [
@@ -41,14 +42,17 @@ export const ratePathHeadless: HeadlessPaneDefinition<"bundle"> = {
           { key: "samples", header: "Samples", align: "right" }, { key: "source", header: "Source" }, { key: "stale", header: "Stale" },
         ], rows: Object.entries(data.current).map(([name, metric]) => ({ name, ...metric })) },
         { title: "FOMC meetings", columns: [
-          { key: "date", header: "Date" }, { key: "impliedRate", header: "Implied rate", align: "right", format: rate },
-          { key: "targetMidpoint", header: "Target midpoint", align: "right", format: (value) => num(value)?.toFixed(3) ?? "--" },
+          { key: "date", header: "Date" },
+          { key: "moves", header: "Moves", align: "right", format: (value) => movesText(finiteOrNull(value)) },
+          { key: "moveOdds", header: "P(move)", align: "right", format: (value) => moveOddsText(finiteOrNull(value)) },
+          { key: "impliedRate", header: "Implied rate", align: "right", format: rate },
+          { key: "targetMidpoint", header: "Target midpoint", align: "right", format: (value) => finiteOrNull(value)?.toFixed(3) ?? "--" },
           { key: "changeBps", header: "Change", align: "right", format: bps },
           { key: "percentile", header: "Pctl 1Y", align: "right", format: pctl },
           { key: "samples", header: "Samples", align: "right" }, { key: "asOf", header: "As of UTC", format: timestamp },
           { key: "probabilities", header: "Probabilities", format: probabilities },
           { key: "method", header: "Method" }, { key: "reason", header: "Reason" },
-        ], rows: data.meetings.map((meeting) => ({ ...meeting })) },
+        ], rows: data.meetings.map((meeting) => ({ ...meeting, moves: movesPriced(meeting), moveOdds: moves.get(meeting.date) ?? null })) },
         { title: "Fed funds contracts", columns: contractColumns, rows: data.fedFunds.map((contract) => ({ ...contract })) },
         { title: "SOFR contracts", columns: contractColumns, rows: data.sofr.map((contract) => ({ ...contract })) },
       ],

package/src/plugins/builtin/rate-path/model.ts

@@ -20,38 +20,95 @@ export const CHART_GHOST_LABELS: ReadonlySet<string> = new Set(["1W", "1M"]);
 /** Colours by role, so the target band never shares the implied path's colour. Ghosts are keyed by look-back. */
 export interface RatePathPalette { path: string; ghosts: Readonly<Record<string, string>>; band: string; projection: string }
 
+const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+/** A meeting as the axis and the readout name it: "Oct '26", so the year never reads as a day. */
+export function meetingLabel(date: string): string {
+  return `${MONTH_NAMES[Number(date.slice(5, 7)) - 1] ?? date.slice(5, 7)} '${date.slice(2, 4)}`;
+}
+
+/** 25bp moves priced by a meeting: its VS NOW change in steps, `+0.62` for most of one hike. */
+export function movesPriced(meeting: RateMeeting): number | null {
+  return meeting.changeBps == null || !Number.isFinite(meeting.changeBps) ? null : meeting.changeBps / 25;
+}
+
+/**
+ * The 25bp moves priced at each meeting on its own, by date: the step in the
+ * implied target midpoint since the meeting before, and since today's target
+ * range for the next one. It is the same two-outcome reading as the
+ * probabilities, so a step of 0.62 is 62% odds of a hike, and for the next
+ * meeting it equals `meetingProbability` of the range one move away. A
+ * meeting after an unpriced one has no step of its own.
+ */
+export function meetingMoves(meetings: readonly RateMeeting[]): Map<string, number | null> {
+  const moves = new Map<string, number | null>();
+  let previous: number | null = 0;
+  for (const meeting of [...meetings].sort((a, b) => a.date.localeCompare(b.date))) {
+    const priced = movesPriced(meeting);
+    moves.set(meeting.date, priced == null || previous == null ? null : priced - previous);
+    previous = priced;
+  }
+  return moves;
+}
+
+/** Moves priced, signed to two places: `+0.62`, `-1.20`. */
+export function movesText(value: number | null): string {
+  if (value == null || !Number.isFinite(value)) return "--";
+  const text = value.toFixed(2);
+  return /[1-9]/.test(text) ? `${value > 0 ? "+" : ""}${text}` : "0.00";
+}
+
+/** A meeting's odds of a move, `62% hike`; above 100% more than one move is priced at that meeting. */
+export function moveOddsText(step: number | null): string {
+  if (step == null || !Number.isFinite(step)) return "--";
+  const percent = Math.round(Math.abs(step) * 100);
+  return percent === 0 ? "0%" : `${percent}% ${step > 0 ? "hike" : "cut"}`;
+}
+
+/** A move in the implied rate, in basis points like the VS NOW column. */
+export function rateChangeText(value: number | null): string {
+  if (value == null || !Number.isFinite(value)) return "--";
+  const text = (value * 100).toFixed(1);
+  return /[1-9]/.test(text) ? `${value > 0 ? "+" : ""}${text}bp` : "0.0bp";
+}
+
+/**
+ * The implied path, then what it is read against: the target range drawn as
+ * one reference band, the SEP medians as points, then the look-backs. The
+ * legend names them in this order and drops from the end when narrow; the
+ * readout still names the look-backs. Paths are steps: the policy rate holds
+ * from one meeting to the next.
+ */
 export function ratePathCurves(data: RatePathPayload, palette?: RatePathPalette): CurveSeries[] {
   const points = data.meetings.map((meeting) => ({
-    id: meeting.date, label: meeting.date.slice(5), x: Date.parse(meeting.date),
+    id: meeting.date, label: meetingLabel(meeting.date), x: Date.parse(meeting.date),
     value: meeting.impliedRate, asOf: meeting.asOf,
   }));
-  const series: CurveSeries[] = [{ id: "implied", label: "Implied EFFR", asOf: data.asOf, color: palette?.path, points }];
-  for (const ghost of data.ghosts) {
-    if (CHART_GHOST_LABELS.has(ghost.label) && ghost.points.some((point) => point.impliedRate != null)) series.push({
-      id: ghost.label, label: ghost.label, asOf: ghost.asOf, color: palette?.ghosts[ghost.label],
-      points: ghost.points.map((point) => ({
-        id: point.date, label: point.date.slice(5), x: Date.parse(point.date),
-        value: point.impliedRate, asOf: ghost.asOf,
-      })),
-    });
-  }
+  const series: CurveSeries[] = [{ id: "implied", label: "EFFR", role: "primary", style: "step", asOf: data.asOf, color: palette?.path, points }];
   for (const key of ["targetLower", "targetUpper"] as const) {
     const metric = data.current[key];
     if (metric.value == null) continue;
-    series.push({ id: key, label: key === "targetLower" ? "Target floor" : "Target ceiling", asOf: metric.asOf, color: palette?.band,
+    series.push({ id: key, label: "Target range", role: "reference", asOf: metric.asOf, color: palette?.band,
       points: points.map((point) => ({ ...point, value: metric.value, asOf: metric.asOf })) });
   }
   const first = points[0]?.x, last = points.at(-1)?.x;
   const projections = data.dotPlot.points.flatMap((point) => {
     if (typeof point.year !== "number") return [];
-    const date = `${point.year}-12-31`;
-    const x = Date.parse(date);
-    // The label doubles as an axis tick between meeting dates, so it reads as a date.
+    const x = Date.parse(`${point.year}-12-31`);
     return first != null && last != null && x >= first && x <= last
-      ? [{ id: `sep-${point.year}`, label: date.slice(5), x, value: point.rate, asOf: data.dotPlot.asOf }]
+      ? [{ id: `sep-${point.year}`, label: `SEP ${point.year}`, x, value: point.rate, asOf: data.dotPlot.asOf }]
       : [];
   });
-  if (projections.length) series.push({ id: "sep", label: "SEP median", asOf: data.dotPlot.asOf, style: "points", color: palette?.projection, points: projections });
+  if (projections.length) series.push({ id: "sep", label: "SEP median", role: "marker", asOf: data.dotPlot.asOf, color: palette?.projection, points: projections });
+  for (const ghost of data.ghosts) {
+    if (CHART_GHOST_LABELS.has(ghost.label) && ghost.points.some((point) => point.impliedRate != null)) series.push({
+      id: ghost.label, label: ghost.label, role: "ghost", style: "step", asOf: ghost.asOf, color: palette?.ghosts[ghost.label],
+      points: ghost.points.map((point) => ({
+        id: point.date, label: meetingLabel(point.date), x: Date.parse(point.date),
+        value: point.impliedRate, asOf: ghost.asOf,
+      })),
+    });
+  }
   return series;
 }
 

package/src/plugins/builtin/rate-path/pane.tsx

@@ -1,27 +1,36 @@
 import { useCallback, useMemo, useState } from "react";
-import { CurveSurface, curveGhostColors, DataTableView, PaneStatusBody, StatGrid, statGridRows, Tabs, usePaneHeaderTabs, usePaneNoticeFooter, usePaneStatusFooter, type DataTableCell, type DataTableColumn, type StatItem } from "../../../components";
-import { ApiRequestError } from "../../../api-client/errors";
+import { chartTableChromeRows, ChartTableHeader, CurveSurface, curveGhostColors, DataTableView, formatPercentAxis, PaneStatusBody, useChartTableSelection, usePaneNoticeFooter, usePaneStatusFooter, usePaneTabs, type DataTableCell, type DataTableColumn, type StatItem } from "../../../components";
+import { curveStrip, curveSurfaceMinRows } from "../../../components/chart/curve";
+import { isAccessDenied } from "../../../api-client/errors";
 import type { RateContract, RateMeeting } from "../../../api-client/rates";
-import { useAsyncResource, usePluginPaneState, useShortcut } from "../../../public/react";
-import { blendHex, colors } from "../../../theme/colors";
+import { useAsyncResource, usePluginPaneState } from "../../../public/react";
+import { blendHex, colors, priceColor } from "../../../theme/colors";
 import type { PaneProps } from "../../../types/plugin";
 import { Box } from "../../../ui";
-import { isPlainKey } from "../../../utils/keyboard";
-import { useAutoRefresh } from "../shared/auto-refresh";
+import { nextHeaderSort, type SortDirection } from "../../../utils/sort-values";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
+import { useAutoRefresh } from "../../../react/auto-refresh";
 import { futuresSessionRefreshInterval } from "../shared/futures-session";
 import { useResearchCloudSession } from "../shared/research-cloud-session";
 import { getCachedRatePath, loadRatePath } from "./client";
-import { meetingProbability, percentileText, probabilityTargets, ratePathCurves, rateText } from "./model";
+import { meetingLabel, meetingMoves, meetingProbability, moveOddsText, movesPriced, movesText, percentileText, probabilityTargets, rateChangeText, ratePathCurves, rateText } from "./model";
 
 const TABS = [{ value: "path", label: "Path" }, { value: "probabilities", label: "Probabilities" }, { value: "contracts", label: "Contracts" }, { value: "projections", label: "Projections" }];
-const clearDenied = (error: unknown) => error instanceof ApiRequestError && [401, 403].includes(error.status ?? 0);
+// What is priced by and at each meeting leads, as on a rate probability monitor; the implied level follows.
 const MEETING_COLUMNS: DataTableColumn[] = [
   { id: "date", label: "MEETING", width: 12, align: "left" },
-  { id: "rate", label: "EFFR", width: 9, align: "right" },
+  { id: "moves", label: "MOVES", width: 7, align: "right" },
+  { id: "odds", label: "P(MOVE)", width: 10, align: "right" },
   { id: "change", label: "VS NOW", width: 9, align: "right" },
+  { id: "rate", label: "EFFR", width: 9, align: "right" },
   { id: "percentile", label: "PCTL 1Y", width: 10, align: "right" },
   { id: "asOf", label: "AS OF UTC", width: 20, align: "left" },
 ];
+const PROJECTION_COLUMNS: DataTableColumn[] = [
+  { id: "year", label: "YEAR END", width: 14, align: "left" },
+  { id: "rate", label: "SEP MEDIAN", width: 14, align: "right" },
+  { id: "asOf", label: "AS OF", width: 12, align: "left" },
+];
 const CONTRACT_COLUMNS: DataTableColumn[] = [
   { id: "symbol", label: "CONTRACT", width: 16, align: "left" },
   { id: "price", label: "PRICE", width: 10, align: "right" },
@@ -30,12 +39,35 @@ const CONTRACT_COLUMNS: DataTableColumn[] = [
   { id: "asOf", label: "AS OF UTC", width: 20, align: "left" },
 ];
 
+const CAPTION = "Implied EFFR % by FOMC meeting";
+/** "Oct 28", the meeting's day without its year. */
+function formatMeetingDay(date: string): string {
+  return `${meetingLabel(date).slice(0, 3)} ${Number(date.slice(8, 10))}`;
+}
+const meetingKey = (row: RateMeeting) => row.date;
+// Left and Right step along the meetings, the way the path reads.
+const meetingDate = (row: RateMeeting) => new Date(row.date);
+
+const DAY_MS = 86_400_000;
+
 function timestamp(value: string | null): string { return value?.replace("T", " ").slice(0, 16) ?? "--"; }
 function percentile(value: number | null): string { return value == null ? "--" : value.toFixed(0); }
-function meetingCell(row: RateMeeting, column: DataTableColumn): DataTableCell {
+/** Hikes up, cuts down, by the sign the text shows, so a move that rounds to zero stays neutral. */
+function signColor(value: number | null, digits: number): string {
+  return value == null || !Number.isFinite(value) ? colors.textDim : priceColor(Number(value.toFixed(digits)));
+}
+function bpText(value: number | null): string { return value == null ? "--" : rateChangeText(value / 100); }
+/** Days to a meeting, counted in UTC dates like the schedule. */
+function daysUntil(date: string, today = new Date().toISOString().slice(0, 10)): string {
+  const days = Math.round((Date.parse(date) - Date.parse(today)) / DAY_MS);
+  return days <= 0 ? "today" : days === 1 ? "tomorrow" : `in ${days} days`;
+}
+function meetingCell(row: RateMeeting, column: DataTableColumn, moves: ReadonlyMap<string, number | null>): DataTableCell {
   if (column.id === "date") return { text: row.date };
+  if (column.id === "moves") { const priced = movesPriced(row); return { text: movesText(priced), color: signColor(priced, 2) }; }
+  if (column.id === "odds") return { text: moveOddsText(moves.get(row.date) ?? null) };
   if (column.id === "rate") return { text: rateText(row.impliedRate) };
-  if (column.id === "change") return { text: row.changeBps == null ? "--" : `${row.changeBps > 0 ? "+" : ""}${row.changeBps.toFixed(1)}bp`, color: row.changeBps == null ? colors.textDim : row.changeBps < 0 ? colors.positive : colors.negative };
+  if (column.id === "change") return { text: bpText(row.changeBps), color: signColor(row.changeBps, 1) };
   if (column.id === "percentile") return { text: percentile(row.percentile) };
   return { text: timestamp(row.asOf), color: colors.textDim };
 }
@@ -50,99 +82,132 @@ function contractCell(row: RateContract, column: DataTableColumn): DataTableCell
 export function RatePathPane({ width, height, focused }: PaneProps) {
   const session = useResearchCloudSession();
   const loader = useCallback((force: boolean) => loadRatePath(force), [session.requestKey]);
-  const resource = useAsyncResource(loader, { initialData: getCachedRatePath, clearOnError: clearDenied });
+  const resource = useAsyncResource(loader, { initialData: getCachedRatePath, clearOnError: isAccessDenied });
   const [tab, setTab] = usePluginPaneState("tab", "path");
   const [selected, setSelected] = usePluginPaneState<string | null>("meeting", null);
-  const [sort, setSort] = useState({ id: "date", direction: "asc" as "asc" | "desc" });
+  const [sort, setSort] = useState<{ columnId: string; direction: SortDirection }>({ columnId: "date", direction: "asc" });
   const [contract, setContract] = useState<string | null>(null);
-  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 data = resource.data;
   const curves = useMemo(() => data ? ratePathCurves(data, {
     // Ghosts match CTM's look-back colours, so the policy band takes the accent instead of yellow.
     path: colors.positive, ghosts: curveGhostColors(colors), band: colors.borderFocused, projection: colors.negative,
   }) : [], [data]);
+  const moves = useMemo(() => meetingMoves(data?.meetings ?? []), [data]);
   const meetings = useMemo(() => [...(data?.meetings ?? [])].sort((a, b) => {
-    const key = { date: "date", rate: "impliedRate", change: "changeBps", percentile: "percentile", asOf: "asOf" }[sort.id] as keyof RateMeeting | undefined;
-    const left = key ? a[key] : null, right = key ? b[key] : null;
+    const value = (row: RateMeeting): string | number | null => {
+      switch (sort.columnId) {
+        case "date": return row.date;
+        case "moves": case "change": return row.changeBps;
+        case "odds": return moves.get(row.date) ?? null;
+        case "rate": return row.impliedRate;
+        case "percentile": return row.percentile;
+        case "asOf": return row.asOf;
+        default: return null;
+      }
+    };
+    const left = value(a), right = value(b);
     if (left == null) return right == null ? 0 : 1;
     if (right == null) return -1;
     const result = typeof left === "number" && typeof right === "number" ? left - right : String(left).localeCompare(String(right));
     return sort.direction === "asc" ? result : -result;
-  }), [data, sort]);
+  }), [data, moves, sort]);
   const targets = useMemo(() => probabilityTargets(data?.meetings ?? []), [data]);
-  const selectedMeeting = data?.meetings.find((meeting) => meeting.date === selected);
-  // The footer carries the snapshot time, so a figure or legend entry from the
-  // same day does not repeat it; older dates (EFFR's lag, ghosts, SEP) stay.
+  const contracts = useMemo(() => data ? [...data.fedFunds, ...data.sofr] : [], [data]);
+  const selectedId = meetings.some((meeting) => meeting.date === selected) ? selected! : meetings[0]?.date ?? null;
+  const selectedMeeting = data?.meetings.find((meeting) => meeting.date === selectedId);
+  useChartTableSelection({ rows: meetings, getId: meetingKey, getDate: meetingDate, selectedId, onSelect: setSelected,
+    focused, enabled: tab === "path" });
+  // The footer carries the snapshot time, so a figure from the same day does
+  // not repeat it; older dates (EFFR's lag, the slope's quote) stay.
   const footerDay = data?.asOf?.slice(0, 10) ?? null;
   const ownDate = (value: string | null | undefined) => value && value.slice(0, 10) !== footerDay ? value : null;
-  const chartCurves = useMemo(() => curves.map((series) => (
-    series.asOf?.slice(0, 10) === footerDay ? { ...series, asOf: undefined } : series
-  )), [curves, footerDay]);
+  // The next meeting's odds lead: what the market prices first.
+  const byDate = data?.meetings.toSorted((a, b) => a.date.localeCompare(b.date)) ?? [];
+  const next = byDate[0], last = byDate.at(-1);
+  const nextMove = next ? moves.get(next.date) ?? null : null;
   const statItems: StatItem[] = data ? [
+    ...(next ? [{ id: "next", label: "Next FOMC", value: moveOddsText(nextMove), color: nextMove == null ? undefined : signColor(nextMove, 2),
+      detail: `${formatMeetingDay(next.date)} · ${daysUntil(next.date)}` }] : []),
     { id: "effr", label: "EFFR", value: rateText(data.current.effr.value),
       detail: [percentileText(data.current.effr.percentile), ownDate(data.current.effr.asOf)].filter(Boolean).join(" · ") },
     { id: "target", label: "Target range", value: `${rateText(data.current.targetLower.value)} to ${rateText(data.current.targetUpper.value)}`,
       detail: [percentileText(data.current.targetUpper.percentile), ownDate(data.current.targetUpper.asOf)].filter(Boolean).join(" · ") },
-    ...(tab === "path" && data.slope ? [{ id: "slope", label: "Last-first",
-      value: data.slope.valueBps == null ? "--" : `${data.slope.valueBps > 0 ? "+" : ""}${data.slope.valueBps.toFixed(1)}bp`,
+    // How far the path climbs or falls from the next meeting to the last one shown.
+    ...(tab === "path" && data.slope && next && last && next !== last ? [{ id: "slope", label: `${meetingLabel(next.date)} to ${meetingLabel(last.date)}`,
+      value: bpText(data.slope.valueBps),
       detail: [percentileText(data.slope.percentile), ownDate(data.slope.asOf) && timestamp(data.slope.asOf)].filter(Boolean).join(" · ") }] : []),
   ] : [];
-  const statRows = statGridRows(statItems, width);
-  // The meeting table only needs its rows; the chart takes whatever is left.
-  // The desktop grows the table to the footer.
-  const bodyHeight = Math.max(9, height - statRows - tabRows);
-  const meetingTableHeight = Math.max(3, Math.min((data?.meetings.length ?? 0) + 2, Math.floor(bodyHeight * 0.5)));
-  const pathHeight = Math.max(6, bodyHeight - meetingTableHeight);
+  const bodyHeight = Math.max(1, height - tabRows);
+  // A rank or quote time every meeting shares says nothing per row; the
+  // columns stay only while the meetings differ.
+  const varies = (text: (row: RateMeeting) => string) => new Set(meetings.map(text)).size > 1;
+  const meetingColumns = MEETING_COLUMNS.filter((column) => column.id === "percentile" ? varies((row) => percentile(row.percentile))
+    : column.id === "asOf" ? varies((row) => timestamp(row.asOf)) : true);
+  const strip = tab === "path" ? curveStrip(curves, rateText, { caption: "Implied EFFR", selectedPointId: selectedId }) : null;
+  const pathChart = strip ? {
+    render: (size: { width: number; height: number }) => <CurveSurface series={curves} width={size.width} height={size.height} display="chart"
+      caption={CAPTION} xScale="linear" formatValue={rateText} formatChange={rateChangeText}
+      formatAxisValue={formatPercentAxis} selectedPointId={selectedId} onSelectedPointChange={setSelected} />,
+    minRows: curveSurfaceMinRows({ series: curves, width, caption: CAPTION }),
+    strip,
+  } : null;
+  // Every tab keeps the figures in the table's header zone; only Path draws the chart.
+  const header = (columns: DataTableColumn[], rows: number, chart: typeof pathChart = null) => {
+    const tableChromeRows = chartTableChromeRows(columns, width);
+    return <ChartTableHeader width={width} height={bodyHeight} figures={statItems} tableChromeRows={tableChromeRows}
+      tableRows={rows}
+      chart={chart} />;
+  };
   // Delayed contract quotes move all session; the curve follows them once a
   // minute while Globex trades and on the research cadence otherwise.
   useAutoRefresh(resource.updatedAt, resource.load, { intervalMs: futuresSessionRefreshInterval() });
-  useShortcut((event) => {
-    if (focused && isPlainKey(event, "r")) { event.preventDefault(); void resource.reload(); }
-  });
+  usePaneRefreshKey(() => void resource.reload(), { focused });
   usePaneNoticeFooter({ registrationId: "rate-path:notices", focused, notices: [
     ...(data?.gaps ?? []), ...(selectedMeeting?.reason ? [selectedMeeting.reason] : []),
   ] });
   usePaneStatusFooter({ registrationId: "rate-path", loading: resource.loading, error: resource.error,
-    info: data ? [
-      { id: "as-of", parts: [{ text: `as of ${timestamp(data.asOf)} UTC`, tone: "muted" }] },
-      ...(data.stale ? [{ id: "stale", parts: [{ text: "stale", tone: "warning" as const }] }] : []),
-    ] : [],
+    info: data ? [{ id: "as-of", parts: [{ text: `as of ${timestamp(data.asOf)} UTC`, tone: "muted" }] }] : [],
+    stale: data?.stale,
   });
-  const selection = { kind: "id" as const, selectedId: selected, getId: (row: RateMeeting) => row.date, onChange: setSelected };
-  const onHeaderClick = (id: string) => setSort((current) => ({ id, direction: current.id === id && current.direction === "asc" ? "desc" : "asc" }));
+  const selection = { kind: "id" as const, selectedId, getId: meetingKey, onChange: setSelected };
+  const onHeaderClick = (id: string) => setSort((current) => nextHeaderSort(current, id));
+  const halfWidth = data?.current.targetLower.value != null && data.current.targetUpper.value != null
+    ? (data.current.targetUpper.value - data.current.targetLower.value) / 2 : null;
+  const probabilityColumns: DataTableColumn[] = [MEETING_COLUMNS[0]!, ...targets.map((target) => ({ id: String(target),
+    label: halfWidth == null ? `${target.toFixed(3)}%` : `${(target - halfWidth).toFixed(2)}-${(target + halfWidth).toFixed(2)}%`,
+    width: 13, align: "right" as const }))];
   return <Box width={width} height={height} flexDirection="column">
-    {!tabsInHeader && <Tabs tabs={TABS} activeValue={tab} onSelect={setTab} focused={focused} dense />}
+    {tabStrip}
     <PaneStatusBody loading={resource.loading && !data} error={!data ? resource.error : null} empty={!resource.loading && !resource.error && !data} subject="rate path">
-      {data ? <>
-        <StatGrid items={statItems} width={width} />
-        {tab === "path" ? <>
-          <CurveSurface series={chartCurves} width={width} height={pathHeight} display="chart" valueLabel="Rate (%)" formatValue={rateText} formatX={(value) => new Date(value).toISOString().slice(0, 10)} selectedPointId={selected} onSelectedPointChange={setSelected} />
-          <DataTableView columns={MEETING_COLUMNS} items={meetings} selection={selection} focused={focused} sortColumnId={sort.id} sortDirection={sort.direction} onHeaderClick={onHeaderClick} getItemKey={(row) => row.date} renderCell={meetingCell} rootHeight={meetingTableHeight} emptyStateTitle="No scheduled FOMC meetings" />
-        </> : tab === "probabilities" ? <DataTableView
-          columns={[MEETING_COLUMNS[0]!, ...targets.map((target) => {
-            const halfWidth = data.current.targetLower.value != null && data.current.targetUpper.value != null
-              ? (data.current.targetUpper.value - data.current.targetLower.value) / 2 : null;
-            return { id: String(target), label: halfWidth == null ? `${target.toFixed(3)}%`
-              : `${(target - halfWidth).toFixed(2)}-${(target + halfWidth).toFixed(2)}%`, width: 13, align: "right" as const };
-          })]}
+      {data ? tab === "path" ? <DataTableView columns={meetingColumns} items={meetings} selection={selection} focused={focused}
+          sortColumnId={sort.columnId} sortDirection={sort.direction} onHeaderClick={onHeaderClick} getItemKey={meetingKey}
+          renderCell={(row, column) => meetingCell(row, column, moves)}
+          rootWidth={width} rootHeight={bodyHeight} emptyStateTitle="No scheduled FOMC meetings"
+          // A column left out because every meeting shares it still belongs in the export.
+          getExportMetadata={() => meetings[0] ? [
+            ...(meetingColumns.some((column) => column.id === "percentile") ? [] : [["percentile 1Y", percentile(meetings[0].percentile)]]),
+            ...(meetingColumns.some((column) => column.id === "asOf") ? [] : [["as of UTC", timestamp(meetings[0].asOf)]]),
+          ] : []}
+          rootBefore={header(meetingColumns, meetings.length, pathChart)} />
+        : tab === "probabilities" ? <DataTableView
+          columns={probabilityColumns}
           items={data.meetings} selection={selection} focused={focused} sortColumnId={null} sortDirection="asc"
-          getItemKey={(row) => row.date} rootHeight={Math.max(3, height - statRows - tabRows)} emptyStateTitle="Meeting probabilities unavailable"
+          getItemKey={meetingKey} rootWidth={width} rootHeight={bodyHeight} emptyStateTitle="Meeting probabilities unavailable"
+          rootBefore={header(probabilityColumns, data.meetings.length)}
           renderCell={(row, column) => {
             if (column.id === "date") return { text: row.date };
             const probability = meetingProbability(row, Number(column.id));
             return { text: probability == null ? "--" : `${(probability * 100).toFixed(1)}%`,
               backgroundColor: probability == null ? undefined : blendHex(colors.bg, colors.positive, probability * 0.7),
               color: probability != null && probability > 0.65 ? colors.bg : colors.text };
-          }} /> : tab === "contracts" ? <DataTableView columns={CONTRACT_COLUMNS} items={[...data.fedFunds, ...data.sofr]}
+          }} /> : tab === "contracts" ? <DataTableView columns={CONTRACT_COLUMNS} items={contracts}
             // A read-only cursor, so j/k and the page keys reach every contract.
-            selection={{ kind: "id", selectedId: contract, getId: (row) => row.symbol, onChange: setContract }} focused={focused} sortColumnId={null} sortDirection="asc" getItemKey={(row) => row.symbol} renderCell={contractCell} rootHeight={Math.max(3, height - statRows - tabRows)} emptyStateTitle="Futures strip unavailable" />
-          : <DataTableView columns={[
-            { id: "year", label: "YEAR END", width: 14, align: "left" },
-            { id: "rate", label: "SEP MEDIAN", width: 14, align: "right" },
-            { id: "asOf", label: "AS OF", width: 12, align: "left" },
-          ]} items={data.dotPlot.points} selection={{ kind: "none" }} focused={focused} sortColumnId={null} sortDirection="asc" getItemKey={(row) => String(row.year)} rootHeight={Math.max(3, height - statRows - tabRows)} emptyStateTitle="Fed projections unavailable" renderCell={(row, column) => ({ text: column.id === "year" ? String(row.year) : column.id === "rate" ? rateText(row.rate) : data.dotPlot.asOf })} />}
-      </> : null}
+            selection={{ kind: "id", selectedId: contract, getId: (row) => row.symbol, onChange: setContract }} focused={focused} sortColumnId={null} sortDirection="asc" getItemKey={(row) => row.symbol} renderCell={contractCell}
+            rootWidth={width} rootHeight={bodyHeight} emptyStateTitle="Futures strip unavailable" rootBefore={header(CONTRACT_COLUMNS, contracts.length)} />
+          : <DataTableView columns={PROJECTION_COLUMNS} items={data.dotPlot.points} selection={{ kind: "none" }} focused={focused} sortColumnId={null} sortDirection="asc" getItemKey={(row) => String(row.year)}
+            rootWidth={width} rootHeight={bodyHeight} emptyStateTitle="Fed projections unavailable" rootBefore={header(PROJECTION_COLUMNS, data.dotPlot.points.length)}
+            renderCell={(row, column) => ({ text: column.id === "year" ? String(row.year) : column.id === "rate" ? rateText(row.rate) : data.dotPlot.asOf })} /> : null}
     </PaneStatusBody>
   </Box>;
 }

package/src/plugins/builtin/realized-vol/client.ts

@@ -5,6 +5,8 @@ import type { DataProvider } from "../../../types/data-provider";
 import type { PricePoint } from "../../../types/financials";
 import { createSurfaceDependencies, loadVolatilitySurface, type SurfaceLoaderDependencies } from "../vol-surface/client";
 import { projectCurrentAtmIv, type CurrentAtmIvSnapshot } from "./model";
+import { abortable, abortError } from "../../../utils/async-deadline";
+import { errorMessage } from "../../../utils/errors";
 
 export interface RealizedVolatilityDependencies {
   loadChart(request: ChartRequest, options?: { forceRefresh?: boolean }): Promise<QueryEntry<PricePoint[]>>;
@@ -34,40 +36,28 @@ export interface RealizedHistorySnapshot {
   fetchedAt: number;
 }
 
-function abortError(): Error { return new DOMException("Volatility history load was cancelled", "AbortError"); }
-function message(error: unknown): string { return error instanceof Error ? error.message : String(error); }
-
-/** Cancels this consumer without aborting another pane's shared coordinator request. */
-async function abortable<T>(promise: Promise<T>, signal?: AbortSignal): Promise<T> {
-  if (!signal) return promise;
-  return new Promise<T>((resolve, reject) => {
-    const abort = () => reject(abortError());
-    if (signal.aborted) { abort(); return; }
-    signal.addEventListener("abort", abort, { once: true });
-    promise.then(resolve, reject).finally(() => signal.removeEventListener("abort", abort));
-  });
-}
+const CANCELLED = "Volatility history load was cancelled";
 
 export async function loadRealizedVolatilityHistory(
   request: RealizedHistoryRequest,
   dependencies: RealizedVolatilityDependencies = createRealizedVolatilityDependencies(),
 ): Promise<RealizedHistorySnapshot> {
-  if (request.signal?.aborted) throw abortError();
+  if (request.signal?.aborted) throw abortError(CANCELLED);
   const now = dependencies.now?.() ?? Date.now();
   const symbol = request.instrument.symbol.trim().toUpperCase();
   try {
     // 5Y supplies a 2Y cone plus 260-session warmup; range-only 5Y can be weekly.
     const entry = await abortable(dependencies.loadChart({ instrument: request.instrument,
-      bufferRange: "5Y", granularity: "resolution", resolution: "1d" }, { forceRefresh: request.forceRefresh }), request.signal);
-    if (request.signal?.aborted) throw abortError();
+      bufferRange: "5Y", granularity: "resolution", resolution: "1d" }, { forceRefresh: request.forceRefresh }), request.signal, CANCELLED);
+    if (request.signal?.aborted) throw abortError(CANCELLED);
     const history = resolveEntryValue(entry) ?? [];
     return { symbol, history, source: entry.source,
       stale: !!entry.error || (entry.staleAt != null && entry.staleAt <= now),
       error: entry.error?.message ?? (history.length === 0 ? "Daily price history unavailable" : null),
       fetchedAt: entry.fetchedAt ?? now };
   } catch (error) {
-    if (request.signal?.aborted || (error instanceof Error && error.name === "AbortError")) throw abortError();
-    return { symbol, history: [], source: null, stale: false, error: message(error), fetchedAt: now };
+    if (request.signal?.aborted || (error instanceof Error && error.name === "AbortError")) throw abortError(CANCELLED);
+    return { symbol, history: [], source: null, stale: false, error: errorMessage(error), fetchedAt: now };
   }
 }
 
@@ -89,13 +79,13 @@ export async function refreshCurrentAtmIv(
 ): Promise<CurrentAtmIvSnapshot> {
   const reference = previous.reference;
   if (!reference || !(request.spot > 0) || !Number.isFinite(request.spot)) return previous;
-  if (request.signal?.aborted) throw abortError();
+  if (request.signal?.aborted) throw abortError(CANCELLED);
   try {
     const next = projectCurrentAtmIv(await loadVolatilitySurface({ ...request, forceRefresh: true, expiries: [reference.expiration],
       settings: { ivSource: reference.ivSource } }, dependencies));
     return next.reference?.expiration === reference.expiration ? { ...previous, reference: next.reference } : previous;
   } catch (error) {
-    if (request.signal?.aborted || (error instanceof Error && error.name === "AbortError")) throw abortError();
+    if (request.signal?.aborted || (error instanceof Error && error.name === "AbortError")) throw abortError(CANCELLED);
     return previous;
   }
 }
@@ -105,14 +95,14 @@ export async function loadCurrentAtmIv(
   request: CurrentAtmIvRequest,
   dependencies: SurfaceLoaderDependencies = createSurfaceDependencies(),
 ): Promise<CurrentAtmIvSnapshot> {
-  if (request.signal?.aborted) throw abortError();
+  if (request.signal?.aborted) throw abortError(CANCELLED);
   if (!(request.spot > 0) || !Number.isFinite(request.spot)) {
     return { reference: null, error: "Current ATM IV needs a valid underlying quote", warnings: [] };
   }
   try {
     return projectCurrentAtmIv(await loadVolatilitySurface(request, dependencies));
   } catch (error) {
-    if (request.signal?.aborted || (error instanceof Error && error.name === "AbortError")) throw abortError();
-    return { reference: null, error: message(error), warnings: [] };
+    if (request.signal?.aborted || (error instanceof Error && error.name === "AbortError")) throw abortError(CANCELLED);
+    return { reference: null, error: errorMessage(error), warnings: [] };
   }
 }