gloomberb 0.15.2 → 0.15.3

package/src/plugins/builtin/futures-curve/client.ts

@@ -1,8 +1,8 @@
 import { apiClient } from "../../../api-client";
-import { ApiRequestError } from "../../../api-client/errors";
 import type { FuturesCurvePayload } from "../../../api-client/futures-curve";
 import { createPluginCache } from "../../../data/plugin-cache";
-import { normalizeCurveRoot } from "./model";
+import { loadCloudResource, unavailableOnServer } from "../shared/cloud-resource";
+import { archivedFuturesCurve, curveLookbackDate, normalizeCurveRoot } from "./model";
 
 export const futuresCurveCache = createPluginCache<FuturesCurvePayload>({
   kind: "futures-curve", source: "gloom-cloud", schemaVersion: 1,
@@ -19,17 +19,18 @@ export function validateFuturesCurve(data: FuturesCurvePayload, root: string): F
     || !data.catalogue || !data.slope || !timestamp(data.fetchedAt)
     || data.asOf !== null && !timestamp(data.asOf)
     || !["yahoo", "cboe"].includes(data.source) || !["available", "partial", "unavailable"].includes(data.status)) {
-    throw new Error("Gloom Cloud returned an invalid futures curve");
+    throw new Error("The server returned an invalid futures curve");
   }
   const symbols = new Set<string>();
   for (const row of data.contracts) {
     if (!row || typeof row.symbol !== "string" || !row.symbol || symbols.has(row.symbol)
       || typeof row.quoteUnit !== "string" || !row.quoteUnit
-      || !date(row.expiration) || !finiteOrNull(row.price) || typeof row.currency !== "string"
+      || !date(row.expiration) || !finiteOrNull(row.price) || row.change !== undefined && !finiteOrNull(row.change)
+      || typeof row.currency !== "string"
       || !rank(row.percentile) || !Number.isInteger(row.samples) || row.samples < 0
       || row.asOf !== null && !timestamp(row.asOf)
       || ![row.volume, row.openInterest, row.delayMinutes].every((value) => finiteOrNull(value) && (value === null || value >= 0))) {
-      throw new Error("Gloom Cloud returned an invalid futures contract");
+      throw new Error("The server returned an invalid futures contract");
     }
     symbols.add(row.symbol);
   }
@@ -38,13 +39,13 @@ export function validateFuturesCurve(data: FuturesCurvePayload, root: string): F
       || ghost.asOf !== null && !date(ghost.asOf) || !Array.isArray(ghost.points)
       || ghost.points.some((point) => !point || !symbols.has(point.symbol) || !date(point.expiration)
         || !finiteOrNull(point.price) || point.asOf !== null && !date(point.asOf))) {
-      throw new Error("Gloom Cloud returned invalid futures history");
+      throw new Error("The server returned invalid futures history");
     }
   }
   const slope = data.slope;
   if (![slope.value, slope.annualizedRollYield].every(finiteOrNull)
     || ![slope.percentile, slope.rollPercentile].every(rank) || !Number.isInteger(slope.samples) || slope.samples < 0
-    || slope.asOf !== null && !timestamp(slope.asOf)) throw new Error("Gloom Cloud returned an invalid futures spread");
+    || slope.asOf !== null && !timestamp(slope.asOf)) throw new Error("The server returned an invalid futures spread");
   return data;
 }
 
