gloomberb 0.7.3 → 0.7.5

package/src/components/chart/market-session.ts

@@ -0,0 +1,187 @@
+import type { ChartMarketSession, ChartSessionBackgroundKind, ChartSessionBackgroundSpan } from "./chart-types";
+
+const INTRADAY_SESSION_GAP_MS = 6 * 60 * 60_000;
+const MAX_SESSION_BACKGROUND_WINDOW_MS = 10 * 24 * 60 * 60_000;
+
+const US_EXTENDED_HOURS_SESSION: ChartMarketSession = {
+  timeZone: "America/New_York",
+  preMarketStartMinutes: 4 * 60,
+  regularStartMinutes: 9 * 60 + 30,
+  regularEndMinutes: 16 * 60,
+  postMarketEndMinutes: 20 * 60,
+};
+
+const US_EXCHANGE_PATTERN = /\b(NASDAQ|NYSE|AMEX|ARCA|BATS|IEX|NMS|XNAS|XNYS|ARCX|XASE|NYSEARCA|NASDAQGS|NASDAQGM|NASDAQCM)\b/i;
+const EQUITY_LIKE_ASSET_CATEGORIES = new Set(["", "STK", "ETF", "ADR", "EQUITY"]);
+
+interface MarketSessionSource {
+  exchange?: string | null;
+  primaryExchange?: string | null;
+  currency?: string | null;
+  assetCategory?: string | null;
+}
+
+interface ZonedDateTime {
+  dayKey: string;
+  minutes: number;
+}
+
+const zonedFormatterCache = new Map<string, Intl.DateTimeFormat>();
+
+function getZonedFormatter(timeZone: string): Intl.DateTimeFormat {
+  const cached = zonedFormatterCache.get(timeZone);
+  if (cached) return cached;
+
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    hourCycle: "h23",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  zonedFormatterCache.set(timeZone, formatter);
+  return formatter;
+}
+
+function normalizeDate(value: Date | string | number): Date | null {
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function getMinPositiveGapMs(dates: readonly Date[]): number {
+  let minGapMs = Number.POSITIVE_INFINITY;
+  for (let index = 1; index < dates.length; index += 1) {
+    const gapMs = Math.abs(dates[index]!.getTime() - dates[index - 1]!.getTime());
+    if (gapMs > 0 && gapMs < minGapMs) {
+      minGapMs = gapMs;
+    }
+  }
+  return Number.isFinite(minGapMs) ? minGapMs : 0;
+}
+
+function isIntradaySeries(dates: readonly Date[]): boolean {
+  if (dates.length < 2) return false;
+  const minGapMs = getMinPositiveGapMs(dates);
+  return minGapMs > 0 && minGapMs <= INTRADAY_SESSION_GAP_MS;
+}
+
+function getDateSpanMs(dates: readonly Date[]): number {
+  let minTime = Number.POSITIVE_INFINITY;
+  let maxTime = Number.NEGATIVE_INFINITY;
+  for (const date of dates) {
+    const time = date.getTime();
+    if (time < minTime) minTime = time;
+    if (time > maxTime) maxTime = time;
+  }
+  return Number.isFinite(minTime) && Number.isFinite(maxTime) ? maxTime - minTime : 0;
+}
+
+function shouldShowSessionBackgrounds(dates: readonly Date[]): boolean {
+  return isIntradaySeries(dates) && getDateSpanMs(dates) <= MAX_SESSION_BACKGROUND_WINDOW_MS;
+}
+
+function getZonedDateTime(date: Date, timeZone: string): ZonedDateTime | null {
+  const values = new Map<string, string>();
+  for (const part of getZonedFormatter(timeZone).formatToParts(date)) {
+    if (part.type !== "literal") values.set(part.type, part.value);
+  }
+
+  const year = values.get("year");
+  const month = values.get("month");
+  const day = values.get("day");
+  const hour = values.get("hour");
+  const minute = values.get("minute");
+  if (!year || !month || !day || !hour || !minute) return null;
+
+  return {
+    dayKey: `${year}-${month}-${day}`,
+    minutes: Number.parseInt(hour, 10) * 60 + Number.parseInt(minute, 10),
+  };
+}
+
+function getSessionBackgroundKind(minutes: number, session: ChartMarketSession): ChartSessionBackgroundKind | null {
+  if (minutes >= session.preMarketStartMinutes && minutes < session.regularStartMinutes) return "pre";
+  if (minutes >= session.regularEndMinutes && minutes < session.postMarketEndMinutes) return "post";
+  return null;
+}
+
+function isEquityLike(assetCategory: string | null | undefined): boolean {
+  return EQUITY_LIKE_ASSET_CATEGORIES.has((assetCategory ?? "").trim().toUpperCase());
+}
+
+function hasUsExchange(source: MarketSessionSource): boolean {
+  const exchangeText = [
+    source.exchange,
+    source.primaryExchange,
+  ].filter(Boolean).join(" ");
+  return US_EXCHANGE_PATTERN.test(exchangeText);
+}
+
+function isExplicitNonUsSource(source: MarketSessionSource): boolean {
+  const exchangeText = [
+    source.exchange,
+    source.primaryExchange,
+  ].filter(Boolean).join(" ");
+  return exchangeText.length > 0 && !US_EXCHANGE_PATTERN.test(exchangeText) && (source.currency ?? "").toUpperCase() !== "USD";
+}
+
+export function resolveChartMarketSession(sources: readonly MarketSessionSource[]): ChartMarketSession | null {
+  if (sources.length === 0) return null;
+  if (sources.some((source) => !isEquityLike(source.assetCategory))) return null;
+  if (sources.some(isExplicitNonUsSource)) return null;
+
+  const hasSupportedSource = sources.some((source) => hasUsExchange(source) || (source.currency ?? "").toUpperCase() === "USD");
+  return hasSupportedSource ? US_EXTENDED_HOURS_SESSION : null;
+}
+
+export function getChartMarketSessionKey(session: ChartMarketSession | null | undefined): string {
+  if (!session) return "session:none";
+  return [
+    session.timeZone,
+    session.preMarketStartMinutes,
+    session.regularStartMinutes,
+    session.regularEndMinutes,
+    session.postMarketEndMinutes,
+  ].join(":");
+}
+
+export function resolveExtendedHoursBackgroundSpans(
+  values: readonly Array<Date | string | number>,
+  session: ChartMarketSession | null | undefined,
+): ChartSessionBackgroundSpan[] {
+  if (!session) return [];
+
+  const dates = values.map(normalizeDate);
+  const validDates = dates.filter((date): date is Date => date !== null);
+  if (!shouldShowSessionBackgrounds(validDates)) return [];
+
+  const spans: ChartSessionBackgroundSpan[] = [];
+  let active: ChartSessionBackgroundSpan | null = null;
+  let activeDayKey: string | null = null;
+
+  for (let index = 0; index < dates.length; index += 1) {
+    const date = dates[index];
+    const zoned = date ? getZonedDateTime(date, session.timeZone) : null;
+    const kind = zoned ? getSessionBackgroundKind(zoned.minutes, session) : null;
+    if (!kind) {
+      if (active) spans.push(active);
+      active = null;
+      activeDayKey = null;
+      continue;
+    }
+
+    if (active && active.kind === kind && activeDayKey === zoned!.dayKey) {
+      active.endIndex = index;
+      continue;
+    }
+
+    if (active) spans.push(active);
+    active = { kind, startIndex: index, endIndex: index };
+    activeDayKey = zoned!.dayKey;
+  }
+
+  if (active) spans.push(active);
+  return spans;
+}

package/src/components/chart/native/chart-rasterizer.ts

@@ -2,7 +2,7 @@ import { type PixelResolution } from "../../../ui";
 import { measurePerf } from "../../../utils/perf-marks";
 import { computeGridLines, type ChartScene } from "../chart-renderer";
 import type { ComparisonChartScene } from "../comparison-chart-renderer";
-import type { ChartRenderMode } from "../chart-types";
+import type { ChartColors, ChartRenderMode, ChartSessionBackgroundSpan } from "../chart-types";
 
 interface RgbaColor {
   r: number;
@@ -284,6 +284,47 @@ function projectChartX(index: number, count: number, width: number, mode: ChartR
   return projectX(index, count, horizontalPad, Math.max(width - 1 - horizontalPad, horizontalPad));
 }
 
+function getProjectedPointBand(
+  index: number,
+  count: number,
+  width: number,
+  projectIndex: (targetIndex: number) => number,
+): PixelRect {
+  const currentX = projectIndex(index);
+  const previousX = index > 0 ? projectIndex(index - 1) : currentX;
+  const nextX = index < count - 1 ? projectIndex(index + 1) : currentX;
+  const left = index === 0 ? 0 : Math.floor((previousX + currentX) / 2) + 1;
+  const right = index === count - 1 ? Math.max(width - 1, 0) : Math.floor((currentX + nextX) / 2);
+  return {
+    x: clamp(left, 0, Math.max(width - 1, 0)),
+    y: 0,
+    width: Math.max(clamp(right, 0, Math.max(width - 1, 0)) - clamp(left, 0, Math.max(width - 1, 0)) + 1, 1),
+    height: 1,
+  };
+}
+
+function drawSessionBackgroundSpans(
+  data: Uint8Array,
+  width: number,
+  height: number,
+  spans: readonly ChartSessionBackgroundSpan[],
+  pointCount: number,
+  top: number,
+  bottom: number,
+  colors: Pick<ChartColors, "preMarketBgColor" | "postMarketBgColor">,
+  projectIndex: (targetIndex: number) => number,
+) {
+  if (spans.length === 0 || pointCount === 0) return;
+  for (const span of spans) {
+    const startIndex = clamp(span.startIndex, 0, pointCount - 1);
+    const endIndex = clamp(span.endIndex, startIndex, pointCount - 1);
+    const startBand = getProjectedPointBand(startIndex, pointCount, width, projectIndex);
+    const endBand = getProjectedPointBand(endIndex, pointCount, width, projectIndex);
+    const color = parseHex(span.kind === "pre" ? colors.preMarketBgColor : colors.postMarketBgColor, 1);
+    fillRect(data, width, height, startBand.x, top, endBand.x + endBand.width - 1, bottom, color, 1);
+  }
+}
+
 function projectY(value: number, min: number, max: number, top: number, bottom: number): number {
   const range = max - min || 1;
   return lerp(bottom, top, (value - min) / range);
@@ -496,7 +537,19 @@ export function renderNativeChartBase(scene: ChartScene, pixelWidth: number, pix
     }
 
     const layout = getChartPixelLayout(scene, pixelWidth, pixelHeight);
+    drawSessionBackgroundSpans(
+      pixels,
+      pixelWidth,
+      pixelHeight,
+      scene.sessionBackgroundSpans,
+      scene.points.length,
+      layout.plotTop,
+      scene.showVolume ? layout.volumeBottom : layout.plotBottom,
+      scene.colors,
+      (index) => projectX(index, scene.points.length, 0, Math.max(pixelWidth - 1, 0)),
+    );
     drawPriceGrid(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
+    drawIndicatorOverlays(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
 
     switch (scene.mode) {
       case "area":
@@ -514,7 +567,6 @@ export function renderNativeChartBase(scene: ChartScene, pixelWidth: number, pix
         break;
     }
 
-    drawIndicatorOverlays(pixels, pixelWidth, pixelHeight, scene, layout.plotTop, layout.plotBottom);
     drawVolume(pixels, pixelWidth, pixelHeight, scene, layout.volumeTop, layout.volumeBottom);
 
     return { width: pixelWidth, height: pixelHeight, pixels };
@@ -603,6 +655,17 @@ export function renderNativeComparisonChartBase(
   }
 
   const layout = getComparisonPixelLayout(pixelWidth, pixelHeight);
+  drawSessionBackgroundSpans(
+    pixels,
+    pixelWidth,
+    pixelHeight,
+    scene.sessionBackgroundSpans,
+    scene.dates.length,
+    layout.plotTop,
+    layout.plotBottom,
+    scene.colors,
+    (index) => projectX(index, Math.max(scene.dates.length, 1), 0, pixelWidth - 1),
+  );
   drawPriceGrid(
     pixels,
     pixelWidth,

package/src/components/chart/stock-chart-renderer-switch.test.tsx

@@ -204,6 +204,12 @@ function getFrameLineContaining(frame: string, text: string): string {
   return frame.split("\n").find((line) => line.includes(text)) ?? "";
 }
 
+const MONTH_LABEL_PATTERN = /\b(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\b/;
+
+function getTimeAxisLine(frame: string): string {
+  return frame.split("\n").find((line) => MONTH_LABEL_PATTERN.test(line)) ?? "";
+}
+
 function getFrameRowContaining(frame: string, text: string): number {
   return frame.split("\n").findIndex((line) => line.includes(text));
 }
@@ -575,6 +581,96 @@ describe("StockChart renderer switching", () => {
     expect(frame).not.toContain("view:");
   });
 
+  test("keeps the visible range stable when indicator warmup expands history", async () => {
+    const symbol = "AAPL";
+    const config = makeChartConfig(symbol);
+    config.layout.instances = config.layout.instances.map((instance) => (
+      instance.instanceId === TEST_PANE_ID
+        ? {
+          ...instance,
+          settings: {
+            chartRangePreset: "1M",
+            chartResolution: "1d",
+          },
+        }
+        : instance
+    ));
+    config.layouts = [{ name: "Default", layout: cloneLayout(config.layout) }];
+
+    const ticker = makeTicker(symbol);
+    const fullHistory = makeHistory(260);
+    const monthHistory = fullHistory.slice(-21);
+    const yearHistory = fullHistory.slice(-252);
+    const historyForRange = (range: string) => range === "1Y" ? yearHistory : monthHistory;
+    const provider = {
+      ...makeProvider({ [symbol]: fullHistory }),
+      getPriceHistory: async (_requestSymbol: string, _exchange: string, range: string) => historyForRange(range),
+      getPriceHistoryForResolution: async (_requestSymbol: string, _exchange: string, range: string) => historyForRange(range),
+      getDetailedPriceHistory: async (
+        _requestSymbol: string,
+        _exchange: string,
+        startDate: Date,
+        endDate: Date,
+      ) => yearHistory.filter((point) => {
+        const date = point.date instanceof Date ? point.date : new Date(point.date);
+        return date >= startDate && date <= endDate;
+      }),
+    } satisfies DataProvider;
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
+    setSharedMarketDataForTests(provider);
+    const financials: TickerFinancials = {
+      annualStatements: [],
+      quarterlyStatements: [],
+      priceHistory: monthHistory,
+    };
+
+    actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
+    testSetup = await createTestRenderer({ width: 120, height: 32 });
+    root = createRoot(testSetup.renderer);
+    act(() => {
+      root!.render(
+        <ChartHarness
+          config={config}
+          ticker={ticker}
+          financials={financials}
+        />,
+      );
+    });
+
+    await flushFrames(6);
+    await flushDebouncedChartRequests();
+    const beforeAxis = getTimeAxisLine(testSetup.captureCharFrame());
+    expect(beforeAxis).not.toBe("");
+
+    const nextConfig = {
+      ...config,
+      layout: cloneLayout(config.layout),
+    };
+    nextConfig.layout.instances = nextConfig.layout.instances.map((instance) => (
+      instance.instanceId === TEST_PANE_ID
+        ? {
+          ...instance,
+          settings: {
+            ...(instance.settings ?? {}),
+            indicators: { sma: [200] },
+          },
+        }
+        : instance
+    ));
+    nextConfig.layouts = [{ name: "Default", layout: cloneLayout(nextConfig.layout) }];
+
+    act(() => {
+      harnessDispatch!({ type: "SET_CONFIG", config: nextConfig });
+    });
+
+    await flushFrames(4);
+    await flushDebouncedChartRequests();
+    await flushFrames(4);
+
+    expect(getTimeAxisLine(testSetup.captureCharFrame())).toBe(beforeAxis);
+  });
+
   test("chooses supported auto detail resolutions as the visible window changes", async () => {
     const symbol = "AAPL";
     const config = makeChartConfig(symbol);

package/src/components/chart/stock-chart.tsx

@@ -128,6 +128,7 @@ import type { PricePoint, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
 import { TimeAxisLabel } from "./time-axis-label";
 import { PriceAxisLabels } from "./price-axis-labels";
+import { getChartMarketSessionKey, resolveChartMarketSession } from "./market-session";
 
 const MODE_CHIPS: Record<ChartRenderMode, string> = {
   area: "A",
@@ -1086,6 +1087,7 @@ function buildNativeBitmapKey(
   showVolume: boolean,
   paletteId: string,
   indicatorKey: string,
+  marketSessionKey: string,
 ): string {
   const fingerprint = points
     .map((point) => {
@@ -1093,7 +1095,7 @@ function buildNativeBitmapKey(
       return `${date}:${point.open}:${point.high}:${point.low}:${point.close}:${point.volume ?? 0}`;
     })
     .join("|");
-  return [pointCount, pixelWidth, pixelHeight, mode, showVolume ? "1" : "0", paletteId, indicatorKey, fingerprint].join("::");
+  return [pointCount, pixelWidth, pixelHeight, mode, showVolume ? "1" : "0", paletteId, indicatorKey, marketSessionKey, fingerprint].join("::");
 }
 
 function buildNativeCrosshairBitmapKey(
@@ -1715,7 +1717,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     !compact && instrumentRef
       ? {
         instrument: instrumentRef,
-        bufferRange: indicatorBufferRange,
+        bufferRange: viewState.bufferRange,
         granularity: "range",
       }
       : null,
@@ -3044,6 +3046,14 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     themeColors.text,
     themeColors.textDim,
   ]);
+  const marketSession = useMemo(() => resolveChartMarketSession(ticker
+    ? [{
+      exchange: ticker.metadata.exchange,
+      currency: ticker.metadata.currency,
+      assetCategory: ticker.metadata.assetCategory,
+    }]
+    : []), [ticker]);
+  const marketSessionKey = useMemo(() => getChartMarketSessionKey(marketSession), [marketSession]);
 
   const cursorX = viewState.cursorX !== null ? clamp(viewState.cursorX, 0, chartWidth - 1) : null;
   const cursorY = viewState.cursorY !== null ? clamp(viewState.cursorY, 0, chartHeight - 1) : null;
@@ -3071,7 +3081,8 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     axisMode,
     colors: chartColors,
     timeAxisDates,
-  }), [axisMode, chartColors, chartHeight, chartWidth, compact, projection.effectiveMode, projection.points, selectionCursorX, selectionCursorY, showVolume, timeAxisDates, volumeHeight]);
+    marketSession,
+  }), [axisMode, chartColors, chartHeight, chartWidth, compact, marketSession, projection.effectiveMode, projection.points, selectionCursorX, selectionCursorY, showVolume, timeAxisDates, volumeHeight]);
   const displayScene = useMemo(() => buildChartScene(projection.points, {
     width: chartWidth,
     height: chartHeight,
@@ -3084,7 +3095,8 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     colors: chartColors,
     timeAxisDates,
     indicators,
-  }), [axisMode, chartColors, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
+    marketSession,
+  }), [axisMode, chartColors, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, indicators, marketSession, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
   const snappedSelectionCursorX = selectionScene
     ? getPointTerminalColumn(selectionScene.activeIdx, projection.points.length, chartWidth, projection.effectiveMode)
     : null;
@@ -3130,7 +3142,8 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     colors: chartColors,
     timeAxisDates,
     indicators,
-  }), [axisMode, chartColors, chartHeight, chartWidth, compact, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
+    marketSession,
+  }), [axisMode, chartColors, chartHeight, chartWidth, compact, indicators, marketSession, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
 
   const staticResult = useMemo(() => renderChart(projection.points, {
     width: chartWidth,
@@ -3146,7 +3159,8 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     colors: chartColors,
     timeAxisDates,
     indicators,
-  }), [axisMode, chartAssetCategory, chartColors, chartCurrency, chartHeight, chartWidth, compact, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
+    marketSession,
+  }), [axisMode, chartAssetCategory, chartColors, chartCurrency, chartHeight, chartWidth, compact, indicators, marketSession, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
 
   const interactiveResult = useMemo(() => (
     effectiveRenderer === "kitty" || useCanvasChart
@@ -3165,8 +3179,9 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         colors: chartColors,
         timeAxisDates,
         indicators,
+        marketSession,
       })
-  ), [axisMode, chartAssetCategory, chartColors, chartCurrency, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, effectiveRenderer, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, useCanvasChart, volumeHeight]);
+  ), [axisMode, chartAssetCategory, chartColors, chartCurrency, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, effectiveRenderer, indicators, marketSession, projection.effectiveMode, projection.points, showVolume, timeAxisDates, useCanvasChart, volumeHeight]);
 
   const result = effectiveRenderer === "kitty" || useCanvasChart ? staticResult : interactiveResult!;
 
@@ -3300,8 +3315,11 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         chartColors.volumeDown,
         chartColors.candleUp,
         chartColors.candleDown,
+        chartColors.preMarketBgColor,
+        chartColors.postMarketBgColor,
       ].join(","),
       indicatorRenderKey,
+      marketSessionKey,
     );
     const cachedBitmap = lastNativeBaseBitmapRef.current?.key === bitmapKey
       ? lastNativeBaseBitmapRef.current.bitmap
