gloomberb 0.18.0 → 0.18.2

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

@@ -298,6 +298,14 @@ export function formatChartLegendValue(
   return trimmed && trimmed.length <= 6 ? `${compact}${trimmed.startsWith("/") ? "" : " "}${trimmed}` : compact;
 }
 
+/** compactNumber's scale, with the decimals a tick gap needs at that scale. */
+function preciseCompactNumber(value: number, gap: number): string {
+  const absolute = Math.abs(value);
+  const [divisor, suffix] = ([[1e12, "T"], [1e9, "B"], [1e6, "M"], [1e3, "K"]] as const).find(([scale]) => absolute >= scale) ?? [1, ""];
+  const digits = Math.min(12, Math.max(0, Math.ceil(-Math.log10(gap / divisor) - 1e-9)));
+  return `${(value / divisor).toFixed(digits)}${suffix}`;
+}
+
 const COMPACT_LABEL = /^(-?\d+)(?:\.(\d+))?([KMBT]?)$/;
 
 function trimmedDecimals(label: string): number {
@@ -332,13 +340,17 @@ export function formatCompositeAxisValue(value: number, domain: CompositeAxisDom
   // Where that happens the axis spends the digits needed to tell them apart,
   // shared across every tick so the column reads as one scale.
   const gap = narrowestAxisTickGap(domain);
+  const prefix = currencyPrefix(domain.unit);
   if (gap !== null && gap < compactResolution(value)) {
     const resolved = formatAxisPriceValue(value, domain, {
       fixedFractionDigits: Math.max(0, Math.ceil(-Math.log10(gap))),
     });
     if (resolved) return resolved;
+    // No currency to format with, such as a price whose quote has not
+    // arrived: the same digits still keep the ticks apart.
+    const precise = preciseCompactNumber(value, gap);
+    return prefix && precise.startsWith("-") ? `-${prefix}${precise.slice(1)}` : `${prefix}${precise}`;
   }
-  const prefix = currencyPrefix(domain.unit);
   return prefix && compact.startsWith("-") ? `-${prefix}${compact.slice(1)}` : `${prefix}${compact}`;
 }
 

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

@@ -0,0 +1,30 @@
+import type { CSSProperties } from "react";
+import { blendForContrast, higherContrast } from "../../../theme/color-utils";
+import { fitAxisLabels, type CompositeChartLevel, type ProjectedLevel } from "./levels";
+
+/** Keep a precise price in the tag only when it has no readable axis marker. */
+export function levelLabelText(level: CompositeChartLevel, axisVisible: boolean): string {
+  return `${level.label ?? ""}${!axisVisible && level.axisLabel ? ` ${level.axisLabel}` : ""}`;
+}
+
+/** Compact DOM tags straddle their line; crowded or clipped tags yield. */
+export function layoutLevelLabels(levels: readonly ProjectedLevel[], plotHeight: number, textHeight: number) {
+  const candidates = levels.filter(({ level }) => level.label).map((entry) => ({
+    ...entry, top: entry.yRatio * plotHeight - textHeight / 2,
+  })).filter(({ top }) => top >= 0 && top + textHeight <= plotHeight);
+  return fitAxisLabels(candidates, [], ({ top }) => top / textHeight);
+}
+
+export function levelLabelStyle({ yRatio, level }: ProjectedLevel, background: string): CSSProperties {
+  return {
+    top: `${yRatio * 100}%`,
+    transform: "translateY(-50%)",
+    pointerEvents: "none",
+    paddingInline: 3,
+    height: "auto",
+    width: "max-content",
+    border: `1px solid ${level.color}`,
+    backgroundColor: background,
+    color: blendForContrast(level.color, background, higherContrast("#000000", "#ffffff", background), 4.5),
+  };
+}

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

@@ -14,6 +14,11 @@ export interface CompositeChartLevel {
   editable: boolean;
   /** Whether the chart's level action applies to it. */
   actionable: boolean;
+  /** Optional read-only annotation, independent of drawing-tool selection. */
+  label?: string;
+  /** Exact instrument price, independent of the grid's compact tick formatter. */
+  axisLabel?: string;
+  dashed?: boolean;
 }
 
 export type CompositeLevelEdit =
@@ -111,13 +116,17 @@ export function fitAxisLabels<T>(
   });
 }
 
