gloomberb 0.16.4 → 0.16.6

package/src/cli/ticker-resolution.ts

@@ -1,71 +1,355 @@
 import type { DataProvider } from "../types/data-provider";
+import type { Quote } from "../types/financials";
 import type { TickerRecord } from "../types/ticker";
-import type { TickerRepository } from "../data/ticker-repository";
-import { resolveTickerSearch, upsertTickerFromSearchResult } from "../tickers/search";
-import { canonicalExchange } from "../utils/exchanges";
-import { resolveCliListing } from "./listing-arg";
+import type { AppTickerRepositoryPort } from "../core/app-service-ports";
+import { connectionHealth, GLOOM_CLOUD_HTTP_CONNECTION_ID } from "../core/connection-health";
+import { mapWithConcurrency } from "../utils/concurrency";
+import {
+  AmbiguousContractError,
+  AmbiguousTickerError,
+  resolveTickerSearch,
+  upsertTickerFromSearchResult,
+  type ResolvedTickerSearch,
+} from "../tickers/search";
+import { canonicalExchange, parsePublicTickerKey } from "../utils/exchanges";
+import {
+  chosenListingNote,
+  ListingArgError,
+  listingChoiceNote,
+  listingReadNotes,
+  listingVenues,
+  noLongerTradingNote,
+  notTradedMessage,
+  quoteBareListing,
+  resolveCliListing,
+  savedListingName,
+  tradingListing,
+  type CliListing,
+  type ListingDeps,
+} from "./listing-arg";
+import {
+  describeTickerChange,
+  startTickerChangeLookup,
+  tickerChangeLine,
+  type CurrentListing,
+  type TickerChange,
+  type TickerChangeLookup,
+} from "../tickers/ticker-changes";
+import { coinElsewhereNote, savedListingCoinNote } from "./commands/crypto-hints";
 
 /** The saved ticker for a symbol (`SAN:EPA`, or `SAN` with `--exchange EPA`), saving it from search first if needed. */
 export async function resolveTickerForCli(
   symbol: string,
-  store: TickerRepository,
+  store: AppTickerRepositoryPort,
   dataProvider: DataProvider,
   exchange?: string,
 ): Promise<TickerRecord> {
+  return (await resolveCliTicker(symbol, store, dataProvider, exchange)).ticker;
+}
+
+export interface CliTicker {
+  ticker: TickerRecord;
+  /**
+   * What to say beside it: the venue a bare symbol went to when it has several
+   * ("IEO -> BATS (other listings: IEX, BMV)"), and a listing that stopped trading.
+   */
+  notes: string[];
+  /** Of those, the one saying the listing stopped trading; null while it trades. */
+  ended: string | null;
+  /** The symbol changed (FB became META); when its company left it, the line leads `notes`. */
+  change: TickerChange | null;
+  /**
+   * A bare coin ticker (ETH) read as a listing that is not the coin, such as a
+   * fund named for it: "ETH is Grayscale Ethereum Mini Trust ETF, not ethereum.
+   * For ethereum use ETH-USD." It is also the last of `notes`.
+   */
+  coinNote: string | null;
+}
+
+export interface CliTickerOptions {
+  /** The command that takes one listing, for the choices a failure names: `gloomberb watchlist add Growth 2222:JPX`. */
+  retry?: (key: string) => string;
+  /** `--exchange` only fills in the symbols that name no exchange of their own, as for a list of symbols. */
+  ownExchangeWins?: boolean;
+  /** Look up whether the symbol changed (FB became META); a long list skips it. True by default. */
+  changes?: boolean;
+  /**
+   * Ask a listing already saved for its quote and save the name the quote
+   * gives, as `quote` and `portfolio show` name it; a long list skips it. True by default.
+   */
+  refreshName?: boolean;
+  /**
+   * A bare symbol several listings carry, and no quote settles, fails with the
+   * choice instead of going to the first listing that has a quote, for a caller
+   * that asks which listing is meant (the command bar's single add does).
+   */
+  askWhenAmbiguous?: boolean;
+}
+
+/**
+ * A bare coin ticker several companies list, none of them the coin (SOL): the
+ * listings to choose from in `details`, and where the coin is in `hint`, which
+ * is also the last line of `details`.
+ */
+export class CoinListingError extends ListingArgError {
+  constructor(message: string, details: string, readonly hint: string) {
+    super(message, `${details}\n${hint}`);
+    this.name = "CoinListingError";
+  }
+}
+
+/** Search found no listing for the symbol: the message says so, or why (no longer trading, not on that exchange). */
+export class TickerNotFoundError extends ListingArgError {
+  constructor(message: string) {
+    super(message);
+    this.name = "TickerNotFoundError";
+  }
+}
+
+/**
+ * `resolveTickerForCli`, saying which listing a bare symbol went to. A bare
+ * symbol goes where `quote` reads it: the listing its own quote is on, else,
+ * when no quote settles it, the first of its listings with a quote
+ * (`quoteBareListing`); a code several companies list asks which. A symbol
+ * search no longer lists, whose quote stopped long ago, is no longer trading,
+ * and a named exchange the symbol is not on says where it is. Those failures
+ * are `ListingArgError`s, with any choices in `details`.
+ */
+export async function resolveCliTicker(
+  symbol: string,
+  store: AppTickerRepositoryPort,
+  dataProvider: DataProvider,
+  exchange?: string,
+  options: CliTickerOptions = {},
+): Promise<CliTicker> {
   if (!symbol.trim()) {
     throw new Error("Ticker symbol is required.");
   }
-  const listing = await resolveCliListing(symbol, exchange, { store, dataProvider });
-  if (listing.saved) return listing.saved;
-  const normalized = listing.key;
+  const deps: ListingDeps = { store, dataProvider };
+  const listing = await resolveCliListing(symbol, exchange, deps, { ownExchangeWins: options.ownExchangeWins });
+  const read = listingReadNotes(listing);
+  // Looked up beside the search, so saying FB is now META costs no wait.
+  const changes = options.changes === false ? null : startTickerChangeLookup(dataProvider, listing.symbol, listing.exchange);
+  // A saved listing names what lists there; the issuer that left, if it is that one, is its old line.
+  if (listing.saved) {
+    const saved = options.refreshName === false ? listing.saved : (await nameFromListingQuote(listing.saved, store, dataProvider, null)).ticker;
+    return withChange(listing, changes, { ticker: saved, notes: read, ended: null }, { name: saved.metadata.name });
+  }
 
   const localTickers = new Map(
     (await store.loadAllTickers()).map((ticker) => [ticker.metadata.ticker.toUpperCase(), ticker] as const),
   );
-  const resolved = await resolveTickerSearch({
-    query: normalized,
-    activeTicker: null,
-    tickers: localTickers,
-    dataProvider,
-  });
+  const search = (query: string) => resolveTickerSearch({ query, activeTicker: null, tickers: localTickers, dataProvider });
+  let resolved: ResolvedTickerSearch | null;
+  let bareNote: string | null = null;
+  let bareQuote: Quote | null = null;
+  try {
+    resolved = await search(listing.key);
+  } catch (error) {
+    if (!(error instanceof AmbiguousTickerError) || error instanceof AmbiguousContractError || listing.exchange || options.askWhenAmbiguous) throw error;
+    // No quote of the bare symbol settles which listing it is: the one `quote` reads instead.
+    const bare = await quoteBareListing(listing, deps, { command: "quote", noun: "quote", retry: options.retry ?? null });
+    if (!bare) throw error;
+    if (bare.kind === "missing") {
+      const hint = coinElsewhereNote(listing.symbol, error.listings.map((key) => ({ key, name: error.listingNames[key] ?? "" })));
+      throw hint ? new CoinListingError(bare.message, bare.details, hint) : new ListingArgError(bare.message, bare.details);
+    }
+    resolved = await search(bare.listing.key);
+    bareNote = bare.note;
+    bareQuote = bare.quote;
+  }
 
   if (!resolved) {
-    throw new Error(`No ticker match found for "${normalized}".`);
+    const message = await missingListingMessage(listing, deps);
+    const change = describeTickerChange(listing.symbol, await changes?.settle() ?? null, null);
+    const line = tickerChangeLine(change);
+    throw new TickerNotFoundError(line ? `${message} ${line}.` : message);
   }
-
   if (resolved.kind === "local") {
-    return resolved.ticker;
+    const local = options.refreshName === false ? resolved.ticker : (await nameFromListingQuote(resolved.ticker, store, dataProvider, bareQuote)).ticker;
+    return withChange(listing, changes, { ticker: local, notes: [...read, ...bareNote ? [bareNote] : []], ended: null }, {
+      name: local.metadata.name,
+    });
   }
 
   const { ticker, created } = await upsertTickerFromSearchResult(store, resolved.result);
-  return created ? nameFromListingQuote(ticker, store, dataProvider) : ticker;
+  const named = created ? await nameFromListingQuote(ticker, store, dataProvider, bareQuote) : { ticker, quote: bareQuote };
+  const saved = savedListingName(named.ticker);
+  const others = resolved.otherListings?.map((key) => parsePublicTickerKey(key).exchange ?? key) ?? [];
+  // Several companies' listings name the company it went to and theirs; one company's name its other venues.
+  const venueNote = bareNote ?? (others.length > 0 && saved.exchange
+    ? listingChoiceNote(listing.symbol, saved, await listingVenues(listing.symbol, deps).catch(() => []))
+      ?? chosenListingNote(listing.symbol, saved.exchange, others)
+    : null);
+  const ended = named.quote ? noLongerTradingNote(saved.label, named.quote) : null;
+  // Search listed it, so something trades there; its quote says whether that is the issuer that left.
+  const current = named.quote ? tradingListing(named.quote) : { name: named.ticker.metadata.name };
+  return withChange(listing, changes, {
+    ticker: named.ticker,
+    notes: [...read, venueNote, ended].filter((note): note is string => !!note),
+    ended,
+  }, current);
+}
+
+/**
+ * The resolution with the symbol's change, when it has one, and the coin note
+ * for a bare coin ticker on a listing that is not the coin: a company that left
+ * the symbol leads the notes, the coin note ends them. A named exchange (ETH:ARCA,
+ * --exchange) asked for that listing on purpose and gets no coin note, as in `quote`.
+ */
+async function withChange(
+  listing: Pick<CliListing, "symbol" | "exchange">,
+  lookup: TickerChangeLookup | null,
+  resolved: Omit<CliTicker, "change" | "coinNote">,
+  current: CurrentListing | null | undefined,
+): Promise<CliTicker> {
+  const change = describeTickerChange(listing.symbol, await lookup?.settle() ?? null, current);
+  const line = tickerChangeLine(change);
+  const coinNote = listing.exchange ? null : savedListingCoinNote(listing.symbol, resolved.ticker);
+  return { ...resolved, notes: [...line ? [line] : [], ...resolved.notes, ...coinNote ? [coinNote] : []], change, coinNote };
+}
+
+/**
+ * Why search found no listing: a named exchange the symbol is not on names
+ * the ones it is; a symbol search no longer lists, whose quote stopped long
+ * ago, is no longer trading (TWTR).
+ */
+async function missingListingMessage(listing: CliListing, deps: ListingDeps): Promise<string> {
+  const notTraded = await notTradedMessage(listing, deps);
+  if (notTraded) return notTraded;
+  const quote = await deps.dataProvider.getQuote(listing.request.symbol, listing.request.exchange).catch(() => null);
+  const ended = quote ? noLongerTradingNote(listing.key, quote) : null;
+  return ended ? `${ended}.` : `No ticker match found for "${listing.key}".`;
 }
 
 /**
  * Search catalogues can file a listing under another company's name, such as
  * BAE Systems' London line (BA:LSE) under Boeing. The listing's own
  * quote names the security it prices, which is the name the ticker command
- * shows, so a record created here takes it.
+ * shows, so a record created here takes it. The quote comes back with it,
+ * when it is that listing's.
  */
 async function nameFromListingQuote(
   ticker: TickerRecord,
-  store: TickerRepository,
+  store: AppTickerRepositoryPort,
   dataProvider: DataProvider,
-): Promise<TickerRecord> {
+  known: Quote | null,
+): Promise<{ ticker: TickerRecord; quote: Quote | null }> {
   const { metadata } = ticker;
   try {
-    const quote = await dataProvider.getQuote(metadata.ticker, metadata.exchange);
+    const quote = known ?? await dataProvider.getQuote(metadata.ticker, metadata.exchange);
     const name = quote.name?.trim();
     // A quote that names no listing may be another venue's line served from cache.
     const quoteExchange = canonicalExchange(quote.listingExchangeName || quote.exchangeName);
-    if (!name || name === metadata.name || !quoteExchange || quoteExchange !== canonicalExchange(metadata.exchange)) {
-      return ticker;
-    }
+    if (!quoteExchange || quoteExchange !== canonicalExchange(metadata.exchange)) return { ticker, quote: null };
+    if (!name || name === metadata.name) return { ticker, quote };
     const named: TickerRecord = { ...ticker, metadata: { ...metadata, name } };
     await store.saveTicker(named);
-    return named;
+    return { ticker: named, quote };
   } catch {
     // Without a quote the catalogue name stands.
-    return ticker;
+    return { ticker, quote: null };
+  }
+}
+
+export type CliTickerResolution =
+  | ({ input: string; error?: undefined } & CliTicker)
+  | { input: string; ticker?: undefined; error: Error };
+
+/** Symbols looked up at once. Each is a catalogue search and a quote, so this bounds the requests in flight. */
+const RESOLVE_CONCURRENCY = 8;
+/** Lists of at most this many symbols say which changed; a longer one is a portfolio, not a lookup. */
+const MAX_CHANGE_LOOKUPS = 10;
+/** Symbols looked up again at once after requests failed, gently, as the service may be limiting the rate. */
+const RETRY_CONCURRENCY = 4;
+/** The data service's market requests (search, quotes), as connection health names them. */
+const MARKET_OPERATION = /^(?:GET|POST) \/market\//;
+/**
+ * Waits before each new look at the symbols that failed while requests were
+ * failing. The first outlasts the five seconds the router keeps an empty
+ * search answer; the service's rate limit is a minute's window.
+ */
+const RETRY_WAITS_MS = [6_000, 15_000, 30_000];
+
+/**
+ * Counts the data service's market requests that fail while it watches. A
+ * lookup reads a refused search (rate limited, offline) as no match, and a
+ * refused quote as a listing it cannot settle, so a symbol looked up while
+ * one failed may be there after all.
+ */
+function watchFailedRequests(): { count: () => number; stop: () => void } {
+  const dispose = connectionHealth.hasSource(GLOOM_CLOUD_HTTP_CONNECTION_ID)
+    ? null
+    : connectionHealth.registerSource({ id: GLOOM_CLOUD_HTTP_CONNECTION_ID, name: "Gloom Cloud HTTP", kind: "api" });
+  const failures = new Set<string>();
+  const unsubscribe = connectionHealth.subscribe(() => {
+    const failure = connectionHealth.getSnapshot().sources.find((source) => source.id === GLOOM_CLOUD_HTTP_CONNECTION_ID)?.lastError;
+    if (failure && MARKET_OPERATION.test(failure.operation)) failures.add(`${failure.at}|${failure.latencyMs}|${failure.error ?? ""}`);
+  });
+  return { count: () => failures.size, stop: () => { unsubscribe(); dispose?.(); } };
+}
+
+function lookUpTickers(
+  symbols: readonly string[],
+  concurrency: number,
+  resolve: (symbol: string) => Promise<CliTicker>,
+): Promise<CliTickerResolution[]> {
+  return mapWithConcurrency(symbols, concurrency, async (input): Promise<CliTickerResolution> => {
+    try {
+      return { input, ...await resolve(input) };
+    } catch (error) {
+      return { input, error: error instanceof Error ? error : new Error(String(error)) };
+    }
+  });
+}
+
+/**
+ * `resolveCliTicker` for a list of symbols, several at a time; a symbol that
+ * fails gives its error without failing the rest. `--exchange` names the
+ * venue of the symbols that do not name their own. "Not found" means search
+ * found no listing: while the service refuses requests, the symbols that
+ * failed are looked up again after a pause, and any it still did not answer
+ * for say so.
+ */
+export async function resolveTickersForCli(
+  symbols: readonly string[],
+  store: AppTickerRepositoryPort,
+  dataProvider: DataProvider,
+  exchange?: string,
+  {
+    retry,
+    askWhenAmbiguous,
+    onRetry,
+    retryWaitsMs = RETRY_WAITS_MS,
+  }: Pick<CliTickerOptions, "retry" | "askWhenAmbiguous"> & {
+    /** Told before each new look, with how many symbols and how long it waits first. */
+    onRetry?: (count: number, waitMs: number) => void;
+    retryWaitsMs?: readonly number[];
+  } = {},
+): Promise<CliTickerResolution[]> {
+  // A short list is a lookup: it says which symbols changed and refreshes saved names. A long one is a portfolio.
+  const changes = symbols.length <= MAX_CHANGE_LOOKUPS;
+  const resolve = (symbol: string) => resolveCliTicker(symbol, store, dataProvider, exchange, { retry, askWhenAmbiguous, ownExchangeWins: true, changes, refreshName: changes });
+  const failedRequests = watchFailedRequests();
+  try {
+    let lookups = await lookUpTickers(symbols, RESOLVE_CONCURRENCY, resolve);
+    let failing = failedRequests.count() > 0;
+    for (const waitMs of retryWaitsMs) {
+      const failed = lookups.filter((entry) => entry.error).map((entry) => entry.input);
+      if (!failing || failed.length === 0) break;
+      onRetry?.(failed.length, waitMs);
+      await new Promise((resolveWait) => setTimeout(resolveWait, waitMs));
+      const before = failedRequests.count();
+      const again = new Map((await lookUpTickers(failed, RETRY_CONCURRENCY, resolve)).map((entry) => [entry.input, entry] as const));
+      lookups = lookups.map((entry) => again.get(entry.input) ?? entry);
+      failing = failedRequests.count() > before;
+    }
+    if (!failing) return lookups;
+    // Still refused after the last wait: a failure may only be the refusal, so none is called not found.
+    return lookups.map((entry) => entry.error
+      ? { input: entry.input, error: new Error(`Could not look up ${entry.input}: Gloom Cloud did not answer. Try again in a minute.`) }
+      : entry);
+  } finally {
+    failedRequests.stop();
   }
 }