@@ -3331,11 +3349,14 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     chartColors.fillColor,
     chartColors.gridColor,
     chartColors.lineColor,
+    chartColors.postMarketBgColor,
+    chartColors.preMarketBgColor,
     chartColors.volumeDown,
     chartColors.volumeUp,
     compact,
     effectiveRenderer,
     indicatorRenderKey,
+    marketSessionKey,
     nativeBaseScene,
     nativeBaseSurfaceId,
     nativeSurfaceManager,
@@ -3829,9 +3850,10 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         colors: chartColors,
         timeAxisDates,
         indicators: canvasIndicators,
+        marketSession,
       })
       : null
-  ), [axisMode, canvasIndicators, canvasProjection, chartColors, chartHeight, compact, showVolume, timeAxisDates, volumeHeight]);
+  ), [axisMode, canvasIndicators, canvasProjection, chartColors, chartHeight, compact, marketSession, showVolume, timeAxisDates, volumeHeight]);
 
   const canvasBaseBitmapKey = useMemo(() => {
     if (!canvasBitmapSize || !canvasProjection || !hasHistory || isBlockingBody || bodyMessage) return null;
@@ -3850,8 +3872,11 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         chartColors.volumeDown,
         chartColors.candleUp,
         chartColors.candleDown,
+        chartColors.preMarketBgColor,
+        chartColors.postMarketBgColor,
       ].join(","),
       canvasIndicatorRenderKey,
+      marketSessionKey,
     );
   }, [
     bodyMessage,
@@ -3863,11 +3888,14 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     chartColors.fillColor,
     chartColors.gridColor,
     chartColors.lineColor,
+    chartColors.postMarketBgColor,
+    chartColors.preMarketBgColor,
     chartColors.volumeDown,
     chartColors.volumeUp,
     compact,
     hasHistory,
     isBlockingBody,
+    marketSessionKey,
     showVolume,
   ]);
 

