gloomberb 0.18.1 → 0.18.3

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

@@ -11,6 +11,7 @@ import { ChartToolbar, CHART_TOOLBAR_WIDTH } from "./toolbar";
 import { AsciiText, Box, ChartSurface, Text, useUiCapabilities, type BoxRenderable } from "../../../ui";
 import { useLiveStretch } from "../../../ui/live-stretch";
 import { useOptionalPaneInstanceId } from "../../../state/app/context";
+import { usePaneFocused } from "../../../state/app/activity";
 import { useTabCursorLink } from "../../../state/app/tab-cursor";
 import { useThemeColors, useThemeId } from "../../../theme/theme-context";
 import { themedSeriesColor, themeSeriesColors } from "../../../theme/series-colors";
@@ -144,6 +145,7 @@ function ThemedCompositeChart({
   onCursorDateChange,
   onViewportChange,
   onActivate,
+  onPress,
   onToggleSeries,
   isSeriesToggleable,
   timePick,
@@ -155,6 +157,8 @@ function ThemedCompositeChart({
   const showTextFallback = useShowChartTextFallback();
   const [internalCursorDate, setInternalCursorDate] = useState<Date | null>(null);
   const [toolSpan, setToolSpan] = useState<ChartToolSpan | null>(null);
+  const [pointerDragging, setPointerDragging] = useState(false);
+  const paneFocused = usePaneFocused();
   const paneInstanceId = useOptionalPaneInstanceId();
   const [drawings, setDrawings] = useState<readonly ChartDrawing[]>(NO_DRAWINGS);
   const [selectedDrawingId, setSelectedDrawingId] = useState<string | null>(null);
@@ -333,6 +337,7 @@ function ThemedCompositeChart({
     availableAxisWidth,
     Math.max(
       Math.min(MINIMUM_AXIS_LABEL_WIDTH, maximumAxisWidth),
+      ...(levels?.items ?? []).map((level) => level.axisLabel?.length ?? 0),
       ...(layoutPanels ?? []).flatMap((panel) => (["left", "right"] as const).map((side) => {
         const width = compositeAxisLabelWidth(panel.axes[side], formatAxisValue, includeCursorLabels);
         if (!includeSeriesTags || !width) return includeCursorLabels ? width : Math.min(width, maximumAxisWidth);
@@ -343,7 +348,7 @@ function ThemedCompositeChart({
         return (width + 1) * lanes;
       })),
     ),
-  ), [availableAxisWidth, formatAxisValue, includeCursorLabels, includeSeriesTags, layoutPanels, maximumAxisWidth]);
+  ), [availableAxisWidth, formatAxisValue, includeCursorLabels, includeSeriesTags, layoutPanels, maximumAxisWidth, levels?.items]);
   const leftAxisWidth = hasLeftAxis ? resolvedAxisWidth : 0;
   const rightAxisWidth = hasRightAxis ? resolvedAxisWidth : 0;
   const axisGap = resolvedAxisWidth > 0 ? 1 : 0;
@@ -523,6 +528,14 @@ function ThemedCompositeChart({
     removeDrawing,
     pickDrawColor,
   });
+  const pressFromPointer = useCallback(() => {
+    onPress?.();
+    activateFromPointer();
+  }, [activateFromPointer, onPress]);
+  const pressPlot = useCallback(() => {
+    cancelKeyboardPlacement();
+    onPress?.();
+  }, [cancelKeyboardPlacement, onPress]);
   const handleEmptyMouseScroll = useCallback((event: ChartMouseEvent) => {
     const scroll = event.scroll;
     if (!interactive || !navigationFrame || !scroll) return;
@@ -593,7 +606,7 @@ function ThemedCompositeChart({
             accessoryWidth={legendAccessoryWidth}
             formatValue={formatValue}
             showLatestChangePercent={showLatestChangePercent}
-            onActivate={activateFromPointer}
+            onActivate={pressFromPointer}
             onToggleSeries={onToggleSeries}
             isSeriesToggleable={isSeriesToggleable}
             keyboardIndex={legendKeyboardIndex}
@@ -650,7 +663,11 @@ function ThemedCompositeChart({
     );
   }
 
-  const showToolbar = interactive && navigable && plotWidth > CHART_TOOLBAR_WIDTH + 4;
+  // The tools belong to the focused pane, and stay while one is in hand or a
+  // press drags the plot, so focus moving elsewhere never hides what is
+  // drawing. A chart outside a pane (a share page) keeps them.
+  const toolbarWanted = paneFocused !== false || armedTool !== null || pointerDragging || toolSpan !== null;
+  const showToolbar = interactive && navigable && toolbarWanted && plotWidth > CHART_TOOLBAR_WIDTH + 4;
   // 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)
@@ -708,7 +725,7 @@ function ThemedCompositeChart({
           accessoryWidth={legendAccessoryWidth}
           formatValue={formatValue}
           showLatestChangePercent={showLatestChangePercent}
-          onActivate={activateFromPointer}
+          onActivate={pressFromPointer}
           onToggleSeries={onToggleSeries}
           isSeriesToggleable={isSeriesToggleable}
           keyboardIndex={legendKeyboardIndex}
@@ -726,11 +743,11 @@ function ThemedCompositeChart({
           showColors={isDrawingTool(armedTool) || !!selectedDrawingId}
           levelTool={levelsEditable}
           onArmTool={(tool) => {
-            activateFromPointer();
+            pressFromPointer();
             armTool(tool);
           }}
           onPickColor={(color) => {
-            activateFromPointer();
+            pressFromPointer();
             pickDrawColor(color);
           }}
         />
@@ -772,8 +789,9 @@ function ThemedCompositeChart({
           onZoomViewport={zoomViewport}
           onSetViewport={setViewportRange}
           onToolSpanChange={setToolSpan}
+          onDragActiveChange={setPointerDragging}
           keyboardToolDrag={keyboardToolDrag?.panelId === panel.id ? keyboardToolDrag : null}
-          onPointerPress={cancelKeyboardPlacement}
+          onPointerPress={pressPlot}
           showTextFallback={showTextFallback}
           onPickTime={timePick?.onPick}
           levels={levelHost?.panel.id === panel.id ? levels ?? null : null}

package/src/components/chart/composite/drawing-store.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { usePaneSettingValue } from "../../../state/app/context";
 import { CHART_DRAWINGS_SETTING_KEY, parseChartDrawings, type ChartDrawing } from "./tools";
 
@@ -40,6 +40,12 @@ export function ChartDrawingStore({
   if (restoredRef.current === null) {
     restoredRef.current = parseChartDrawings(stored);
   }
+  // What the settings hold, so removing the last drawing is told even when the
+  // pane opened with none: it is not "nothing to say" but "the stored one is gone".
+  const writtenRef = useRef<readonly ChartDrawing[]>(restoredRef.current);
+  const pendingRef = useRef<readonly ChartDrawing[] | null>(null);
+  const setStoredRef = useRef(setStored);
+  setStoredRef.current = setStored;
 
   useEffect(() => {
     const restored = restoredRef.current;
@@ -47,13 +53,27 @@ export function ChartDrawingStore({
     // Restoring once on mount: later writes must not scroll back in time.
   }, []);
 
+  const write = useCallback((next: readonly ChartDrawing[]) => {
+    pendingRef.current = null;
+    writtenRef.current = next;
+    setStoredRef.current(next);
+  }, []);
+
   useEffect(() => {
-    const restored = restoredRef.current ?? NO_DRAWINGS;
-    if (drawings === restored) return;
-    if (drawings.length === 0 && restored.length === 0) return;
-    const timer = setTimeout(() => setStored(drawings), DRAWING_PERSIST_DELAY_MS);
+    // Untouched, or still waiting for the restore above: nothing of the user's to write.
+    if (drawings === NO_DRAWINGS || drawings === writtenRef.current || (drawings.length === 0 && writtenRef.current.length === 0)) {
+      pendingRef.current = null;
+      return;
+    }
+    pendingRef.current = drawings;
+    const timer = setTimeout(() => write(drawings), DRAWING_PERSIST_DELAY_MS);
     return () => clearTimeout(timer);
-  }, [drawings, setStored]);
+  }, [drawings, write]);
+
+  // A change made just before the chart goes away (a tab switch) is still saved.
+  useEffect(() => () => {
+    if (pendingRef.current) write(pendingRef.current);
+  }, [write]);
 
   return null;
 }

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/interactions.ts

@@ -362,7 +362,8 @@ export function resolveCompositeChartInteraction(event: {
   if (shifted && key === "d") return "arm-line";
   if (shifted && key === "p") return "arm-pencil";
   if (shifted && key === "h") return "arm-level";
-  if (key === "backspace") return "delete-drawing";
+  // Delete is the same act on a keyboard that has the key, or on a Mac with fn.
+  if (key === "backspace" || key === "delete") return "delete-drawing";
   if (key === "c" && !event.shift) return "cycle-colour";
   if (event.shift) return null;
   if (key === "a") return "pan-left";

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,
@@ -477,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,
@@ -499,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;
@@ -611,6 +623,17 @@ export function CompositePanelSurface({
       updateCursor(event);
       return;
     }
+    // With no tool in hand, a press on a drawing or a level picks it so Backspace
+    // or Delete can remove it; the press still pans, and one on bare plot lets go.
+    const ratios = pointerRatios(event);
+    if (ratios) {
+      const drawingHit = drawings.length > 0 ? hitTestDrawings(drawings, scene, panel, ratios, plotAspect) : null;
+      const levelHit = !drawingHit && levels?.onEdit && levelDomain
+        ? hitTestLevel(projectedLevels, ratios.yRatio, levelGrabRatio(panel.height))
+        : null;
+      onSelectDrawing(drawingHit ? drawingHit.drawing.id : null);
+      onSelectLevel(levelHit?.editable ? levelHit.id : null);
+    }
     if (!updateCursor(event)) return;
     dragRef.current = startPanGesture(
       frame,
@@ -736,12 +759,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);
@@ -876,10 +916,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}
@@ -890,6 +930,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/types.ts

@@ -315,6 +315,12 @@ export interface CompositeChartProps {
     interaction: "pan" | "reset" | "zoom",
   ) => void;
   onActivate?: () => void;
+  /**
+   * A press on the chart itself (plot, legend or tool bar), not a wheel turn.
+   * The chart consumes the press, so an owner that shares the pane with a
+   * field that takes typed keys hears it here to hand the keyboard back.
+   */
+  onPress?: () => void;
   onToggleSeries?: (seriesId: string) => void;
   isSeriesToggleable?: (series: ResolvedSeries) => boolean;
   /**

package/src/components/chart/composite/use-composite-chart-keyboard.ts

@@ -424,7 +424,7 @@ export function useCompositeChartKeyboard({
       stepLevel(event.name === "[" ? -1 : 1);
       return;
     }
-    if (toolsActive && selectedLevel?.editable && levelsEditable && isPlainKey(event, "backspace")) {
+    if (toolsActive && selectedLevel?.editable && levelsEditable && isPlainKey(event, "backspace", "delete")) {
       consume();
       removeSelectedLevel();
       return;

package/src/components/command-bar/routes/root/command-items.ts

@@ -3,11 +3,26 @@ import type { TickerRecord } from "../../../../types/ticker";
 import { isManualPortfolio } from "../../../../portfolio/mutations";
 import type { Command } from "../../commands/registry";
 import type { ResultItem } from "../../list/model";
-import { canRestartToApply } from "../../../../updater";
+import { canRestartToApply, type UpdateProgress } from "../../../../updater";
 import { NIGHTLY_CHANNEL_SUMMARY, resolveUpdateChannel } from "../../../../updater/channel";
+import { updateFailureReason } from "../../../../updater/failure";
+import { t, tf } from "../../../../i18n";
 import { isPrereleaseVersion } from "../../../../utils/semver";
 import { VERSION } from "../../../../version";
 
+/** "Update failed: download interrupted", as the header says it. */
+function failedUpdateLabel(progress: UpdateProgress): string {
+  const reason = progress.failure ? t(updateFailureReason(progress.failure)) : (progress.error ?? "").replace(/\s+/g, " ").trim();
+  return tf("Update failed: {error}", { error: reason });
+}
+
+/** The whole error under the failed update's row, unless the label already says all of it. */
+function failedUpdateLines(progress: UpdateProgress): ResultItem["lines"] {
+  const error = (progress.error ?? "").replace(/\s+/g, " ").trim();
+  if (!progress.failure || !error) return undefined;
+  return [{ segments: [{ text: error, emphasis: "muted" }] }];
+}
+
 interface RootCommandItemBuilderOptions {
   activeCollectionId: string | null;
   activeTickerData: TickerRecord | null | undefined;
@@ -88,9 +103,12 @@ export function createRootCommandItemBuilder({
         return activeTickerSymbol ? `Remove ${activeTickerSymbol} from Portfolio` : command.label;
       case "set-portfolio-position":
         return activeTickerSymbol ? `Set Position for ${activeTickerSymbol}` : command.label;
-      // The row only shows its label, so a downloaded update is announced there.
+      // The row only shows its label, so a downloaded update is announced there,
+      // and a failed one with its reason; Enter restarts into the one and retries the other.
       case "check-for-updates":
-        return state.updateProgress?.phase === "ready" ? "Update ready, restart to apply" : command.label;
+        if (state.updateProgress?.phase === "ready") return "Update ready, restart to apply";
+        if (state.updateProgress?.phase === "error") return failedUpdateLabel(state.updateProgress);
+        return command.label;
       default:
         return command.label;
     }
@@ -140,7 +158,7 @@ export function createRootCommandItemBuilder({
           return state.updateProgress.message ?? "Update ready, restart to apply";
         }
         if (state.updateProgress?.phase === "error") {
-          return `Update failed: ${state.updateProgress.error}`;
+          return `${failedUpdateLabel(state.updateProgress)}. ${state.updateProgress.error ?? ""}`.trim();
         }
         if (state.updateCheckInProgress) return "Checking releases now";
         if (state.updateAvailable) {
@@ -198,8 +216,11 @@ export function createRootCommandItemBuilder({
       // "update" is a whole word here so it lands on this command before Set
       // Portfolio Position (whose keywords say "update position") and Release
       // Channel, which keeps the word further back.
+      // Ready and failed rename the row; its own name still finds it.
       case "check-for-updates":
-        return state.updateProgress?.phase === "ready" ? "update check for updates restart relaunch" : "update";
+        if (state.updateProgress?.phase === "ready") return "update check for updates restart relaunch";
+        if (state.updateProgress?.phase === "error") return "update check for updates retry";
+        return "update";
       case "release-channel":
         return "nightly stable beta prerelease update updates channel";
       default:
@@ -218,9 +239,14 @@ export function createRootCommandItemBuilder({
       right: smartRight(command, arg),
       shortcutQuery: command.prefix || undefined,
       searchText: smartSearchText(command),
+      ...(command.id === "check-for-updates" && state.updateProgress?.phase === "error"
+        ? { lines: failedUpdateLines(state.updateProgress) }
+        : {}),
+      // Busy while it checks, downloads or installs; a failed update is retried from here.
       disabled:
         command.id === "check-for-updates" &&
-        (state.updateCheckInProgress || (!!state.updateProgress && !canRestartToApply(state.updateProgress))),
+        (state.updateCheckInProgress
+          || (!!state.updateProgress && !canRestartToApply(state.updateProgress) && state.updateProgress.phase !== "error")),
       action: () => runDirectCommand(command, arg),
     };
   };

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/data-table/view.tsx

@@ -11,7 +11,7 @@ import {
 import type { ScrollBoxRenderable } from "../../ui";
 import { useBeforeShortcut, useShortcut } from "../../react/input";
 import { isPlainKey, isPlainKeyboardEvent } from "../../utils/keyboard";
-import { DataTable, type DataTableColumn, type DataTableProps } from "../ui";
+import { DataTable, PaneStatusBody, type DataTableColumn, type DataTableProps, type PaneStatusBodyProps } from "../ui";
 import { useDataTableSortMenu } from "./sort-menu";
 import {
   TableViewFrame,
@@ -89,6 +89,19 @@ export type DataTableSelection<T> =
       ) => void;
     };
 
+/**
+ * What the table's body shows instead of rows while it has none to show: its
+ * first page loading after a tab or filter change, a failed load, a state
+ * with nothing to list. The same states `PaneStatusBody` draws, in the
+ * table's place under `rootBefore`, so the query bar and figures above stay
+ * on screen (and a search field keeps its focus) while the body waits.
+ */
+export type DataTableBodyStatus = Omit<PaneStatusBodyProps, "children" | "width" | "height" | "align">;
+
+function bodyStatusShown(status: DataTableBodyStatus | undefined): status is DataTableBodyStatus {
+  return !!status && (!!status.error || status.loading === true || status.empty === true);
+}
+
 interface SelectionCommitTarget {
   index: number;
   id?: string;
@@ -124,6 +137,12 @@ export interface DataTableViewProps<
   isNavigable?: (item: T, index: number) => boolean;
   rootBefore?: ReactNode;
   rootAfter?: ReactNode;
+  /**
+   * Replaces the table (header and rows) with a loading, error or empty
+   * state while `rootBefore` stays. Precedence is the caller's, as with
+   * `PaneStatusBody`: pass `loading` only while there is nothing to show.
+   */
+  status?: DataTableBodyStatus;
   rootWidth?: number;
   rootHeight?: number;
   rootBackgroundColor?: string;
@@ -165,6 +184,7 @@ export function DataTableView<
   isNavigable,
   rootBefore,
   rootAfter,
+  status,
   rootWidth,
   rootHeight,
   rootBackgroundColor,
@@ -728,7 +748,7 @@ export function DataTableView<
       before={rootBefore}
       after={rootAfter}
     >
-      <DataTable<T, C>
+      {bodyStatusShown(status) ? <PaneStatusBody {...status} /> : <DataTable<T, C>
         {...tableProps}
         headerScrollRef={effectiveHeaderScrollRef}
         scrollRef={effectiveScrollRef}
@@ -741,7 +761,7 @@ export function DataTableView<
         onActivate={handleTableActivate}
         onRowMouseDown={handleRowMouseDown}
         onRowContextMenu={handleRowContextMenu}
-      />
+      />}
     </TableViewFrame>
   );
 }