@@ -52,10 +53,7 @@ export async function fetchFuturesCurve(root: string, client: Pick<typeof apiCli
   const normalized = normalizeCurveRoot(root);
   if (!normalized) throw new Error(`Unsupported futures root: ${root}`);
   try { return validateFuturesCurve(await client.getCloudFuturesCurve(normalized), normalized); }
-  catch (error) {
-    if (error instanceof ApiRequestError && error.status === 404) throw new Error("Futures curves are not available on this Gloom Cloud server yet");
-    throw error;
-  }
+  catch (error) { throw unavailableOnServer(error, "Futures curves are not available yet."); }
 }
 
 export function getCachedFuturesCurve(root: string): FuturesCurvePayload | null {
@@ -65,8 +63,25 @@ export function getCachedFuturesCurve(root: string): FuturesCurvePayload | null
 }
 
 export async function loadFuturesCurve(root: string, force = false): Promise<FuturesCurvePayload> {
-  const result = await futuresCurveCache.load(root, () => fetchFuturesCurve(root), { 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(futuresCurveCache, root, () => fetchFuturesCurve(root), { force });
+  return { ...payload, stale: stale || payload.stale, gaps: [...payload.gaps, ...(refreshError ? [refreshError] : [])] };
+}
+
+/** The archived curve on a past date with the curves a week and a month before it. */
+export async function loadFuturesCurveAsOf(root: string, date: string,
+  client: Pick<typeof apiClient, "getCloudFuturesCurveAsOf"> = apiClient): Promise<FuturesCurvePayload> {
+  const normalized = normalizeCurveRoot(root);
+  if (!normalized) throw new Error(`Unsupported futures root: ${root}`);
+  try {
+    const [curve, week, month] = await Promise.all([
+      client.getCloudFuturesCurveAsOf(normalized, date),
+      client.getCloudFuturesCurveAsOf(normalized, curveLookbackDate(date, 7)).catch(() => null),
+      client.getCloudFuturesCurveAsOf(normalized, curveLookbackDate(date, 30)).catch(() => null),
+    ]);
+    if (!curve || curve.root !== normalized || !Array.isArray(curve.contracts) || !Array.isArray(curve.gaps)
+      || curve.contracts.some((row) => !row || typeof row.symbol !== "string" || !Number.isFinite(row.price))) {
+      throw new Error("The server returned an invalid past futures curve");
+    }
+    return archivedFuturesCurve(normalized, curve, { "1W": week, "1M": month }, new Date().toISOString());
+  } catch (error) { throw unavailableOnServer(error, "Past futures curves are not available yet."); }
 }

package/src/plugins/builtin/futures-curve/headless.ts

@@ -1,6 +1,6 @@
 import type { HeadlessPaneDefinition } from "../../../types/plugin";
-import { fetchFuturesCurve } from "./client";
-import { normalizeCurveRoot } from "./model";
+import { fetchFuturesCurve, loadFuturesCurveAsOf } from "./client";
+import { curveAsOfDate, normalizeCurveRoot } from "./model";
 
 /** Percentiles read as the pane shows them, a whole rank. */
 const rank = (value: number | null) => value == null ? null : Math.round(value);
@@ -9,12 +9,18 @@ export const futuresCurveHeadless: HeadlessPaneDefinition<"bundle"> = {
   discovery: { aliases: ["CTM"], dataRequirements: ["Gloom Cloud futures curve endpoint"],
     limitations: ["Listed-contract catalogues can be incomplete", "Ghosts and percentiles use the same listed contracts", "Cboe VIX is daily settlement"] },
   shape: "bundle", argument: { kind: "free-text", optional: true, placeholder: "root", description: "FUT root such as CL, ES, ZN or VX. Defaults to ES." },
-  options: [], describe: (args) => `Futures curve ${args.argument || "ES"}`,
+  // Only the pane reads the tab; the report always carries both.
+  options: [{ key: "tab", description: "Curve or the full contract table.", type: "enum",
+    values: [{ value: "curve" }, { value: "contracts", aliases: ["contract", "table"] }], defaultValue: "curve",
+    pluginState: { pluginId: "market-overview", key: "tab" } },
+  { key: "date", type: "string", settingKey: "asOfDate", description: "Past date (YYYY-MM-DD): the curve as the daily settlement archive held it, with the curves a week and a month before." }],
+  describe: (args) => `Futures curve ${args.argument || "ES"}`,
   async load(args, ctx) {
     const input = args.argument || "ES";
     const root = normalizeCurveRoot(input);
     if (!root) throw new Error(`Unsupported futures root: ${input}`);
-    const data = await fetchFuturesCurve(root, ctx.apiClient);
+    const date = curveAsOfDate(args.options.date);
+    const data = date ? await loadFuturesCurveAsOf(root, date, ctx.apiClient) : await fetchFuturesCurve(root, ctx.apiClient);
     return {
       sections: [
         { title: "Contracts", rows: data.contracts.map((row) => ({ ...row, percentile: rank(row.percentile) })) },

package/src/plugins/builtin/futures-curve/index.tsx

@@ -19,7 +19,8 @@ export const futuresCurveModule: PluginModule = {
   paneTemplates: [{ id: "futures-curve-pane", paneId: "futures-curve", label: "Futures Curve",
     description: "Listed futures contracts, historical curves, roll yield and open interest including VIX futures.",
     keywords: ["ctm", "futures", "curve", "contango", "backwardation", "roll", "vix"],
-    shortcut: { prefix: "CTM", argKind: "text", argPlaceholder: "root", argOptional: true },
+    shortcut: { prefix: "CTM", aliases: ["CT"], argKind: "text", argPlaceholder: "root", argOptional: true,
+      argOptions: () => CURVE_ROOTS },
     headless: futuresCurveHeadless,
     createInstance: (context, options) => {
       const input = options?.arg?.trim();

package/src/plugins/builtin/futures-curve/model.ts

@@ -1,10 +1,16 @@
-import type { FuturesCurvePayload, FuturesContract } from "../../../api-client/futures-curve";
+import type { FuturesCurveAsOfPayload, FuturesCurvePayload, FuturesContract } from "../../../api-client/futures-curve";
 import type { CurvePalette, CurveSeries } from "../../../components/chart/curve/model";
+import { spanDigits } from "../../../components/chart-table";
 import { compositeAxisTicks } from "../../../components/chart/composite/format";
 import type { CompositeAxisDomain } from "../../../components/chart/composite/types";
 import { FUTURES_CONTRACTS, tickDecimals } from "../futures/contracts";
+import { formatPercentileRank } from "../../../utils/format";
+import { compareSortValues, type SortDirection } from "../../../utils/sort-values";
 
-export const CURVE_ROOTS = [...FUTURES_CONTRACTS.map((row) => ({ value: row.code, label: `${row.code} ${row.name}` })), { value: "VX", label: "VX VIX Futures" }];
+export const CURVE_ROOTS = [
+  ...FUTURES_CONTRACTS.filter((row) => row.curve !== false).map((row) => ({ value: row.code, label: `${row.code} ${row.name}` })),
+  { value: "VX", label: "VX VIX Futures" },
+];
 
 export function normalizeCurveRoot(value: unknown): string | null {
   if (typeof value !== "string") return null;
@@ -37,15 +43,28 @@ export function curvePrice(value: number | null, root: string): string {
   return /[1-9]/.test(text) ? text : text.replace("-", "");
 }
 
+/** A move in price, signed; one that rounds to zero stays unsigned. */
+export function curveChangeText(value: number | null, root: string): string {
+  const text = curvePrice(value, root);
+  return value != null && value > 0 && /[1-9]/.test(text) ? `+${text}` : text;
+}
+
 /**
  * Axis gridlines sit on round values, so they need no tick precision: one
- * decimal count across the gutter, only as many as those values use.
+ * decimal count across the gutter, as many as the plotted range asks for and
+ * enough to keep every tick within a percent of that range. A span of hundreds
+ * of index points reads 7800, a VIX strip 18.5, a Treasury 1/64 grid 112.25.
  */
 export function curveAxisPrice(value: number, domain: CompositeAxisDomain, root: string): string {
-  if (RATE_TICKS[root] == null) return curvePrice(value, root);
-  const decimals = Math.max(0, ...compositeAxisTicks(domain, String)
-    .map((tick) => tick.value.toFixed(4).replace(/\.?0+$/, "").split(".")[1]?.length ?? 0));
-  return value.toFixed(decimals);
+  const cap = curvePriceDecimals(root);
+  const tolerance = Math.abs(domain.max - domain.min) / 100;
+  const needed = (tick: number) => {
+    let decimals = 0;
+    while (decimals < cap && Math.abs(Number(tick.toFixed(decimals)) - tick) > tolerance) decimals += 1;
+    return decimals;
+  };
+  const ticks = compositeAxisTicks(domain, String).map((tick) => needed(tick.value));
+  return value.toFixed(Math.min(cap, Math.max(spanDigits(domain), ...ticks)));
 }
 
 const MONTH_CODES = "FGHJKMNQUVXZ";
@@ -69,7 +88,7 @@ export function curveTimestamp(value: string | null): string {
 /** The rank against the contract's own history; one observation ranks nothing. */
 export function curveRank(value: number | null, samples: number): string {
   if (value == null || samples < 2) return "pctl unavailable";
-  return `${value.toFixed(0)} pctl`;
+  return formatPercentileRank(value);
 }
 
 export const CURVE_HORIZONS = [
@@ -96,10 +115,11 @@ export function charted<T extends { expiration: string }>(rows: readonly T[], ho
   return rows.filter((row) => Date.parse(row.expiration) <= end.getTime());
 }
 
-export function futuresCurveSeries(data: FuturesCurvePayload, palette?: CurvePalette, horizon = DEFAULT_CURVE_HORIZON, now = Date.now()): CurveSeries[] {
+export function futuresCurveSeries(data: FuturesCurvePayload, palette?: CurvePalette, horizon = DEFAULT_CURVE_HORIZON, now = Date.now(),
+  currentLabel = data.source === "cboe" ? "Settlement" : "Latest"): CurveSeries[] {
   const contracts = charted(data.contracts, horizon, now);
   return [{
-    id: "current", label: data.source === "cboe" ? "Settlement" : "Latest", asOf: newestQuote(contracts), color: palette?.current,
+    id: "current", label: currentLabel, asOf: newestQuote(contracts), color: palette?.current,
     points: contracts.map((row) => ({ id: row.symbol, label: curveContractMonth(row.symbol, row.expiration), x: Date.parse(row.expiration), value: row.price, asOf: row.asOf })),
   }, ...data.ghosts.map((ghost) => {
     // The payload dates a ghost by its oldest point, which can be a contract beyond the charted horizon.
@@ -112,14 +132,109 @@ export function futuresCurveSeries(data: FuturesCurvePayload, palette?: CurvePal
   })];
 }
 
-export function sortCurveContracts(rows: readonly FuturesContract[], id: string, direction: "asc" | "desc"): FuturesContract[] {
-  const keys: Record<string, keyof FuturesContract> = { symbol: "symbol", expiry: "expiration", price: "price", oi: "openInterest", volume: "volume", percentile: "percentile", asOf: "asOf" };
+export type CurveLookback = "1W" | "1M";
+export type CurveContractChanges = ReadonlyMap<string, Readonly<Record<CurveLookback, number | null>>>;
+
+/**
+ * How far each contract moved since the week- and month-back curves, by
+ * symbol: the latest price less the price then. A leg missing either side
+ * stays null rather than reading as no move.
+ */
+export function curveContractChanges(data: FuturesCurvePayload): CurveContractChanges {
+  const past = new Map(data.ghosts.map((ghost) => [ghost.label, new Map(ghost.points.map((point) => [point.symbol, point.price]))]));
+  return new Map(data.contracts.map((row) => {
+    const change = (label: CurveLookback) => {
+      const then = past.get(label)?.get(row.symbol);
+      return row.price == null || then == null ? null : row.price - then;
+    };
+    return [row.symbol, { "1W": change("1W"), "1M": change("1M") }];
+  }));
+}
+
+const CHANGE_COLUMNS: Readonly<Record<string, CurveLookback>> = { change1w: "1W", change1m: "1M" };
+
+type CurveSortKey = "symbol" | "expiration" | "price" | "change" | "openInterest" | "volume" | "percentile" | "asOf";
+
+export function sortCurveContracts(rows: readonly FuturesContract[], id: string, direction: SortDirection,
+  changes?: CurveContractChanges): FuturesContract[] {
+  const keys: Record<string, CurveSortKey> = { symbol: "symbol", expiry: "expiration", price: "price", change: "change", oi: "openInterest", volume: "volume", percentile: "percentile", asOf: "asOf" };
   const key = keys[id] ?? "expiration";
-  return [...rows].sort((a, b) => {
-    const left = a[key], right = b[key];
-    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 direction === "asc" ? order : -order;
+  const lookback = CHANGE_COLUMNS[id];
+  const value = (row: FuturesContract) => lookback ? changes?.get(row.symbol)?.[lookback] ?? null : row[key] ?? null;
+  return [...rows].sort((a, b) => compareSortValues(value(a), value(b), direction));
+}
+
+const DAY_MS = 86_400_000;
+
+/** A past date for the as-of view: empty (or "latest") for the live curve, else YYYY-MM-DD no later than today. */
+export function curveAsOfDate(value: unknown, now = new Date()): string {
+  const date = typeof value === "string" ? value.trim() : "";
+  if (!date || date.toLowerCase() === "latest") return "";
+  const time = Date.parse(`${date}T00:00:00Z`);
+  // A month or day out of range parses to NaN or rolls over; both are refused.
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(date) || !Number.isFinite(time) || new Date(time).toISOString().slice(0, 10) !== date) {
+    throw new Error("Use an as-of date in YYYY-MM-DD format, or latest.");
+  }
+  if (date > now.toISOString().slice(0, 10)) throw new Error("A futures curve cannot use a future date.");
+  return date;
+}
+
+export function curveLookbackDate(date: string, days: number): string {
+  return new Date(Date.parse(`${date}T00:00:00Z`) - days * DAY_MS).toISOString().slice(0, 10);
+}
+
+type ArchivedRow = FuturesCurveAsOfPayload["contracts"][number];
+
+/**
+ * Whether a row's price is older than its curve's session. The archive marks
+ * a row stale when it has no price made on the requested date, which on a
+ * weekend, a holiday or today before the settlement is every row. The curve's
+ * session is its newest row, so a row is stale when it is older than that or
+ * carries an earlier price, which the archive dates before the row.
+ */
+function archivedRowStale(row: ArchivedRow, curve: FuturesCurveAsOfPayload): boolean {
+  const session = curve.asOf;
+  if (!session || session >= curve.date) return row.stale;
+  return row.tradeDate < session || row.asOf.slice(0, 10) < row.tradeDate;
+}
+
+/**
+ * The archived curve on a past date in the live curve's shape, so the pane
+ * draws it the same way. Its week- and month-back ghosts are the curves as
+ * they stood then, contracts that have since expired included. A row is dated
+ * by its session, or by the earlier session its carried price comes from.
+ * Percentiles and session changes are not archived, so they stay unavailable.
+ */
+export function archivedFuturesCurve(root: string, curve: FuturesCurveAsOfPayload,
+  lookbacks: { "1W": FuturesCurveAsOfPayload | null; "1M": FuturesCurveAsOfPayload | null }, fetchedAt: string): FuturesCurvePayload {
+  const rowDate = (row: ArchivedRow, stale: boolean) => stale ? row.asOf.slice(0, 10) : row.tradeDate;
+  const contracts: FuturesContract[] = curve.contracts.flatMap((row) => {
+    if (!row.expiration) return [];
+    const stale = archivedRowStale(row, curve);
+    return [{
+      symbol: row.symbol, label: row.label, expiration: row.expiration, price: row.price, change: null, asOf: rowDate(row, stale),
+      currency: curve.currency ?? "USD", quoteUnit: curve.quoteUnit ?? curve.currency ?? "USD", volume: row.volume,
+      openInterest: row.openInterest, delayMinutes: null, stale, percentile: null, samples: 0, historyStart: null, historyEnd: null,
+    }];
+  }).sort((a, b) => a.expiration.localeCompare(b.expiration));
+  const ghosts = (["1W", "1M"] as const).map((label) => {
+    const past = lookbacks[label];
+    return { label, requestedDate: curveLookbackDate(curve.date, label === "1W" ? 7 : 30), asOf: past?.asOf ?? null,
+      points: past ? past.contracts.flatMap((row) => row.expiration
+        ? [{ symbol: row.symbol, expiration: row.expiration, price: row.price, asOf: rowDate(row, archivedRowStale(row, past)) }] : []) : [] };
   });
+  // The front pair on the curve's own session; carried prices do not make a spread.
+  const [front, next] = contracts.filter((row) => !row.stale);
+  const value = front && next ? next.price! - front.price! : null;
+  const days = front && next ? (Date.parse(next.expiration) - Date.parse(front.expiration)) / DAY_MS : 0;
+  const roll = front && next && front.price! > 0 && next.price! > 0 && days > 0 ? (front.price! / next.price! - 1) * 365 / days * 100 : null;
+  return {
+    root, name: curve.name, source: root === "VX" ? "cboe" : "yahoo", currency: curve.currency, quoteUnit: curve.quoteUnit,
+    asOf: curve.asOf, fetchedAt, status: !contracts.length ? "unavailable" : curve.gaps.length ? "partial" : "available", stale: false,
+    catalogue: { method: "provider", complete: true, horizonEnd: null }, contracts, ghosts,
+    slope: { frontSymbol: front?.symbol ?? null, nextSymbol: next?.symbol ?? null, value, annualizedRollYield: roll, percentile: null,
+      rollPercentile: null, samples: 0, historyStart: null, historyEnd: null, asOf: front && next ? curve.asOf : null,
+      state: value == null ? "unavailable" : Math.abs(value) < 1e-10 ? "flat" : value > 0 ? "contango" : "backwardation" },
+    gaps: curve.gaps,
+  };
 }

package/src/plugins/builtin/futures-curve/pane.tsx

@@ -1,32 +1,49 @@
-import { useCallback, useMemo, useState } from "react";
-import { CurveSurface, curveGhostColors, DataTableView, PaneStatusBody, StatGrid, statGridRows, Tabs, usePaneHeaderTabs, usePaneNoticeFooter, usePaneStatusFooter, type DataTableColumn, type StatItem } from "../../../components";
-import { ApiRequestError } from "../../../api-client/errors";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { chartTableChromeRows, ChartTableHeader, CurveSurface, curveGhostColors, DataTableView, Notice, PaneStatusBody, QueryBar, useChartTableSelection, usePaneNoticeFooter, usePaneStatusFooter, usePaneTabs, type DataTableColumn, type StatItem } from "../../../components";
+import { curveStrip, curveSurfaceMinRows } from "../../../components/chart/curve";
+import { isAccessDenied } from "../../../api-client/errors";
 import type { FuturesContract } from "../../../api-client/futures-curve";
 import { useAsyncResource, usePaneSettingValue, usePluginPaneState, useShortcut } from "../../../public/react";
 import { usePaneInstance, usePaneTitle } from "../../../state/app/context";
 import { useThemeColors } from "../../../theme/theme-context";
 import type { PaneProps } from "../../../types/plugin";
-import { Box } from "../../../ui";
+import { Box, type InputRenderable } from "../../../ui";
 import { formatPercentRaw } from "../../../utils/format";
-import { useAutoRefresh } from "../shared/auto-refresh";
+import { nextHeaderSort, type SortDirection } from "../../../utils/sort-values";
+import { useAutoRefresh } from "../../../react/auto-refresh";
 import { futuresSessionRefreshInterval } from "../shared/futures-session";
 import { useResearchCloudSession } from "../shared/research-cloud-session";
-import { getCachedFuturesCurve, loadFuturesCurve } from "./client";
-import { curveAxisPrice, curvePrice, curveRank, curveTimestamp, DEFAULT_CURVE_HORIZON, futuresCurveSeries, newestQuote, normalizeCurveRoot, sortCurveContracts } from "./model";
+import { getCachedFuturesCurve, loadFuturesCurve, loadFuturesCurveAsOf } from "./client";
+import { curveAsOfDate, curveAxisPrice, curveChangeText, curveContractChanges, curvePrice, curveRank, curveTimestamp, DEFAULT_CURVE_HORIZON, futuresCurveSeries, newestQuote, normalizeCurveRoot, sortCurveContracts, type CurveContractChanges } from "./model";
 
 const TABS = [{ value: "curve", label: "Curve" }, { value: "contracts", label: "Contracts" }];
 const COLUMNS: DataTableColumn[] = [
-  { id: "symbol", label: "CONTRACT", width: 15, align: "left" },
+  // The longest symbol is a three-letter root with its month and venue: RTYH27.CME.
+  { id: "symbol", label: "CONTRACT", width: 11, align: "left" },
   { id: "expiry", label: "EXPIRY", width: 10, align: "left" },
   { id: "price", label: "PRICE", width: 12, align: "right" },
+  // A Treasury change keeps its 1/256 tick: +0.11718750.
+  { id: "change", label: "CHG", width: 11, align: "right" },
   { id: "percentile", label: "PCTL", width: 5, align: "right" },
   { id: "oi", label: "OPEN INT", width: 10, align: "right" },
   { id: "volume", label: "VOLUME", width: 10, align: "right" },
   { id: "asOf", label: "AS OF UTC", width: 16, align: "left" },
 ];
-const clearDenied = (error: unknown) => error instanceof ApiRequestError && [401, 403].includes(error.status ?? 0);
+// The curve's rows move with the look-back curves drawn above them; the
+// footer carries the quote time every row would otherwise repeat. The session
+// change stays on Contracts, where the full table has the width for it.
+const CURVE_COLUMNS: DataTableColumn[] = [
+  ...COLUMNS.slice(0, 3),
+  { id: "change1w", label: "VS 1W", width: 10, align: "right" },
+  { id: "change1m", label: "VS 1M", width: 10, align: "right" },
+  ...COLUMNS.slice(4, -1),
+];
 const signedPercent = (value: number | null) => value == null ? "--" : formatPercentRaw(value);
 const integer = (value: number | null) => value == null ? "--" : value.toLocaleString("en-US");
+const contractKey = (row: FuturesContract) => row.symbol;
+// Left and Right step along the expiries, the way the curve reads.
+const contractDate = (row: FuturesContract) => new Date(row.expiration);
+const sentenceCase = (text: string) => text.charAt(0).toUpperCase() + text.slice(1);
 
 export function FuturesCurvePane(props: PaneProps) {
   const pane = usePaneInstance();
@@ -39,21 +56,47 @@ export function FuturesCurvePane(props: PaneProps) {
 function FuturesCurveView({ width, height, focused, root }: PaneProps & { root: string }) {
   const colors = useThemeColors();
   const session = useResearchCloudSession();
-  const loader = useCallback((force: boolean) => loadFuturesCurve(root, force), [root, session.requestKey]);
-  const resource = useAsyncResource(loader, { initialData: () => getCachedFuturesCurve(root), clearOnError: clearDenied });
+  // A past date shows the curve as the settlement archive held it that day.
+  const [requestedDate, setRequestedDate] = usePaneSettingValue<string>("asOfDate", "");
+  const [draftDate, setDraftDate] = useState(requestedDate);
+  const [dateError, setDateError] = useState<string | null>(null);
+  const [dateActive, setDateActive] = useState(false);
+  const [dateFocusToken, setDateFocusToken] = useState(0);
+  const dateInput = useRef<InputRenderable>(null);
+  // Leaving the field without Enter puts back the date the curve shows.
+  useEffect(() => { if (!dateActive) setDraftDate(requestedDate); }, [dateActive, requestedDate]);
+  const loader = useCallback(async (force: boolean) => ({ date: requestedDate,
+    payload: requestedDate ? await loadFuturesCurveAsOf(root, requestedDate) : await loadFuturesCurve(root, force) }),
+  [root, requestedDate, session.requestKey]);
+  const resource = useAsyncResource(loader, { initialData: () => {
+    const cached = requestedDate ? null : getCachedFuturesCurve(root);
+    return cached ? { date: "", payload: cached } : null;
+  }, clearOnError: isAccessDenied });
   const [tab, setTab] = usePluginPaneState("tab", "curve");
   const [selected, setSelected] = usePluginPaneState<string | null>("contract", null);
-  const [sort, setSort] = useState({ id: "expiry", direction: "asc" as "asc" | "desc" });
+  const [sort, setSort] = useState<{ columnId: string; direction: SortDirection }>({ columnId: "expiry", direction: "asc" });
   const [horizon] = usePaneSettingValue("horizon", DEFAULT_CURVE_HORIZON);
-  const data = resource.data;
+  // A pending date change must never relabel the previous curve as the new one.
+  const data = resource.data?.date === requestedDate ? resource.data.payload : null;
   usePaneTitle(`CTM ${root}`);
   const staleCount = data?.contracts.filter((row) => row.stale).length ?? 0;
   const newest = data ? newestQuote(data.contracts) : null;
-  // The footer carries the newest quote time, so the legend does not repeat it.
-  const curves = useMemo(() => data ? futuresCurveSeries(data, { current: colors.positive, ghosts: curveGhostColors(colors) }, horizon)
-    .map((series) => series.id === "current" && curveTimestamp(series.asOf ?? null) === curveTimestamp(newest) ? { ...series, asOf: undefined } : series) : [], [data, colors, horizon, newest]);
-  const rows = useMemo(() => sortCurveContracts(data?.contracts ?? [], sort.id, sort.direction), [data, sort]);
-  const selectedRow = data?.contracts.find((row) => row.symbol === selected) ?? data?.contracts[0];
+  // A past curve is named by the session it holds: a weekend or holiday date shows the session before it.
+  const curves = useMemo(() => data ? futuresCurveSeries(data, { current: colors.positive, ghosts: curveGhostColors(colors) }, horizon,
+    requestedDate ? Date.parse(`${requestedDate}T00:00:00Z`) : Date.now(), requestedDate ? data.asOf ?? requestedDate : undefined) : [],
+  [data, colors, horizon, requestedDate]);
+  const changes = useMemo<CurveContractChanges>(() => data ? curveContractChanges(data) : new Map(), [data]);
+  const rows = useMemo(() => sortCurveContracts(data?.contracts ?? [], sort.columnId, sort.direction, changes), [data, sort, changes]);
+  const curveTab = tab === "curve";
+  // The curve tab lists the contracts the chart plots; Contracts keeps every one.
+  const curveRows = useMemo(() => {
+    const charted = new Set(curves[0]?.points.map((point) => point.id));
+    return rows.filter((row) => charted.has(row.symbol));
+  }, [curves, rows]);
+  const tableRows = curveTab ? curveRows : rows;
+  const selectedId = tableRows.some((row) => row.symbol === selected) ? selected! : tableRows[0]?.symbol ?? null;
+  useChartTableSelection({ rows: curveRows, getId: contractKey, getDate: contractDate, selectedId, onSelect: setSelected,
+    focused, enabled: curveTab });
   // The highlighted row carries the selected contract's price and rank.
   const slopeDate = data?.slope.asOf && curveTimestamp(data.slope.asOf) !== curveTimestamp(newest) ? curveTimestamp(data.slope.asOf) : null;
   const statItems: StatItem[] = data ? [
@@ -62,57 +105,110 @@ function FuturesCurveView({ width, height, focused, root }: PaneProps & { root:
     { id: "spread", label: "M2-M1", value: data.slope.value == null ? "--" : curvePrice(data.slope.value, root),
       detail: [data.slope.state, curveRank(data.slope.percentile, data.slope.samples), slopeDate].filter(Boolean).join(" · ") },
   ] : [];
-  const tabsInHeader = usePaneHeaderTabs({ tabs: TABS, activeValue: tab, onSelect: setTab, focused });
-  const tabRows = tabsInHeader ? 0 : 1;
-  const bodyHeight = Math.max(9, height - tabRows - statGridRows(statItems, width));
-  const tableHeight = tab === "curve" ? Math.max(3, Math.min(rows.length + 2, Math.floor(bodyHeight * 0.4))) : bodyHeight;
-  const curveHeight = tab === "curve" ? Math.max(6, bodyHeight - tableHeight) : 0;
+  const { strip: tabStrip, rows: tabRows } = usePaneTabs({ tabs: TABS, activeValue: tab, onSelect: setTab, focused, dense: true });
+  // The query bar takes one row below the tabs, and a refused date one more.
+  const bodyHeight = Math.max(1, height - tabRows - 1 - (dateError ? 1 : 0));
+  const columns = curveTab ? CURVE_COLUMNS : COLUMNS;
+  const formatValue = useCallback((value: number) => curvePrice(value, root), [root]);
+  const formatChange = useCallback((value: number) => curveChangeText(value, root), [root]);
+  const caption = `${sentenceCase(data?.quoteUnit ?? data?.currency ?? "price")} by contract month`;
+  // The strip keeps the curve's shape and the selected contract in one row.
+  const strip = curveTab ? curveStrip(curves, formatValue, { caption: "Price", selectedPointId: selectedId }) : null;
   // Delayed contract quotes move all session; the curve follows them once a
   // minute while Globex trades and on the research cadence otherwise. A
   // settlement curve changes once a day.
   useAutoRefresh(resource.updatedAt, resource.load, {
-    intervalMs: data?.source === "cboe" ? null : futuresSessionRefreshInterval(),
+    intervalMs: requestedDate || data?.source === "cboe" ? null : futuresSessionRefreshInterval(),
   });
   useShortcut((event) => {
-    if (focused && !event.targetEditable && !event.ctrl && !event.meta && event.name === "r") {
+    if (focused && !dateActive && !event.targetEditable && !event.ctrl && !event.meta && event.name === "r") {
       event.preventDefault(); void resource.reload();
     }
   });
-  usePaneNoticeFooter({ registrationId: "futures-curve:notices", focused, notices: data?.gaps ?? [] });
+  const selectDate = (value: string) => {
+    try {
+      const nextDate = curveAsOfDate(value);
+      setRequestedDate(nextDate);
+      setDraftDate(nextDate);
+      setDateError(null);
+      setDateActive(false);
+      if (dateInput.current?.setCursorOffset) dateInput.current.setCursorOffset(0);
+      else if (dateInput.current) dateInput.current.cursorOffset = 0;
+      dateInput.current?.blur?.();
+      if (nextDate === requestedDate) void resource.reload();
+    } catch (error) {
+      setDateError(error instanceof Error ? error.message : String(error));
+    }
+  };
+  // A past date with no archived curve says why in the body, not behind the warning.
+  const emptyPast = !!requestedDate && !!data && !data.contracts.length;
+  usePaneNoticeFooter({ registrationId: "futures-curve:notices", focused, notices: emptyPast ? [] : data?.gaps ?? [] });
   const delay = Math.max(0, ...(data?.contracts.map((row) => row.delayMinutes ?? 0) ?? []));
   usePaneStatusFooter({ registrationId: "futures-curve", loading: resource.loading, error: resource.error,
+    hints: [
+      { id: "date", key: "d", label: "ate", onPress: () => { setDateActive(true); setDateFocusToken((token) => token + 1); } },
+      ...requestedDate ? [{ id: "latest", key: "c", label: "urrent", title: "Current Curve", onPress: () => selectDate("") }] : [],
+    ],
     info: data ? [
-      { id: "source", parts: [{ text: `${data.source === "cboe" ? "settlement" : delay > 0 ? `${delay}m delayed` : "dated quotes"} · ${data.quoteUnit ?? data.currency ?? "units unavailable"} · ${curveTimestamp(newest)}${newest?.includes("T") ? " UTC" : ""}`, tone: "muted" }] },
+      { id: "source", parts: [{ text: `${requestedDate ? "daily archive" : data.source === "cboe" ? "settlement" : delay > 0 ? `${delay}m delayed` : "dated quotes"} · ${data.quoteUnit ?? data.currency ?? "units unavailable"} · ${curveTimestamp(newest)}${newest?.includes("T") ? " UTC" : ""}`, tone: "muted" }] },
       ...(staleCount ? [{ id: "stale", parts: [{ text: `${staleCount} of ${data.contracts.length} stale`, tone: "warning" as const }] }] : []),
     ] : [],
   });
+  const tableChromeRows = chartTableChromeRows(columns, width);
+  const chart = strip ? {
+    render: (size: { width: number; height: number }) => <CurveSurface series={curves} width={size.width} height={size.height} display="chart"
+      caption={caption} xScale="linear" formatValue={formatValue} formatChange={formatChange}
+      formatAxisValue={(value, domain) => curveAxisPrice(value, domain, root)}
+      selectedPointId={selectedId} onSelectedPointChange={setSelected} />,
+    minRows: curveSurfaceMinRows({ series: curves, width, caption }),
+    strip,
+  } : null;
   const renderCell = useCallback((row: FuturesContract, column: DataTableColumn) => {
     if (column.id === "symbol") return { text: row.symbol };
     if (column.id === "expiry") return { text: row.expiration, color: colors.textMuted };
-    if (column.id === "price") return { text: curvePrice(row.price, root) };
+    // Without the AS OF column, a stale quote shows on its price.
+    if (column.id === "price") return { text: curvePrice(row.price, root), color: curveTab && row.stale ? colors.warning : undefined };
+    if (column.id === "change") {
+      const text = curveChangeText(row.change ?? null, root);
+      return { text, color: text.startsWith("+") ? colors.positive : text.startsWith("-") && /[1-9]/.test(text) ? colors.negative : colors.textMuted };
+    }
+    if (column.id === "change1w" || column.id === "change1m") {
+      const change = changes.get(row.symbol)?.[column.id === "change1w" ? "1W" : "1M"] ?? null;
+      return { text: curveChangeText(change, root), color: colors.textMuted };
+    }
     if (column.id === "percentile") return { text: row.samples < 2 || row.percentile == null ? "--" : row.percentile.toFixed(0) };
     if (column.id === "oi") return { text: integer(row.openInterest) };
     if (column.id === "volume") return { text: integer(row.volume) };
     return { text: curveTimestamp(row.asOf), color: row.stale ? colors.warning : colors.textMuted };
-  }, [colors, root]);
+  }, [changes, colors, curveTab, root]);
   return <Box width={width} height={height} flexDirection="column">
-    {!tabsInHeader && <Tabs tabs={TABS} activeValue={tab} onSelect={setTab} focused={focused} dense />}
+    {tabStrip}
+    <QueryBar width={width} filters={[{
+      id: "date", kind: "text", label: "Date", value: draftDate, placeholder: "latest", width: 10, debounceMs: 0,
+      focused, active: dateActive, onActiveChange: setDateActive, focusToken: dateFocusToken, inputRef: dateInput,
+      // Typing edits the draft; Enter applies it. Clearing the chip goes back to the live curve.
+      onChange: (value: string) => {
+        setDraftDate(value);
+        if (!dateActive && !value.trim() && requestedDate) selectDate("");
+      },
+      onSubmit: selectDate,
+    }]} meta={requestedDate && data?.asOf && data.asOf !== requestedDate ? `as of ${data.asOf}` : undefined} />
+    {dateError ? <Notice tone="negative">{dateError}</Notice> : null}
     <PaneStatusBody loading={resource.loading && !data} error={!data ? resource.error : null}
-      empty={!!data && !data.contracts.length} subject="futures curve">
-      {data ? <>
-        <StatGrid items={statItems} width={width} />
-        {tab === "curve" ? <CurveSurface series={curves} width={width} height={curveHeight}
-          formatValue={(value) => curvePrice(value, root)} formatAxisValue={(value, domain) => curveAxisPrice(value, domain, root)}
-          formatX={(value) => new Date(Math.round(value / 86_400_000) * 86_400_000).toISOString().slice(0, 10)}
-          selectedPointId={selectedRow?.symbol ?? null} onSelectedPointChange={setSelected} /> : null}
-        <DataTableView columns={COLUMNS} items={rows} focused={focused}
-          rootWidth={width} rootHeight={tableHeight}
-          selection={{ kind: "id", selectedId: selectedRow?.symbol ?? null, getId: (row) => row.symbol, onChange: setSelected }}
-          onActivate={(row) => setSelected(row.symbol)} getItemKey={(row) => row.symbol} renderCell={renderCell}
-          sortColumnId={sort.id} sortDirection={sort.direction}
-          onHeaderClick={(id) => setSort((current) => ({ id, direction: current.id === id && current.direction === "asc" ? "desc" : "asc" }))}
-          emptyStateTitle="No listed contracts available." />
-      </> : null}
+      empty={!!data && !data.contracts.length} subject="futures curve"
+      emptyTitle={emptyPast ? "No archived curve on this date." : undefined} emptyMessage={emptyPast ? data!.gaps.join(" ") || undefined : undefined}>
+      {data ? <DataTableView columns={columns} items={tableRows} focused={focused}
+        rootWidth={width} rootHeight={bodyHeight}
+        selection={{ kind: "id", selectedId, getId: contractKey, onChange: setSelected }}
+        onActivate={(row) => setSelected(row.symbol)} getItemKey={contractKey} renderCell={renderCell}
+        sortColumnId={sort.columnId} sortDirection={sort.direction}
+        onHeaderClick={(id) => setSort((current) => nextHeaderSort(current, id))}
+        emptyStateTitle="No listed contracts available."
+        // The Curve tab leaves the quote time to the footer; the export keeps it.
+        getExportMetadata={() => curveTab && newest ? [[`as of${newest.includes("T") ? " UTC" : ""}`, curveTimestamp(newest)]] : []}
+        rootBefore={<ChartTableHeader width={width} height={bodyHeight} figures={statItems} tableChromeRows={tableChromeRows}
+          tableRows={tableRows.length}
+          chart={chart} />} /> : null}
     </PaneStatusBody>
   </Box>;
 }