package/src/components/chart/time-axis-label.tsx

@@ -23,6 +23,51 @@ function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }
 
+function normalizeDate(value: Date | string | number): Date | null {
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isFinite(date.getTime()) ? date : null;
+}
+
+export function resolveCursorDateFromAxis({
+  dates,
+  width,
+  cursorColumn,
+  cursorPixelX,
+  cellWidthPx,
+}: {
+  dates: Array<Date | string | number>;
+  width: number;
+  cursorColumn: number | null;
+  cursorPixelX?: number | null;
+  cellWidthPx?: number | null;
+}): Date | null {
+  const normalizedDates = dates
+    .map(normalizeDate)
+    .filter((date): date is Date => date !== null);
+  if (normalizedDates.length === 0) return null;
+  if (normalizedDates.length === 1) return normalizedDates[0]!;
+
+  let ratio: number | null = null;
+  if (
+    cursorPixelX !== null
+    && cursorPixelX !== undefined
+    && Number.isFinite(cursorPixelX)
+    && cellWidthPx !== null
+    && cellWidthPx !== undefined
+    && Number.isFinite(cellWidthPx)
+    && cellWidthPx > 0
+  ) {
+    const pixelWidth = Math.max(width * cellWidthPx, 1);
+    ratio = clamp(cursorPixelX / Math.max(pixelWidth - 1, 1), 0, 1);
+  } else if (cursorColumn !== null && Number.isFinite(cursorColumn) && width > 1) {
+    ratio = clamp(cursorColumn / Math.max(width - 1, 1), 0, 1);
+  }
+
+  if (ratio === null) return null;
+  const index = Math.round(ratio * (normalizedDates.length - 1));
+  return normalizedDates[clamp(index, 0, normalizedDates.length - 1)] ?? null;
+}
+
 export function buildCursorTimeAxisOverlay({
   segments,
   width,
@@ -61,13 +106,22 @@ export function TimeAxisLabel({
   cursorColor,
 }: TimeAxisLabelProps) {
   const { cellWidthPx = 8, fractionalViewport = false } = useUiCapabilities();
+  const resolvedCursorDate = useMemo(() => {
+    return resolveCursorDateFromAxis({
+      dates,
+      width,
+      cursorColumn,
+      cursorPixelX: fractionalViewport ? cursorPixelX : null,
+      cellWidthPx,
+    }) ?? cursorDate;
+  }, [cellWidthPx, cursorColumn, cursorDate, cursorPixelX, dates, fractionalViewport, width]);
   const segments = useMemo(() => buildCursorTimeAxisSegments({
     timeLabels,
     width,
     cursorColumn,
-    cursorDate,
+    cursorDate: resolvedCursorDate,
     dates,
-  }), [cursorColumn, cursorDate, dates, timeLabels, width]);
+  }), [cursorColumn, dates, resolvedCursorDate, timeLabels, width]);
   const overlay = useMemo(() => buildCursorTimeAxisOverlay({
     segments,
     width,

package/src/components/command-bar/command-bar.test.tsx

@@ -1276,7 +1276,7 @@ describe("CommandBar", () => {
     );
 
     await testSetup.renderOnce();
-    const frame = await waitForFrameToContain("DES");
+    const frame = await waitForFrameToContain("Exact Match");
     const resultLines = frame
       .split("\n")
       .filter((line) => /\b(AMD|AMDL|AMUU|DES)\b/.test(line) && /\b(NASDAQ|ASX)\b/.test(line));