gloomberb 0.17.4 → 0.17.6

package/src/components/chart/composite/legend.tsx

@@ -1,11 +1,17 @@
 import { useEffect, useRef } from "react";
-import { Box, ScrollBox, Text, useUiCapabilities, type ScrollBoxRenderable } from "../../../ui";
+import { Box, ScrollBox, Span, Text, useUiCapabilities, type ScrollBoxRenderable } from "../../../ui";
 import { colors as themeColors, hoverBg } from "../../../theme/colors";
 import { CANONICAL_EXCHANGE_ALIASES } from "../../../utils/exchanges";
 import { displayWidth, formatPercentRaw, truncateToDisplayWidth } from "../../../utils/format";
 import type { ResolvedSeries } from "../../../time-series/types";
 import { consumeChartMouseEvent, type ChartMouseEvent } from "../core/pointer";
-import { formatCompositeCarriedStamp, formatCompositePointDetails, formatCompositeSeriesValue, seriesPriceReference } from "./format";
+import {
+  formatCompositeCarriedStamp,
+  formatCompositeDatasetDate,
+  formatCompositePointDetails,
+  formatCompositeSeriesValue,
+  seriesPriceReference,
+} from "./format";
 import type { CompositeChartProps, CompositeChartScene } from "./types";
 import { seriesCueCssBackground, type SeriesLineCue } from "./series-cues";
 
@@ -45,15 +51,6 @@ function axisPriceReference(scene: CompositeChartScene | null, series: ResolvedS
   return own;
 }
 
-const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] as const;
-
-/** `Oct 4`, the axis's own wording, with the year when the chart ends in another. */
-function legendDateText(date: Date, endTime: number | undefined): string {
-  const text = `${MONTHS[date.getUTCMonth()]} ${date.getUTCDate()}`;
-  const endYear = endTime === undefined ? null : new Date(endTime).getUTCFullYear();
-  return endYear === null || endYear === date.getUTCFullYear() ? text : `${text} ${date.getUTCFullYear()}`;
-}
-
 /**
  * A dataset's values arrive days late, so the legend dates them. Idle, one
  * date leads the legend when it is every value's; otherwise, and under the
@@ -72,7 +69,7 @@ function legendValueDates(
     valued += 1;
     if (entry.observationKind === "dataset" && cursorValue.point) dates.set(entry.id, cursorValue.point.date);
   }
-  const text = new Map([...dates].map(([id, date]) => [id, legendDateText(date, scene?.endTime)] as const));
+  const text = new Map([...dates].map(([id, date]) => [id, formatCompositeDatasetDate(date, scene?.endTime)] as const));
   const cursorDate = scene?.cursorDate;
   if (cursorDate) {
     const cursorDay = cursorDate.toISOString().slice(0, 10);
@@ -191,6 +188,9 @@ export function CompositeLegend({
     const ownDate = valueDates.own.get(entry.id);
     // Carried from an earlier observation: another venue's closed session, a coarser series.
     const carried = !!scene?.cursorDate && !!cursorValue?.carried && cursorValue.value != null;
+    // What a futures price counts, beside its number as FUT prints it.
+    const statedUnit = entry.points.length > 0 && !formatValue && entry.statedUnit ? ` ${entry.statedUnit}` : "";
+    const valueTail = `${ownDate ? ` ${ownDate}` : ""}${changeText}`;
     const valueText = entry.points.length === 0
       ? entry.hidden ? "" : "no data"
       : `${formatLegendSeriesValue(
@@ -198,7 +198,7 @@ export function CompositeLegend({
         cursorValue?.value ?? null,
         formatValue,
         scene,
-      )}${ownDate ? ` ${ownDate}` : ""}${changeText}`;
+      )}${statedUnit}${valueTail}`;
     const fullText = [entry.label, valueText].filter(Boolean).join(" ");
     const details = formatCompositePointDetails(cursorValue?.point);
     const exactTotal = entry.unitGroup.split(":")[0] === "currency-total"
@@ -220,6 +220,8 @@ export function CompositeLegend({
       width: Math.max(1, displayWidth(text)) + markerWidth,
       labelWidth,
       valueText,
+      statedUnit,
+      valueTail,
       toggleable,
       tooltip,
       carried,
@@ -361,8 +363,9 @@ export function CompositeLegend({
           data-gloom-role="composite-chart-legend-scroll"
         >
           <Box flexDirection="row" width={desiredSeriesWidth} height={1} gap={1}>
-            {entries.map(({ entry, cue, marker, text, toggleable, tooltip, carried, width: entryWidth }, index) => {
+            {entries.map(({ entry, cue, marker, text, statedUnit, valueTail, toggleable, tooltip, carried, width: entryWidth }, index) => {
               const entryVisible = visibleSeriesIds.has(entry.id);
+              const unitAt = statedUnit ? text.length - statedUnit.length - valueTail.length : -1;
               return (
               <Box
                 key={entry.id}
@@ -396,7 +399,15 @@ export function CompositeLegend({
                 )}
                 {/* The filled/hollow marker already says whether a series is
                     shown; the word only repeated it in every legend slot. */}