package/src/cli/types.ts

@@ -3,6 +3,7 @@ import { AppPersistence } from "../data/app-persistence";
 import { TickerRepository } from "../data/ticker-repository";
 import { AssetDataRouter } from "../sources/provider-router";
 import type { AppServices } from "../core/app-services";
+import type { CapabilityInvoker } from "../capabilities/types";
 
 export type ConfigContext = {
   config: AppConfig;
@@ -13,6 +14,8 @@ export type ConfigContext = {
 
 export type MarketContext = ConfigContext & {
   dataProvider: AssetDataRouter;
+  /** Charts catalog series in a report run without the plugin runtime. */
+  seriesCapabilities?: CapabilityInvoker;
   /** `--refresh`: prefetched data bypasses the local cache. */
   refresh?: boolean;
 };
@@ -20,6 +23,8 @@ export type MarketContext = ConfigContext & {
 export type CliServicesContext = {
   config: AppConfig;
   dataDir: string;
+  /** This command created the data folder: the profile had never been used. */
+  createdDataDir?: boolean;
   services: AppServices;
   dataProvider: AssetDataRouter;
   persistence: AppPersistence;

package/src/components/chart/composite/axis-overlays.tsx

@@ -215,19 +215,25 @@ export function StaticXAxisLabels({
       flexDirection="row"
       position="relative"
       overflow="hidden"
+      // Desktop: the width the gutters beside it leave, so labels placed in
+      // percentages follow a resize that draws the chart at a new size
+      // between renders.
+      style={isDesktop ? { flex: "1 1 0px", width: "auto", minWidth: 0 } : undefined}
       data-gloom-role="chart-time-axis"
       data-gloom-label={(visiblePositionedLabels.length > 0
         ? visiblePositionedLabels.map((entry) => entry.label)
         : visibleLabels).join(" ")}
     >
       {visiblePositionedLabels.length > 0 && (isDesktop || visibleLabels.length === 0) ? (
-        <Box position="absolute" left={0} top={0} width={width} height={1}>
+        <Box position="absolute" left={0} top={0} width={width} height={1} style={isDesktop ? { width: "100%" } : undefined}>
           {positionedPlacements.map(({ entry, index, edgeStyle }) => {
             return (
               <Text
                 key={`${entry.label}:${entry.ratio}:${index}`}
                 fg={color}
                 selectable={false}
+                // The label against the right edge, which a floating pane's resize grip may cover.
+                data-gloom-edge={"right" in edgeStyle ? "end" : undefined}
                 style={{
                   position: "absolute",
                   top: 0,
@@ -244,7 +250,12 @@ export function StaticXAxisLabels({
       ) : (
         <Box width={width} height={1} flexDirection="row">
           {visibleLabels.map((label, index) => (
-            <Box key={`${label}:${index}`} width={segmentWidths[index]} overflow="hidden">
+            <Box
+              key={`${label}:${index}`}
+              width={segmentWidths[index]}
+              overflow="hidden"
+              data-gloom-edge={index === visibleLabels.length - 1 && visibleLabels.length > 1 ? "end-segment" : undefined}
+            >
               <Text fg={color}>{flowText[index]}</Text>
             </Box>
           ))}
@@ -331,7 +342,7 @@ export function StaticXMarkerOverlay({
 
   if (nativePaneChrome) {
     return (
-      <Box position="absolute" left={0} top={0} width={width} height={height}>
+      <Box position="absolute" left={0} top={0} width={width} height={height} style={{ width: "100%", height: "100%" }}>
         {visibleMarkers.map((marker) => (
           <Box
             key={marker.id}

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

@@ -7,8 +7,10 @@ import { isVerticalWheelDirection } from "./panel-gestures";
 import { type ChartToolSpan, CHART_DRAWING_COLORS, isDrawingTool, type ChartDrawing } from "./tools";
 import { ChartDrawingStore, NO_DRAWINGS } from "./drawing-store";
 import { CompositeLegend } from "./legend";
+import { CompositeCrosshairReadout } from "./crosshair-readout";
 import { ChartToolbar, CHART_TOOLBAR_WIDTH } from "./toolbar";
-import { AsciiText, Box, ChartSurface, Text, useUiCapabilities } from "../../../ui";
+import { AsciiText, Box, ChartSurface, Text, useUiCapabilities, type BoxRenderable } from "../../../ui";
+import { useLiveStretch } from "../../../ui/live-stretch";
 import { useOptionalPaneInstanceId } from "../../../state/app/context";
 import { useThemeColors, useThemeId } from "../../../theme/theme-context";
 import { themedSeriesColor, themeSeriesColors } from "../../../theme/series-colors";
@@ -16,12 +18,13 @@ import { assignSeriesLineCues } from "./series-cues";
 import { chartSurfaceBackground, usePaneSurface } from "../../layout/pane/surface";
 import { CHART_WATERMARK_ROLE } from "../../../utils/screenshot-watermark";
 import type { ResolvedSeries } from "../../../time-series/types";
+import { isIntradayResolution } from "../../../time-series/resolution";
 import { downsampleCompositeChartScene } from "./downsample";
 import { reuseResolvedSeriesList } from "./panel-series";
 import { consumeChartMouseEvent, type ChartMouseEvent } from "../core/pointer";
 import { useShowChartTextFallback } from "../native/use-chart-text-fallback";
 import { StaticXAxisLabels, StaticXMarkerLabels, StaticXMarkerOverlay } from "./axis-overlays";
-import { formatCompositeTimeAxisDate } from "./format";
+import { formatCompositeCursorAxisDate } from "./format";
 import { resolveCompositeWheelPan, resolveCompositeWheelZoom } from "./interactions";
 import { COMPOSITE_RIGHT_OFFSET_RATIO } from "./time-scale";
 import {
@@ -59,6 +62,15 @@ function chartWatermarkScale(plotWidthPx: number, plotHeightPx: number): number
 
 const NO_X_MARKERS: readonly CompositeChartXMarker[] = [];
 
+/**
+ * Desktop: the rows below the plot span the chart's box and their labels the
+ * width the gutters leave, so when a resize draws the box at a new size
+ * between renders, or CSS sizes it to the box it sits in (`useLiveStretch`),
+ * they follow it by CSS. Otherwise they are the size the cells give them.
+ */
+const DESKTOP_FULL_ROW = { width: "100%" } as const;
+const DESKTOP_PLOT_COLUMN = { flex: "1 1 0px", width: "auto", minWidth: 0 } as const;
+
 /** Default-palette series in the theme's own palette, where it has one; the same list otherwise. */
 function useThemedSeriesList(list: ResolvedSeries[], themeId: string): ResolvedSeries[];
 function useThemedSeriesList(list: ResolvedSeries[] | undefined, themeId: string): ResolvedSeries[] | undefined;
@@ -416,10 +428,23 @@ function ThemedCompositeChart({
     ? buildCompositeViewportTimeAxisLayout(effectiveViewport, plotWidth)
     : null;
 
+  // On the desktop the chart takes the box it sits in (a fraction of a cell
+  // past its cells) and follows a resize by CSS where the boxes above it do;
+  // elsewhere, while a resize has the pane ahead of this size, the chart's
+  // box takes the size it will render at, the plot takes what the gutters
+  // leave, and its bitmap stretches with it until the chart renders there.
+  const rootRef = useRef<BoxRenderable | null>(null);
+  useLiveStretch(rootRef, totalWidth, totalHeight);
+  // Overlays over the plot keep the gutters around it rather than its size.
+  const plotInsetStyle = isDesktopWeb
+    ? { width: "auto", height: "auto", right: `calc(${rightPadding} * var(--cell-w))`, bottom: `calc(${timeAxisRows + xMarkerRows} * var(--cell-h))` }
+    : undefined;
+
   if (!scene) {
     const emptyPlotHeight = Math.max(0, totalHeight - legendRows - timeAxisRows - xMarkerRows);
     return (
       <Box
+        ref={rootRef}
         flexDirection="column"
         width={totalWidth}
         height={totalHeight}
@@ -443,11 +468,17 @@ function ThemedCompositeChart({
           />
         ) : null}
         {emptyPlotHeight > 0 ? (
-          <Box flexDirection="row" width={totalWidth} height={emptyPlotHeight}>
+          <Box
+            flexDirection="row"
+            width={totalWidth}
+            height={emptyPlotHeight}
+            style={isDesktopWeb ? { width: "100%", flex: "1 1 0px", height: "auto", minHeight: 0 } : undefined}
+          >
             {leftPadding > 0 ? <Box width={leftPadding} /> : null}
             <ChartSurface
               width={plotWidth}
               height={emptyPlotHeight}
+              style={isDesktopWeb ? { ...DESKTOP_PLOT_COLUMN, height: "auto", alignSelf: "stretch" } : undefined}
               alignItems="center"
               justifyContent="center"
               onMouseScroll={interactive && navigable && navigationFrame ? handleEmptyMouseScroll : undefined}
@@ -462,7 +493,7 @@ function ThemedCompositeChart({
           </Box>
         ) : null}
         {emptyTimeAxisLayout ? (
-          <Box flexDirection="row" width={totalWidth} height={1}>
+          <Box flexDirection="row" width={totalWidth} height={1} style={isDesktopWeb ? DESKTOP_FULL_ROW : undefined}>
             {leftPadding > 0 ? <Box width={leftPadding} /> : null}
             <StaticXAxisLabels
               labels={[emptyTimeAxisLayout.text]}
@@ -477,6 +508,15 @@ function ThemedCompositeChart({
     );
   }
 
+  const showToolbar = interactive && navigable && plotWidth > CHART_TOOLBAR_WIDTH + 4;
+  // On the desktop and the web the crosshair carries every series' value
+  // beside it, and the legend keeps the latest ones. The terminal's legend
+  // reads out the cursor, as the cell plot has no room for a box over it.
+  const showReadout = isDesktopWeb && interactive && showLegend && !xAxis && scene.cursorDate !== null;
+  // Bars shorter than a day carry a time of day the cursor reads out.
+  const intradayBars = scene.timeZone !== undefined || visibleSeries.some((entry) => (
+    !!entry.historyResolution && isIntradayResolution(entry.historyResolution)
+  ));
   const timeAxisCursorColumn = scene.cursorXRatio === null
     ? null
     : scene.cursorXRatio * Math.max(plotWidth - 1, 0);
@@ -486,23 +526,25 @@ function ThemedCompositeChart({
   const timeAxisCursorLabel = xAxis?.formatCursor && scene.cursorXRatio !== null
     ? xAxis.formatCursor(scene.cursorXRatio)
     : scene.cursorDate
-      ? formatCompositeTimeAxisDate(scene.cursorDate, scene.startTime, scene.endTime, scene.timeZone)
+      ? formatCompositeCursorAxisDate(scene.cursorDate, scene.startTime, scene.endTime, scene.timeZone, intradayBars)
       : null;
   // The crosshair labels the moving end, so the axis only adds the anchor.
   const timeAxisMarkers = toolSpan
     ? [{
       ratio: toolSpan.startXRatio,
-      label: formatCompositeTimeAxisDate(
+      label: formatCompositeCursorAxisDate(
         new Date(toolSpan.startTime),
         scene.startTime,
         scene.endTime,
         scene.timeZone,
+        intradayBars,
       ),
       color: toolSpan.color,
     }]
     : undefined;
   return (
     <Box
+      ref={rootRef}
       flexDirection="column"
       width={totalWidth}
       height={totalHeight}
@@ -510,10 +552,13 @@ function ThemedCompositeChart({
       // The tool overlay anchors here; without it the desktop pins it to the page.
       position="relative"
       data-gloom-role="composite-chart"
+      // Where the view and the loaded bars start and end, in epoch ms, for checks that move it.
+      data-gloom-view={effectiveViewport ? `${effectiveViewport.start.getTime()}:${effectiveViewport.end.getTime()}` : undefined}
+      data-gloom-data={navigationFrame ? `${navigationFrame.dataStart}:${navigationFrame.dataEnd}` : undefined}
     >
       {showLegend ? (
         <CompositeLegend
-          scene={scene}
+          scene={showReadout ? baseScene : scene}
           series={visibleLegendSeries}
           visibleSeriesIds={visibleSeriesIds}
           lineCues={lineCues}
@@ -529,7 +574,21 @@ function ThemedCompositeChart({
           keyboardIndex={legendKeyboardIndex}
         />
       ) : null}
-      {interactive && navigable && plotWidth > CHART_TOOLBAR_WIDTH + 4 ? (
+      {showReadout ? (
+        <CompositeCrosshairReadout
+          scene={scene}
+          series={visibleLegendSeries}
+          visibleSeriesIds={visibleSeriesIds}
+          lineCues={lineCues}
+          formatValue={formatValue}
+          colors={resolvedColors}
+          plotWidth={plotWidth}
+          left={leftPadding}
+          right={rightPadding}
+          top={legendRows + (showToolbar ? 1 : 0)}
+        />
+      ) : null}
+      {showToolbar ? (
         <ChartToolbar
           armedTool={armedTool}
           isDesktopWeb={isDesktopWeb}
@@ -605,6 +664,7 @@ function ThemedCompositeChart({
           zIndex={5}
           alignItems="center"
           justifyContent="center"
+          style={plotInsetStyle}
           data-gloom-role={CHART_WATERMARK_ROLE}
         >
           <AsciiText text="Gloomberb" font="wordmark" scale={watermarkScale} color={resolvedColors.textDim} />
@@ -618,7 +678,7 @@ function ThemedCompositeChart({
           width={plotWidth}
           height={plotHeight}
           zIndex={12}
-          style={isDesktopWeb ? { pointerEvents: "none" } : undefined}
+          style={isDesktopWeb ? { ...plotInsetStyle, pointerEvents: "none" } : undefined}
         >
           <StaticXMarkerOverlay
             markers={xMarkers}
@@ -629,7 +689,7 @@ function ThemedCompositeChart({
         </Box>
       ) : null}
       {timeAxisLayout ? (
-        <Box flexDirection="row" width={totalWidth} height={1}>
+        <Box flexDirection="row" width={totalWidth} height={1} style={isDesktopWeb ? DESKTOP_FULL_ROW : undefined}>
           {leftPadding > 0 ? <Box width={leftPadding} /> : null}
           <StaticXAxisLabels
             labels={xAxis?.ticks ? [] : xAxis?.labels ? [...xAxis.labels] : [timeAxisLayout.text]}
@@ -647,7 +707,7 @@ function ThemedCompositeChart({
         </Box>
       ) : null}
       {xMarkerRows > 0 ? (
-        <Box flexDirection="row" width={totalWidth} height={1}>
+        <Box flexDirection="row" width={totalWidth} height={1} style={isDesktopWeb ? DESKTOP_FULL_ROW : undefined}>
           {leftPadding > 0 ? <Box width={leftPadding} /> : null}
           <StaticXMarkerLabels
             markers={xMarkers}