+function levelSegments(dashed?: boolean): Array<[number, number]> {
+  return dashed ? Array.from({ length: 48 }, (_, i) => [i / 48, (i + 0.55) / 48]) : [[0, 1]];
+}
+
 export function levelVectors(levels: readonly ProjectedLevel[], selectedId: string | null): ChartVectorShape[] {
-  return levels.map(({ level, yRatio }) => ({
-    id: `level:${level.id}`,
-    points: [{ x: 0, y: yRatio }, { x: 1, y: yRatio }],
+  return levels.flatMap(({ level, yRatio }) => levelSegments(level.dashed).map(([start, end], index) => ({
+    id: `level:${level.id}:${index}`,
+    points: [{ x: start, y: yRatio }, { x: end, y: yRatio }],
     color: level.color,
     strokeWidth: level.id === selectedId ? 2.2 : 1.2,
-  }));
+  })));
 }
 
 /** Levels painted on a copy of the panel raster, the one layer the terminal uploads. */
@@ -131,7 +140,9 @@ export function paintLevels(
   const maxY = Math.max(base.height - 1, 0);
   for (const { level, yRatio } of levels) {
     const y = Math.round(yRatio * maxY);
-    drawLine(data, base.width, base.height, 0, y, maxX, y, parseHex(level.color), level.id === selectedId ? 2.2 : 1.2);
+    for (const [start, end] of levelSegments(level.dashed)) {
+      drawLine(data, base.width, base.height, start * maxX, y, end * maxX, y, parseHex(level.color), level.id === selectedId ? 2.2 : 1.2);
+    }
   }
   return { width: base.width, height: base.height, pixels: data };
 }