-                <Text fg={entryVisible && !carried ? themeColors.text : themeColors.textDim}>{text}</Text>
+                <Text fg={entryVisible && !carried ? themeColors.text : themeColors.textDim}>
+                  {unitAt >= 0 ? (
+                    <>
+                      {text.slice(0, unitAt)}
+                      <Span fg={themeColors.textDim}>{statedUnit}</Span>
+                      {valueTail}
+                    </>
+                  ) : text}
+                </Text>
               </Box>
               );
             })}

package/src/components/chart/composite/panel-labels.ts

@@ -39,6 +39,44 @@ export function resolvePanelCrosshair(
   };
 }
 
+export interface SeriesAxisTag {
+  seriesId: string;
+  seriesLabel: string;
+  side: "left" | "right";
+  value: number;
+  label: string;
+  color: string;
+  yRatio: number;
+  carried: boolean;
+}
+
+/** Each observation belongs to its own axis, never to the pointer's height. */
+export function resolveSeriesAxisTags(
+  panel: CompositePanelScene,
+  scene: Pick<CompositeChartScene, "cursorXRatio" | "cursorValues">,
+  format?: CompositeAxisValueFormatter,
+): SeriesAxisTag[] {
+  if (scene.cursorXRatio === null) return [];
+  const values = new Map(scene.cursorValues.map((entry) => [entry.seriesId, entry]));
+  return panel.series.flatMap(({ source }) => {
+    const cursor = values.get(source.id);
+    const domain = panel.axes[source.axis];
+    if (source.hidden || !domain || cursor?.value == null) return [];
+    const yRatio = projectCompositeValue(cursor.value, domain);
+    if (yRatio === null) return [];
+    return [{
+      seriesId: source.id,
+      seriesLabel: source.label,
+      side: source.axis,
+      value: cursor.value,
+      label: (format ?? formatCompositeCursorValue)(cursor.value, domain),
+      color: source.color,
+      yRatio,
+      carried: !!cursor.carried,
+    }];
+  });
+}
+
 export function axisLabelRows(lines: string[]): ReadonlyMap<number, string> {
   return new Map(lines.flatMap((line, row) => {
     const label = line.trim();

package/src/components/chart/composite/panel-series.ts

@@ -28,6 +28,7 @@ function sameSeriesMeta(left: ResolvedSeries, right: ResolvedSeries): boolean {
     && left.color === right.color
     && left.unit === right.unit
     && left.unitGroup === right.unitGroup
+    && left.statedUnit === right.statedUnit
     && left.priceAssetCategory === right.priceAssetCategory
     && left.nativeFrequency === right.nativeFrequency
     && left.timestampMode === right.timestampMode

package/src/components/chart/composite/panel-surface.tsx

@@ -67,7 +67,7 @@ import {
   type PanGesture,
   type PendingWheel,
 } from "./panel-gestures";
-import { resolvePanelCrosshair, axisLabelRows, cursorAxisLabel, resolveSeriesCursorYRatio } from "./panel-labels";
+import { resolvePanelCrosshair, axisLabelRows, cursorAxisLabel, resolveSeriesCursorYRatio, resolveSeriesAxisTags } from "./panel-labels";
 import type { KeyboardToolDrag } from "./use-composite-chart-keyboard";
 
 const webFrame = globalThis as typeof globalThis & {
@@ -101,6 +101,8 @@ interface CompositePanelSurfaceProps {
   onSelectDrawing: (id: string | null) => void;
   onActivate?: () => void;
   onCursorDateChange: (date: Date | null) => void;
+  /** The cursor shown is another chart's, so the pointer's level is not part of it. */
+  sharedCursor: boolean;
   /** Positive positions move toward older observations. A gesture supplies the frame and origin it started from. */
   onPanViewport: (
     deltaPositions: number,
@@ -147,6 +149,7 @@ export function CompositePanelSurface({
   onSelectDrawing,
   onActivate,
   onCursorDateChange,
+  sharedCursor,
   onPanViewport,
   onZoomViewport,
   onSetViewport,
@@ -171,7 +174,7 @@ export function CompositePanelSurface({
   const activeDrag = toolDrag ?? keyboardDrag?.drag ?? null;
   // A keyboard placement's end sits at the level the user put it, so it
   // draws a level line where otherwise only the pointer would.
-  const heldCursorYRatio = keyboardDrag ? keyboardDrag.drag.endYRatio : cursorYRatio;
+  const heldCursorYRatio = keyboardDrag ? keyboardDrag.drag.endYRatio : sharedCursor ? null : cursorYRatio;
   const seriesCursorYRatio = useMemo(
     () => resolveSeriesCursorYRatio(panel, scene),
     [panel, scene],
@@ -207,7 +210,11 @@ export function CompositePanelSurface({
   // The level line follows the pointer only. A keyboard or shared cursor knows
   // its column, and the series markers and axis readout already say the value.
   // A tool placed from the keyboard is the exception: its end is a level.
-  const pointerCursorYRatio = scene.cursorXRatio === null ? null : heldCursorYRatio;
+  // On the desktop and the web an ordinary hover reads each series on its own
+  // axis and draws only the vertical line; the level line, and the pointer's
+  // value on the axes, belong to an armed or placing tool.
+  const readsPointerLevel = !isDesktopWeb || armedTool !== null || activeDrag !== null;
+  const pointerCursorYRatio = scene.cursorXRatio === null || !readsPointerLevel ? null : heldCursorYRatio;
   const crosshair = useMemo(
     () => resolvePanelCrosshair(panel, bitmap, scene, pointerCursorYRatio, colors.crosshair),
     [bitmap, colors.crosshair, panel, pointerCursorYRatio, scene],
@@ -293,6 +300,10 @@ export function CompositePanelSurface({
     () => levels && levelDomain ? projectLevels(levels.items, levelDomain, levelDraft) : NO_LEVELS,
     [levelDomain, levelDraft, levels],
   );
+  // Drawings project through the time scale alone: the crosshair moving,
+  // here or on a linked chart, must not repaint the plot, which the terminal's
+  // kitty surface would upload whole again.
+  const drawingProjection = useMemo(() => ({ timeScale: scene.timeScale }), [scene.timeScale]);
   const bitmapLayers = useMemo(() => {
     if (!bitmap) return null;
     // The desktop composites overlays as vectors, so the plot raster stays put
@@ -309,7 +320,7 @@ export function CompositePanelSurface({
         draw: drawColor,
       },
       toolReadout?.direction ?? "up",
-      { scene, panel, items: panelDrawings, selectedId: selectedDrawingId },
+      { scene: drawingProjection, panel, items: panelDrawings, selectedId: selectedDrawingId },
     );
     return [projectedLevels.length > 0 ? paintLevels(base, projectedLevels, selectedLevelId) : base];
   }, [
@@ -318,11 +329,11 @@ export function CompositePanelSurface({
     colors.crosshair,
     colors.negative,
     drawColor,
+    drawingProjection,
     isDesktopWeb,
     panel,
     panelDrawings,
     projectedLevels,
-    scene,
     selectedDrawingId,
     selectedLevelId,
     toolReadout?.direction,
@@ -394,8 +405,11 @@ export function CompositePanelSurface({
   const cursorPixelY = activeCursorYRatio === null
     ? null
     : activeCursorYRatio * Math.max(panel.height * cellHeightPx - 1, 0);
-  const leftCursorLabel = cursorAxisLabel(panel, "left", activeCursorYRatio, formatAxisValue);
-  const rightCursorLabel = cursorAxisLabel(panel, "right", activeCursorYRatio, formatAxisValue);
+  // The pointer's value on the axes follows the level line it belongs to.
+  const axisCursorYRatio = isDesktopWeb ? pointerCursorYRatio : activeCursorYRatio;
+  const leftCursorLabel = cursorAxisLabel(panel, "left", axisCursorYRatio, formatAxisValue);
+  const rightCursorLabel = cursorAxisLabel(panel, "right", axisCursorYRatio, formatAxisValue);
+  const seriesAxisTags = useMemo(() => isDesktopWeb ? resolveSeriesAxisTags(panel, scene, formatAxisValue) : [], [formatAxisValue, isDesktopWeb, panel, scene]);
   const measureReadout = useMemo(() => {
     if (!activeDrag || !toolReadout?.summary) return null;
     const text = toolReadout.summary;
@@ -846,6 +860,8 @@ export function CompositePanelSurface({
             cursorBackgroundColor={colors.background}
             axisColor={colors.textDim}
             extraMarkers={leftAxisMarkers}
+            seriesTags={isDesktopWeb ? seriesAxisTags.filter((tag) => tag.side === "left") : undefined}
+            measuredPixelHeight={plotSize.height * cellHeightPx}
           />
           <Box width={axisGap} />
         </>
@@ -893,6 +909,8 @@ export function CompositePanelSurface({
             cursorBackgroundColor={colors.background}
             axisColor={colors.textDim}
             extraMarkers={rightAxisMarkers}
+            seriesTags={isDesktopWeb ? seriesAxisTags.filter((tag) => tag.side === "right") : undefined}
+            measuredPixelHeight={plotSize.height * cellHeightPx}
           />
         </>
       ) : null}

package/src/components/chart/composite/price-axis-labels.tsx

@@ -2,6 +2,8 @@ import { useMemo } from "react";
 import { Box, Text, useUiCapabilities } from "../../../ui";
 import { colors } from "../../../theme/colors";
 import { clamp } from "../../../utils/math";
+import type { SeriesAxisTag } from "./panel-labels";
+import { placeSeriesAxisTags, SeriesAxisTags } from "./series-axis-tags";
 
 function formatAxisCell(label: string | null, width: number): string {
   if (width <= 0) return "";
@@ -34,6 +36,9 @@ interface PriceAxisLabelsProps {
   axisColor?: string;
   /** Anchors that stay put while the cursor moves, such as a measure start. */
   extraMarkers?: readonly PriceAxisMarker[];
+  /** Desktop/web observations, separate from a drawing tool's endpoint. */
+  seriesTags?: readonly SeriesAxisTag[];
+  measuredPixelHeight?: number;
 }
 
 interface CursorPriceAxisOverlay {
@@ -134,6 +139,8 @@ export function PriceAxisLabels({
   cursorBackgroundColor = colors.bg,
   axisColor = colors.textDim,
   extraMarkers,
+  seriesTags,
+  measuredPixelHeight,
 }: PriceAxisLabelsProps) {
   const { cellHeightPx = 18, fractionalViewport = false } = useUiCapabilities();
   const overlay = useMemo(() => buildCursorPriceAxisOverlay({
@@ -147,7 +154,11 @@ export function PriceAxisLabels({
   const usePixelOverlay = fractionalViewport && overlay.labelText !== null && overlay.topPercent !== null;
   // Row-snapped labels drift up to a row off the gridlines they name.
   const usePixelTicks = fractionalViewport && axisTicks !== undefined;
-  const pixelHeight = Math.max(height * cellHeightPx, 1);
+  const pixelHeight = Math.max(measuredPixelHeight ?? height * cellHeightPx, 1);
+  const placedSeriesTags = seriesTags ? placeSeriesAxisTags(seriesTags, pixelHeight, cellHeightPx) : [];
+  const lanes = Math.max(1, ...placedSeriesTags.map((tag) => tag.lane + 1));
+  // Fixed reference labels yield to observations, never the other way round.
+  const visibleMarkers = extraMarkers?.filter((marker) => placedSeriesTags.every((tag) => Math.abs(tag.centerY - marker.pixelY) >= cellHeightPx));
   const placedTicks = usePixelTicks
     ? placeAxisTicks({
       ticks: axisTicks,
@@ -155,7 +166,8 @@ export function PriceAxisLabels({
       cellHeightPx,
       badgeCentersPx: [
         ...(usePixelOverlay ? [(overlay.topPercent! / 100) * (pixelHeight - 1)] : []),
-        ...(extraMarkers?.map((marker) => marker.pixelY) ?? []),
+        ...(visibleMarkers?.map((marker) => marker.pixelY) ?? []),
+        ...placedSeriesTags.map((tag) => tag.centerY),
       ],
     })
     : null;
@@ -233,7 +245,7 @@ export function PriceAxisLabels({
           </Box>
         );
       }) : null}
-      {usePixelOverlay || usePixelTicks ? extraMarkers?.map((marker) => (
+      {usePixelOverlay || usePixelTicks ? visibleMarkers?.map((marker) => (
         <Box
           key={`${marker.label}:${marker.pixelY}`}
           width={axisSectionWidth}
@@ -255,6 +267,7 @@ export function PriceAxisLabels({
           {axisPaddingWidth > 0 ? <Box width={axisPaddingWidth} /> : null}
         </Box>
       )) : null}
+      {seriesTags ? <SeriesAxisTags placed={placedSeriesTags} pixelHeight={pixelHeight} lanes={lanes} background={cursorBackgroundColor} /> : null}
       {usePixelOverlay ? (
         <Box
           width={axisSectionWidth}

package/src/components/chart/composite/scene.ts

@@ -661,16 +661,73 @@ function buildCursorValues(
   }));
 }
 
+/**
+ * The bar a time from another chart lands on: the last one at or before it,
+ * as a bar stands for the time from its open until the next. A time before
+ * the first bar in view lands on none, and so does one past the plot's right
+ * edge while the chart is panned back from its newest bar, rather than
+ * pinning the cursor to an edge the time is not at. A chart showing its
+ * newest bar lands any later time on it, so a monthly series still reads its
+ * latest month on a day after it.
+ */
+function linkedCursorDate(scene: CompositeChartScene, requested: Date): Date | null {
+  const target = requested.getTime();
+  const { dates, timeScale } = scene;
+  if (!Number.isFinite(target) || dates.length === 0) return null;
+  const plotEnd = unprojectCompositeTimestamp(timeScale, 1);
+  const newest = timeScale.kind === "market" ? timeScale.anchors.at(-1)?.timestamp : scene.newestTime;
+  if (target > plotEnd && (newest === undefined || newest > plotEnd)) return null;
+  let low = 0;
+  let high = dates.length;
+  while (low < high) {
+    const middle = low + Math.floor((high - low) / 2);
+    if (dates[middle]!.getTime() <= target) low = middle + 1;
+    else high = middle;
+  }
+  return dates[low - 1] ?? null;
+}
+
+/** The bar another chart's cursor time lands on (see `linkedCursorDate`), as its timestamp. */
+export function compositeLinkedCursorTime(scene: CompositeChartScene, time: number): number | null {
+  return linkedCursorDate(scene, new Date(time))?.getTime() ?? null;
+}
+
+/**
+ * The last instant of the bar a cursor is on, which is the time it is shared
+ * at: a bar stands until the next one or its own interval ends, whichever is
+ * first. Another chart then lands on its last bar at or before it, so a daily
+ * cursor shows the day's last intraday bar, whose close is the day's, and an
+ * intraday cursor shows its own day's bar rather than the next one's. On
+ * calendar time the newest bar, with no next one, stands as long as the one
+ * before it did, so a series' latest month lands a daily chart on that
+ * month's latest day rather than its first.
+ */
+export function compositeCursorAsOf(scene: CompositeChartScene, date: Date): number {
+  const start = date.getTime();
+  const next = scene.dates.find((entry) => entry.getTime() > start)?.getTime() ?? Number.POSITIVE_INFINITY;
+  const previous = scene.dates.findLast((entry) => entry.getTime() < start)?.getTime();
+  const intervalEnd = scene.timeScale.kind === "market" ? start + scene.timeScale.cadenceMs
+    : next === Number.POSITIVE_INFINITY && previous !== undefined ? start + (start - previous)
+      : Number.POSITIVE_INFINITY;
+  const end = Math.min(next, intervalEnd);
+  return Number.isFinite(end) ? end - 1 : start;
+}
+
 /**
  * Applies cursor-only state without rebuilding panel domains or projected
  * series. Keeping those references stable lets renderers reuse the expensive
- * base chart while the cursor moves.
+ * base chart while the cursor moves. `linked` places a time another chart's
+ * cursor is at (see `linkedCursorDate`); otherwise the cursor goes to the
+ * nearest bar.
  */
 export function applyCompositeChartCursor(
   scene: CompositeChartScene,
   requestedCursor: Date | null,
+  snap: "nearest" | "linked" = "nearest",
 ): CompositeChartScene {
-  const cursorDate = requestedCursor ? nearestDate(scene.dates, requestedCursor) : null;
+  const cursorDate = !requestedCursor ? null
+    : snap === "linked" ? linkedCursorDate(scene, requestedCursor)
+      : nearestDate(scene.dates, requestedCursor);
   const currentTimestamp = scene.cursorDate?.getTime() ?? null;
   const nextTimestamp = cursorDate?.getTime() ?? null;
   if (currentTimestamp === nextTimestamp) return scene;
@@ -818,6 +875,7 @@ export function buildCompositeChartScene(
     cursorDate,
     cursorXRatio,
     cursorValues: buildCursorValues(panelScenes, cursorDate, { startTime, endTime, timeScale }),
+    newestTime: lastTime,
     ...(timeZone ? { timeZone } : {}),
   };
 }

package/src/components/chart/composite/series-axis-tags.tsx

@@ -0,0 +1,67 @@
+import { Box, Text } from "../../../ui";
+import { clamp } from "../../../utils/math";
+import type { SeriesAxisTag } from "./panel-labels";
+
+/**
+ * Keep every tag. Order is by value height, then authored series order for
+ * ties. A forward pass separates neighbours; a backward pass fits the bottom
+ * edge. Panels shorter than the readout use parallel lanes, not dropped tags
+ * or smaller type. The gutter reserves those lanes before the cursor moves.
+ */
+export function placeSeriesAxisTags(tags: readonly SeriesAxisTag[], pixelHeight: number, labelHeight: number) {
+  const height = Math.max(pixelHeight, labelHeight);
+  const capacity = Math.max(1, Math.floor(height / labelHeight));
+  const sorted = tags.map((tag, order) => ({ ...tag, order, anchorY: clamp(tag.yRatio, 0, 1) * Math.max(pixelHeight - 1, 0) }))
+    .sort((a, b) => a.anchorY - b.anchorY || a.order - b.order);
+  const placed: Array<SeriesAxisTag & { anchorY: number; centerY: number; lane: number }> = [];
+  for (let start = 0; start < sorted.length; start += capacity) {
+    const lane = sorted.slice(start, start + capacity);
+    const centers = lane.map((tag) => clamp(tag.anchorY, labelHeight / 2, height - labelHeight / 2));
+    for (let i = 1; i < centers.length; i++) centers[i] = Math.max(centers[i]!, centers[i - 1]! + labelHeight);
+    if (centers.length) centers[centers.length - 1] = Math.min(centers.at(-1)!, height - labelHeight / 2);
+    for (let i = centers.length - 2; i >= 0; i--) centers[i] = Math.min(centers[i]!, centers[i + 1]! - labelHeight);
+    lane.forEach((tag, index) => placed.push({ ...tag, centerY: centers[index]!, lane: Math.floor(start / capacity) }));
+  }
+  return placed;
+}
+
+export function SeriesAxisTags({ placed, pixelHeight, lanes, background }: {
+  placed: ReturnType<typeof placeSeriesAxisTags>;
+  pixelHeight: number;
+  lanes: number;
+  background: string;
+}) {
+  const percent = (y: number) => `${100 * y / Math.max(pixelHeight, 1)}%`;
+  return placed.map((tag) => {
+    const left = tag.side === "left";
+    const edge = left ? "right" : "left";
+    const inset = `${tag.lane * 100 / lanes}%`;
+    return <Box key={tag.seriesId} style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
+      {/* The tick stays at the observation, even when the badge must move. */}
+      <Box
+        data-gloom-role="chart-series-axis-anchor"
+        data-series-id={tag.seriesId}
+        style={{ position: "absolute", [edge]: 0, top: percent(tag.anchorY), width: `calc(${inset} + .5em)`, height: 0, borderTop: `1px ${tag.carried ? "dashed" : "solid"} ${tag.color}` }}
+      />
+      <Box style={{ position: "absolute", [edge]: `calc(${inset} + .25em)`, top: percent(Math.min(tag.anchorY, tag.centerY)), height: percent(Math.abs(tag.centerY - tag.anchorY)), width: 0, borderLeft: `1px solid ${tag.color}` }} />
+      <Box
+        data-gloom-role="chart-series-axis-tag"
+        data-series-id={tag.seriesId}
+        data-side={tag.side}
+        data-value={tag.value}
+        data-carried={tag.carried ? "true" : undefined}
+        aria-label={`${tag.seriesLabel}: ${tag.label}${tag.carried ? " (carried)" : ""}`}
+        style={{
+          position: "absolute", [edge]: `calc(${inset} + .5em)`, top: percent(tag.centerY), transform: "translateY(-50%)",
+          width: `calc(${100 / lanes}% - .5em)`, height: "1.5em", lineHeight: "1.5em",
+          alignItems: left ? "flex-end" : "flex-start", justifyContent: "center",
+          // Every badge paints above every leader, including another lane's.
+          zIndex: 2, color: tag.color, backgroundColor: background, whiteSpace: "nowrap",
+          borderBlockEnd: tag.carried ? `1px dashed ${tag.color}` : undefined,
+        }}
+      >
+        <Text fg={tag.color} selectable={false}>{tag.label}</Text>
+      </Box>
+    </Box>;
+  });
+}

package/src/components/chart/composite/tools.ts

@@ -153,7 +153,7 @@ export function resolveDrawingFromDrag(
 }
 
 function projectDrawing(
-  scene: CompositeChartScene,
+  scene: Pick<CompositeChartScene, "timeScale">,
   panel: CompositePanelScene,
   drawing: ChartDrawing,
 ): Array<{ xRatio: number; yRatio: number }> | null {
@@ -516,7 +516,7 @@ export function drawChartToolOverlay(
   colors: ChartToolColors,
   direction: "up" | "down" = "up",
   drawings?: {
-    scene: CompositeChartScene;
+    scene: Pick<CompositeChartScene, "timeScale">;
     panel: CompositePanelScene;
     items: readonly ChartDrawing[];
     selectedId?: string | null;

package/src/components/chart/composite/types.ts

@@ -181,6 +181,8 @@ export interface CompositeChartScene {
   cursorPanels?: CompositePanelScene[];
   /** IANA zone the time axis and cursor read in: the venue's for intraday market bars, else UTC. */
   timeZone?: string;
+  /** The newest observation's time, in view or not. */
+  newestTime?: number;
 }
 
 export interface BuildCompositeChartSceneOptions {
@@ -222,6 +224,27 @@ export interface CompositeChartXAxis {
   formatCursor?: (xRatio: number) => string;
 }
 
+/**
+ * A crosshair shared between charts, as the last instant of the bar it is
+ * on. The chart subscribes itself, so a move re-renders the charts and not
+ * the panes around them.
+ */
+interface CompositeCursorLink {
+  subscribe(listener: () => void): () => void;
+  /**
+   * Another chart's cursor, shown in place of this chart's own: on the last
+   * bar at or before it, and not at all outside the view. Null while this
+   * chart's cursor is the shared one, or there is none.
+   */
+  time(): number | null;
+  /** Whether this chart's cursor is the shared one. */
+  held(): boolean;
+  /** Reports this chart's cursor, or null when it leaves. */
+  publish(time: number | null): void;
+  /** Clears the shared cursor wherever it is, as Esc on a chart showing it does. */
+  clear(): void;
+}
+
 export interface CompositeChartProps {
   series: ResolvedSeries[];
   /** Optional legend model; can include hidden series that are not plotted. */
@@ -248,6 +271,11 @@ export interface CompositeChartProps {
   /** Permit panning into an older unloaded window so the owner can backfill it. */
   allowHistoricalBackfill?: boolean;
   cursorDate?: Date | null;
+  /**
+   * A crosshair shared with other charts. By default an interactive chart
+   * with a time axis in a pane shares its layout tab's; null keeps it out.
+   */
+  cursorLink?: CompositeCursorLink | null;
   viewport?: {
     start: Date;
     end: Date;

package/src/components/chart/core/view-reset.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useOptionalPaneInstanceId } from "../../../state/app/context";
+
+/**
+ * A pane's range control and its charts share one request: choosing the range
+ * that is already selected sends the charts back to it, as `0` does on a chart
+ * whose view was panned or zoomed. A chart answers for its own view, and a pane
+ * that keeps a view of its own (a saved one, a loaded window) answers for that.
+ */
+type ViewReset = () => void;
+
+const listeners = new Map<string, Set<ViewReset>>();
+/** Charts outside a pane (a dialog, a test) share one scope. */
+const NO_PANE = "";
+
+function runViewResets(scope: string): void {
+  for (const reset of [...listeners.get(scope) ?? []]) reset();
+}
+
+/**
+ * Registers what happens in this pane when a range is chosen again. Keep it
+ * idempotent and a no-op for a view that was never moved: the request also
+ * arrives when the user presses the range that was already showing.
+ */
+export function useChartViewResetListener(reset: ViewReset, enabled = true): void {
+  const scope = useOptionalPaneInstanceId() ?? NO_PANE;
+  const latest = useRef(reset);
+  latest.current = reset;
+  useEffect(() => {
+    if (!enabled) return;
+    const run = () => latest.current();
+    let set = listeners.get(scope);
+    if (!set) listeners.set(scope, set = new Set());
+    set.add(run);
+    return () => {
+      set.delete(run);
+      if (set.size === 0 && listeners.get(scope) === set) listeners.delete(scope);
+    };
+  }, [enabled, scope]);
+}
+
+/** Sends this pane's charts back to the range they were given. */
+export function useChartViewReset(): () => void {
+  const scope = useOptionalPaneInstanceId() ?? NO_PANE;
+  return useCallback(() => runViewResets(scope), [scope]);
+}

package/src/components/command-bar/commands/collection.ts

@@ -4,7 +4,7 @@ import {
   addTickerToPortfolio,
   isManualPortfolio,
   removeTickerFromPortfolio,
-} from "../../../plugins/builtin/portfolio-list/mutations";
+} from "../../../portfolio/mutations";
 import {
   applyCollectionMembershipChange,
   getCollectionTargetOptions,