@@ -145,7 +156,7 @@ export function writeLevelText(lines: readonly string[], levels: readonly Projec
   const rows = lines.map((line) => Array.from(line));
   for (const { level, yRatio } of levels) {
     const row = rows[clamp(Math.round(yRatio * (rows.length - 1)), 0, rows.length - 1)]!;
-    const glyph = level.id === selectedId ? "━" : level.editable ? "─" : "┄";
+    const glyph = level.id === selectedId ? "━" : level.dashed || !level.editable ? "┄" : "─";
     for (let x = 0; x < row.length; x += 1) {
       if (row[x] === " " || row[x] === "·" || row[x] === "╌") row[x] = glyph;
     }

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

@@ -12,7 +12,8 @@ import { colors as themeColors } from "../../../theme/colors";
 import { consumeChartMouseEvent, getGlobalMouseX, getLocalPlotPointer, type ChartMouseEvent } from "../core/pointer";
 import { useStaticChartBitmapSize } from "./bitmap";
 import { useMeasuredCells } from "../../../ui/measured-cells";
-import { PriceAxisLabels } from "./price-axis-labels";
+import { PriceAxisLabels, placeAxisTicks } from "./price-axis-labels";
+import { layoutLevelLabels, levelLabelStyle, levelLabelText } from "./level-labels";
 import { formatCompositeCursorValue, type CompositeAxisValueFormatter } from "./format";
 import {
   compositeViewportPositions,
@@ -111,6 +112,8 @@ interface CompositePanelSurfaceProps {
   onZoomViewport: (zoomFactor: number, anchorRatio: number) => void;
   onSetViewport: (range: CompositeViewportRange) => void;
   onToolSpanChange: (span: ChartToolSpan | null) => void;
+  /** A press on the plot started (true) or stopped (false) dragging: a pan, a tool, a drawing or a level. */
+  onDragActiveChange?: (dragging: boolean) => void;
   /** The tool being placed from the keyboard, when it lives in this panel. */
   keyboardToolDrag: KeyboardToolDrag | null;
   /** A press on the plot: the pointer takes over from a keyboard placement. */
@@ -154,6 +157,7 @@ export function CompositePanelSurface({
   onZoomViewport,
   onSetViewport,
   onToolSpanChange,
+  onDragActiveChange,
   keyboardToolDrag,
   onPointerPress,
   showTextFallback,
@@ -207,14 +211,12 @@ export function CompositePanelSurface({
   const plotSpanFactor = 1 + compositeRightOffsetRatio(scene.timeScale);
   const bitmapSize = useStaticChartBitmapSize(plotSize.width, plotSize.height);
   const bitmap = useCompositePanelBitmap({ panel, bitmapSize, colors, isDesktopWeb, revealed: plotSize.revealed === true });
-  // 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.
-  // 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;
+  // The chart under the pointer draws both lines: the level line follows the
+  // pointer, and its value sits on the axes, beside each series' own tag on
+  // the desktop and the web. A keyboard or shared cursor knows its column
+  // only, so a chart following another chart's cursor draws the time line
+  // alone. A tool placed from the keyboard is the exception: its end is a level.
+  const pointerCursorYRatio = scene.cursorXRatio === null ? null : heldCursorYRatio;
   const crosshair = useMemo(
     () => resolvePanelCrosshair(panel, bitmap, scene, pointerCursorYRatio, colors.crosshair),
     [bitmap, colors.crosshair, panel, pointerCursorYRatio, scene],
@@ -479,14 +481,16 @@ export function CompositePanelSurface({
     .sort((left, right) => Number(right.level.id === selectedLevelId) - Number(left.level.id === selectedLevelId)
       || Number(left.level.editable) - Number(right.level.editable))
     .map(({ level, yRatio }) => ({
+      id: level.id,
       side: levelDomain.side,
       yRatio,
-      label: formatAxisValue ? formatAxisValue(level.value, levelDomain) : formatCompositeCursorValue(level.value, levelDomain),
+      label: level.axisLabel ?? (formatAxisValue ? formatAxisValue(level.value, levelDomain) : formatCompositeCursorValue(level.value, levelDomain)),
       color: level.color,
     })) : [], [formatAxisValue, levelDomain, projectedLevels, selectedLevelId]);
   const buildAxisMarkers = (side: "left" | "right") => {
     if (!panel.axes[side]) return undefined;
-    const toAxisMarker = (marker: { yRatio: number; label: string; color: string }) => ({
+    const toAxisMarker = (marker: { id?: string; yRatio: number; label: string; color: string }) => ({
+      id: marker.id,
       row: Math.round(marker.yRatio * Math.max(panel.height - 1, 0)),
       pixelY: marker.yRatio * Math.max(panel.height * cellHeightPx - 1, 0),
       label: marker.label,
@@ -501,8 +505,14 @@ export function CompositePanelSurface({
     // A label is a row tall, so close levels would stack into an unreadable
     // pile and hide the last price: each keeps its line, and only the labels
     // with a row to themselves show. Desktop badges sit between rows.
+    const grid = fractionalViewport
+      ? placeAxisTicks({ ticks: side === "left" ? leftAxisTicks : rightAxisTicks, height: panel.height, cellHeightPx }).map((tick) => ({
+        ...toAxisMarker({ yRatio: tick.ratio, label: tick.label, color: colors.textDim }),
+        pixelY: tick.topPercent / 100 * Math.max(panel.height * cellHeightPx - 1, 1),
+      }))
+      : [...(side === "left" ? leftAxisLabels : rightAxisLabels)].map(([row, label]) => ({ id: undefined, row, pixelY: row * cellHeightPx, label, color: colors.textDim }));
     const markers = [
-      ...fitAxisLabels(levelLabels, fixed, (marker) => fractionalViewport ? marker.pixelY / cellHeightPx : marker.row),
+      ...fitAxisLabels(levelLabels, [...fixed, ...grid], (marker) => fractionalViewport ? marker.pixelY / cellHeightPx : marker.row),
       ...fixed,
     ];
     return markers.length > 0 ? markers : undefined;
@@ -738,12 +748,29 @@ export function CompositePanelSurface({
     }
     finishToolDrag();
   }, [finishToolDrag]);
+  // Said once per change, so a pointer move costs the chart nothing.
+  const reportedDragRef = useRef(false);
+  const reportDrag = useCallback((dragging: boolean) => {
+    if (reportedDragRef.current === dragging) return;
+    reportedDragRef.current = dragging;
+    onDragActiveChange?.(dragging);
+  }, [onDragActiveChange]);
+  const pressPlot = useCallback((event: ChartMouseEvent) => {
+    const before = dragRef.current;
+    startDrag(event);
+    if (dragRef.current !== null && dragRef.current !== before) reportDrag(true);
+  }, [reportDrag, startDrag]);
+  const releasePlot = useCallback(() => {
+    resetDrag();
+    reportDrag(false);
+  }, [reportDrag, resetDrag]);
   const handleMouseMove = useCallback((event: ChartMouseEvent) => {
     // A release over a neighbouring pane never reaches this surface, so treat a
     // plain move, which only fires with no button held, as the missing release.
     finishToolDrag();
+    reportDrag(false);
     updateCursor(event);
-  }, [finishToolDrag, updateCursor]);
+  }, [finishToolDrag, reportDrag, updateCursor]);
   // Trackpads fire wheel events faster than the plot can paint, so one frame
   // absorbs every event that arrived since the last one.
   const pendingWheelRef = useRef<PendingWheel | null>(null);
@@ -878,10 +905,10 @@ export function CompositePanelSurface({
         crosshair={crosshair}
         vectors={vectors}
         onMouseMove={interactive ? handleMouseMove : undefined}
-        onMouseDown={interactive ? navigable ? startDrag : pressCursor : undefined}
+        onMouseDown={interactive ? navigable ? pressPlot : pressCursor : undefined}
         onMouseDrag={interactive && navigable ? dragViewport : undefined}
-        onMouseUp={interactive && navigable ? resetDrag : undefined}
-        onMouseDragEnd={interactive && navigable ? resetDrag : undefined}
+        onMouseUp={interactive && navigable ? releasePlot : undefined}
+        onMouseDragEnd={interactive && navigable ? releasePlot : undefined}
         onMouseScroll={interactive && navigable ? panFromWheel : undefined}
         onMouseOut={interactive ? clearCursor : undefined}
         cursor={interactive ? toolDrag || !navigable || onPickTime ? "crosshair" : "grab" : undefined}
@@ -892,6 +919,27 @@ export function CompositePanelSurface({
       >
         {textLines.map((line, index) => <Text key={index} fg={colors.text}>{line}</Text>)}
       </ChartSurface>
+      {(isDesktopWeb
+        ? layoutLevelLabels(projectedLevels, plotSize.height * cellHeightPx, cellHeightPx)
+        : fitAxisLabels(projectedLevels.filter((entry) => entry.level.label), [], (entry) => entry.yRatio * Math.max(1, panel.height - 1))
+      ).map((entry) => {
+        const { level, yRatio } = entry;
+        const axisWidth = levelDomain?.side === "left" ? leftAxisWidth : rightAxisWidth;
+        const axisMarkers = levelDomain?.side === "left" ? leftAxisMarkers : rightAxisMarkers;
+        const cursorCovers = activeCursorYRatio !== null && Math.abs(activeCursorYRatio - yRatio) * panel.height < 1;
+        const axisVisible = !cursorCovers && (level.axisLabel?.length ?? 0) <= axisWidth && !!axisMarkers?.some((marker) => marker.id === level.id);
+        const label = levelLabelText(level, axisVisible);
+        const labelStyle = isDesktopWeb ? {
+          ...levelLabelStyle(entry, colors.background), left: "auto", right: (rightAxisWidth + (rightAxisWidth ? axisGap : 0) + 1) * cellWidthPx,
+          maxWidth: Math.max(1, plotWidth - 2) * cellWidthPx,
+        } : undefined;
+        const labelWidth = Math.min(plotWidth - 2, label.length + 2);
+        return <Box key={`annotation:${level.id}`} position="absolute" left={leftAxisWidth + (leftAxisWidth ? axisGap : 0) + plotWidth - labelWidth - 1} top={yRatio * Math.max(0, panel.height - 1)} height={1}
+          width={labelWidth} flexDirection="row" justifyContent="flex-end" backgroundColor={colors.background} zIndex={20}
+          style={labelStyle} data-gloom-role="chart-level-label">
+          <Text fg={labelStyle?.color ?? level.color} wrapMode="none" style={isDesktopWeb ? { lineHeight: 1 } : undefined}>{label}</Text>
+        </Box>;
+      })}
       {rightAxisWidth > 0 ? (
         <>
           <Box width={axisGap} />

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

@@ -281,7 +281,8 @@ export function PriceAxisLabels({
             transform: "translateY(-50%)",
             whiteSpace: "pre",
             pointerEvents: "none",
-            zIndex: 1,
+            // The value under the pointer reads whole, over a series' tag at that height.
+            zIndex: 3,
           }}
         >
           <Box flexDirection="row" width={axisWidth} justifyContent={axisLabelJustify} overflow="hidden">

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

@@ -274,6 +274,10 @@ export interface CompositeChartProps {
   remoteKind?: string;
   /** Permit panning into an older unloaded window so the owner can backfill it. */
   allowHistoricalBackfill?: boolean;
+  /**
+   * The owner's cursor. With `onCursorDateChange` the owner moves it; without,
+   * the cursor rests there while no pointer is on the plot.
+   */
   cursorDate?: Date | null;
   /**
    * A crosshair shared with other charts. By default an interactive chart

package/src/components/command-bar/routes/ticker-search/actions.ts

@@ -17,6 +17,7 @@ import {
   type TickerSearchInstrumentClass,
 } from "../../../../tickers/search";
 import type { ResultItem } from "../../list/model";
+import { delistingLabel, parseListingDelisting } from "../../../../market-data/quotes/delisting";
 import {
   buildTickerSearchCacheKey,
   createQuickLookTickerCandidates,
@@ -74,6 +75,9 @@ export function useCommandBarTickerSearchActions({
     // The candidate's detail leads with the name; the rest repeats the badge or venue.
     const leadingName = candidate.detail.split(" | ")[0]?.trim();
     const name = leadingName && leadingName.toUpperCase() !== candidate.label.toUpperCase() ? leadingName : undefined;
+    // A listing that no longer trades says so under its row, with its last session.
+    const delisting = parseListingDelisting(candidate.result?.delisting);
+    const lines = delisting ? [{ segments: [{ text: delistingLabel(delisting), emphasis: "muted" as const }] }] : undefined;
 
     if (candidate.kind === "ticker" && candidate.ticker) {
       return {
@@ -86,6 +90,7 @@ export function useCommandBarTickerSearchActions({
         badge,
         name,
         right,
+        ...(lines ? { lines } : {}),
         category: candidate.category,
         kind: "ticker",
         resolveTicker: async () => candidate.ticker!,
@@ -112,6 +117,7 @@ export function useCommandBarTickerSearchActions({
       badge,
       name,
       right,
+      ...(lines ? { lines } : {}),
       category: candidate.category,
       kind: "search",
       resolveTicker: () => resolveSearchTicker(candidate.result!, publicTickerKey(

package/src/components/command-bar/workflow/collection-actions.ts

@@ -27,6 +27,7 @@ import {
   validatePositionShares,
 } from "../../../portfolio/mutations";
 import { loadFuturesEntrySize } from "../../../portfolio/futures-terms";
+import { wholeUnitQuantityProblem } from "../../../portfolio/position-quantity";
 import type { CommandBarFieldValue } from "./types";
 import type { WorkflowStringValues } from "./broker";
 import { coerceFieldString } from "../helpers";
@@ -248,6 +249,9 @@ export function createCommandBarCollectionWorkflowActions(options: {
       // Negative for a short; zero is no position. A future counts contracts, and the messages say so.
       const quantityLabel = positionQuantityLabel(ticker);
       const shares = readTypedNumber(coerceFieldString(values.shares), quantityLabel);
+      // 1.250 on a listing held in whole lots could be 1,250 as well, and asks the same way.
+      const lots = wholeUnitQuantityProblem(coerceFieldString(values.shares).trim(), ticker, { label: quantityLabel });
+      if (lots) throw new Error(lots);
       const sharesError = validatePositionShares(shares, quantityLabel);
       if (sharesError) {
         throw new Error(t(sharesError));

package/src/components/index.ts

@@ -101,6 +101,8 @@ export { usePaneStatusFooter, usePaneStatusLinkFooter } from "./layout/pane/stat
 export { usePaneNoticeFooter, type UsePaneNoticeFooterOptions } from "./use-pane-notice-footer";
 export { loadingErrorFooterInfo } from "./data-table/table-pane";
 export type { PaneFooterPressEvent, PaneFooterSegment, PaneHint } from "./layout/pane/footer";
+// Data a source delivers late: the footer's yellow clock, its detail on hover.
+export { DELAYED_SEGMENT, delayedFooterSegment, splitDelayedStatus } from "./layout/pane/footer";
 export {
   getPaneSidebarWidth,
   getPaneSidebarWidthRange,

package/src/components/layout/pane/content.tsx

@@ -1,7 +1,7 @@
 import { memo, Profiler, useCallback, useMemo, type ReactNode } from "react";
 import { useAppLanguage } from "../../../i18n/react";
 import { isPerfTraceEnabled, recordPerfSample } from "../../../utils/perf-marks";
-import { PaneInViewProvider } from "../../../state/app/activity";
+import { PaneFocusedProvider, PaneInViewProvider } from "../../../state/app/activity";
 import { PaneInstanceProvider } from "../../../state/app/context";
 import { RemoteUiPaneScope } from "../../../remote/semantic-tree";
 import { useThemeColors } from "../../../theme/theme-context";
@@ -91,19 +91,21 @@ export const PaneContent = memo(function PaneContent({
     <PaneInstanceProvider paneId={paneId}>
       <RemoteUiPaneScope paneId={paneId}>
         <PaneInViewProvider value={inView}>
-          <PaneKeyboardScrollController paneId={paneId} focused={focused} />
-          <Box
-            flexDirection="column"
-            flexGrow={1}
-            flexShrink={1}
-            flexBasis={0}
-            minWidth={0}
-            minHeight={0}
-            overflow="hidden"
-            data-gloom-role="pane-content"
-          >
-            {body}
-          </Box>
+          <PaneFocusedProvider value={focused}>
+            <PaneKeyboardScrollController paneId={paneId} focused={focused} />
+            <Box
+              flexDirection="column"
+              flexGrow={1}
+              flexShrink={1}
+              flexBasis={0}
+              minWidth={0}
+              minHeight={0}
+              overflow="hidden"
+              data-gloom-role="pane-content"
+            >
+              {body}
+            </Box>
+          </PaneFocusedProvider>
         </PaneInViewProvider>
       </RemoteUiPaneScope>
     </PaneInstanceProvider>

package/src/components/layout/pane/footer/index.tsx

@@ -5,7 +5,7 @@ import { t } from "../../../../i18n";
 import { ShortcutHint } from "../../../ui/shortcut-hint";
 import { Button } from "../../../ui/button";
 import { ChoiceDialog } from "../../../ui/choice-dialog";
-import { IconButton } from "../../../ui/icon";
+import { Icon, IconButton } from "../../../ui/icon";
 import { useRemoteUiNode } from "../../../../remote/semantic-tree";
 import { useOptionalDialog, type PromptContext } from "../../../../ui/dialog";
 import { nativePaneFooterRows } from "../sizing";
@@ -23,7 +23,10 @@ import {
 
 export {
   datesPaneData,
+  DELAYED_SEGMENT,
+  delayedFooterSegment,
   hasPaneFooterContent,
+  splitDelayedStatus,
   type CombinedPaneFooter,
   type PaneFooterPressEvent,
   type PaneFooterSegment,
@@ -105,6 +108,21 @@ function SegmentView({ segment, focused }: { segment: PaneFooterSegment; focused
     else stopMouseEvent(event);
   };
 
+  if (nativePaneChrome && segment.icon && !segment.onPress) {
+    // A status, not a control: the icon button's box, with its detail on hover.
+    return (
+      <Box
+        role="img"
+        aria-label={label}
+        title={segment.title ?? label}
+        data-gloom-role="pane-footer-icon"
+        data-icon={segment.icon}
+      >
+        <Icon name={segment.icon} size={14} color={segment.disabled ? colors.textMuted : footerToneColor(segment.parts[0] ?? { text: "" })} />
+      </Box>
+    );
+  }
+
   if (nativePaneChrome && segment.icon) {
     return (
       <IconButton
@@ -247,7 +265,7 @@ function FooterContent({
     : undefined;
   // A segment with shorter forms takes the longest that fits beside the hints, gaps and terminal keys included.
   const keysWidth = nativePaneChrome ? 0 : footer.info.reduce((total, segment) => total + terminalSegmentKey(segment, focused).length, 0);
-  const info = infoWidth != null ? fitPaneFooterInfo(footer.info, infoWidth - keysWidth) : footer.info;
+  const info = infoWidth != null ? fitPaneFooterInfo(footer.info, infoWidth - keysWidth, { besideHints: hasHints }) : footer.info;
 
   if (!hasInfo && !hasHints) {
     return <Box flexGrow={1} height={1} />;
@@ -273,7 +291,8 @@ function FooterContent({
           {...(infoWidth != null ? { width: infoWidth } : {})}
         >
           {info.map((segment, index) => (
-            <Box key={segment.id} flexDirection="row" marginRight={index === info.length - 1 ? 0 : 1}>
+            // An icon is a few cells that mean nothing cut: the text beside it gives way first.
+            <Box key={segment.id} flexDirection="row" flexShrink={segment.icon ? 0 : undefined} marginRight={index === info.length - 1 ? 0 : 1}>
               <SegmentView segment={segment} focused={focused} />
             </Box>
           ))}

package/src/components/layout/pane/footer/model.ts

@@ -1,6 +1,6 @@
 import type { ContextMenuItem } from "../../../../types/context-menu";
 import { t } from "../../../../i18n";
-import { displayWidth } from "../../../../utils/format";
+import { clipToDisplayWidth, displayWidth } from "../../../../utils/format";
 import { getShortcutHintWidth } from "../../../ui/shortcut-hint";
 
 export interface PaneFooterRegistration {
@@ -23,8 +23,11 @@ export interface PaneFooterRegistration {
 export interface PaneFooterSegment {
   id: string;
   parts: PaneFooterPart[];
-  /** Desktop affordance; parts retain the terminal representation. */
-  icon?: "warning";
+  /**
+   * Desktop affordance; parts retain the terminal representation. `clock` is
+   * data a source delivers late: build it with {@link delayedFooterSegment}.
+   */
+  icon?: "warning" | "clock";
   /**
    * The segment only dates the pane's data (`as of 2026-10-05`). A `gloomberb
    * shot` whose status line already dates that data leaves it out, so the
@@ -52,6 +55,68 @@ export interface PaneFooterSegment {
   disabled?: boolean;
 }
 
+/** The terminal's mark for data that arrives late, as quote ages carry it (`◷15s`). */
+const DELAYED_FOOTER_GLYPH = "◷";
+
+/**
+ * The footer's one form for data a source delivers late: a yellow clock with
+ * `detail` in its tooltip on the desktop, and the clock with the delay
+ * (`◷15m`) in the terminal, which has no tooltip, so it takes a few cells
+ * rather than a phrase. `onPress` makes it a button, such as an upgrade.
+ */
+export function delayedFooterSegment({
+  id,
+  detail,
+  delay,
+  onPress,
+  quoteStatus,
+}: {
+  id: string;
+  /** What is late and by how much, in words: the tooltip and the accessible name. */
+  detail: string;
+  /** How late, when known (`15m`, `12h`); the terminal draws it after the clock. */
+  delay?: string;
+  onPress?: () => void;
+  quoteStatus?: boolean;
+}): PaneFooterSegment {
+  return {
+    id,
+    icon: "clock",
+    label: detail,
+    title: detail,
+    parts: [{ text: `${DELAYED_FOOTER_GLYPH}${delay ?? ""}`, tone: "warning" }],
+    ...(onPress ? { onPress } : {}),
+    ...(quoteStatus ? { quoteStatus } : {}),
+  };
+}
+
+/** A pane whose market data is all delayed, by no one figure: the clock alone, its tooltip saying so. */
+export const DELAYED_SEGMENT: PaneFooterSegment = delayedFooterSegment({ id: "delayed", detail: "Delayed market data" });
+
+/** A status that opens with how late its data is: `15m delayed`, `mixed real-time and delayed`, `delayed`. */
+const DELAYED_LEAD = /^(\d+[smhd] delayed|mixed real-time and delayed|delayed)(?: · |$)/;
+
+/**
+ * A status segment whose text opens with how late its data is (`15m delayed ·
+ * as of 14:47 UTC`) as the footer's clock (see {@link delayedFooterSegment})
+ * and the rest of its text; any other segment as it is.
+ */
+export function splitDelayedStatus(segment: PaneFooterSegment): PaneFooterSegment[] {
+  const [first, ...more] = segment.parts;
+  const match = first ? DELAYED_LEAD.exec(first.text) : null;
+  if (!first || !match) return [segment];
+  const lead = match[1]!;
+  const clock = delayedFooterSegment({
+    id: `${segment.id}-delay`,
+    detail: lead,
+    delay: /^\d/.test(lead) ? lead.slice(0, lead.indexOf(" ")) : undefined,
+    quoteStatus: segment.quoteStatus,
+  });
+  const rest = first.text.slice(match[0].length);
+  const parts = rest ? [{ ...first, text: rest }, ...more] : more;
+  return parts.length ? [clock, { ...segment, parts }] : [clock];
+}
+
 /** Whether the segment only dates the pane's data: marked `asOf`, or reading `as of <date>`. */
 export function datesPaneData(segment: Pick<PaneFooterSegment, "asOf" | "parts">): boolean {
   return segment.asOf ?? /^as of\b/i.test(segment.parts[0]?.text ?? "");
@@ -127,7 +192,7 @@ function infoTextWidth(segments: readonly PaneFooterSegment[]): number {
  * The info segments as they fit `width`: segments with `variants` step down
  * together, one variant at a time, until the row fits or none is left.
  */
-export function fitPaneFooterInfo(info: PaneFooterSegment[], width: number): PaneFooterSegment[] {
+export function fitPaneFooterInfo(info: PaneFooterSegment[], width: number, { besideHints = true }: { besideHints?: boolean } = {}): PaneFooterSegment[] {
   const stages = Math.max(0, ...info.map((segment) => segment.variants?.length ?? 0));
   let fitted = info;
   for (let stage = 0; stage < stages && infoTextWidth(fitted) > width; stage += 1) {
@@ -140,9 +205,39 @@ export function fitPaneFooterInfo(info: PaneFooterSegment[], width: number): Pan
       } : segment;
     });
   }
+  // A trailing status cut mid-word reads as part of the hints beside it ("quote 12h t[x] put"): one that does not
+  // fit ends in an ellipsis a column short of them, or is left out when less than half of it would show. A
+  // warning, an icon or a pressable segment stays as it is, clipped by the row if it must be. With no hints beside it
+  // (a pane picture's footer), the row clips it, so a frame that fits its own status line sees it overflow.
+  while (besideHints && fitted.length > 1 && infoTextWidth(fitted) > width) {
+    const last = fitted.at(-1)!;
+    if (last.icon || last.onPress || last.parts.some((part) => part.tone === "warning" || part.tone === "negative")) break;
+    const room = width - infoTextWidth(fitted.slice(0, -1)) - 2;
+    if (room * 2 >= infoTextWidth([last])) return [...fitted.slice(0, -1), clipSegment(last, room)];
+    fitted = fitted.slice(0, -1);
+  }
   return fitted;
 }
 
+/** A segment cut to `width` behind an ellipsis, each part keeping its tone; the full text stays as its title. */
+function clipSegment(segment: PaneFooterSegment, width: number): PaneFooterSegment {
+  const full = segment.parts.map((part) => part.text).join(" ");
+  const clipped = clipToDisplayWidth(full, width);
+  if (clipped === full) return segment;
+  const body = clipped.slice(0, -1);
+  const parts: PaneFooterPart[] = [];
+  let offset = 0;
+  for (const part of segment.parts) {
+    if (offset >= body.length) break;
+    parts.push({ ...part, text: body.slice(offset, offset + part.text.length) });
+    offset += part.text.length + 1;
+  }
+  const last = parts.at(-1);
+  if (!last) return { ...segment, title: segment.title ?? full, parts: [{ ...segment.parts[0]!, text: clipped }] };
+  parts[parts.length - 1] = { ...last, text: `${last.text}…` };
+  return { ...segment, title: segment.title ?? full, parts };
+}
+
 function moreControl(budget: number): { label: string; width: number } {
   const label = t("More");
   const width = displayWidth(label) + 2;

package/src/components/layout/pane/header-tabs.tsx

@@ -63,10 +63,24 @@ export function NestedPaneTabs({ children }: { children: ReactNode }) {
   return <PaneHeaderTabsContext.Provider value={null}>{children}</PaneHeaderTabsContext.Provider>;
 }
 
+/** One id per artwork element, so a strip redraws when a tab's `leading` is a new element and not otherwise. */
+const leadingIds = new WeakMap<object, number>();
+let nextLeadingId = 1;
+function leadingSignature(leading: ReactNode): string | number {
+  if (leading === undefined || leading === null) return "";
+  if (typeof leading !== "object") return String(leading);
+  let id = leadingIds.get(leading);
+  if (id === undefined) {
+    id = nextLeadingId++;
+    leadingIds.set(leading, id);
+  }
+  return id;
+}
+
 function registrationSignature(registration: PaneHeaderTabsRegistration | null): string {
   if (!registration) return "";
   return JSON.stringify([
-    registration.tabs.map((tab) => [tab.value, tab.label, tab.disabled === true, !!tab.onClose, tab.fg ?? "", tab.reorderable !== false]),
+    registration.tabs.map((tab) => [tab.value, tab.label, tab.disabled === true, !!tab.onClose, tab.fg ?? "", tab.reorderable !== false, leadingSignature(tab.leading)]),
     registration.activeValue,
     registration.focused === true,
     registration.keyboardNavigation !== false,