gloomberb 0.10.4 → 0.11.0

package/src/plugins/builtin/connections/pane.tsx

@@ -0,0 +1,258 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Box, ScrollBox, Text, TextAttributes } from "../../../ui";
+import {
+  DataTableStackView,
+  Spinner,
+  type DataTableCell,
+  type DataTableColumn,
+  usePaneFooter,
+} from "../../../components";
+import { useConnectionHealth } from "../../runtime";
+import { useShortcut } from "../../../react/input";
+import type { PaneProps } from "../../../types/plugin";
+import type {
+  ConnectionHealthState,
+  ConnectionHealthStatus,
+} from "../../../core/connection-health";
+import { colors } from "../../../theme/colors";
+import { formatRelativeAge } from "../../../utils/relative-time";
+import { truncateToDisplayWidth } from "../../../utils/format";
+
+interface ConnectionColumn extends DataTableColumn {
+  id: "service" | "status" | "request" | "latency" | "last";
+}
+
+const SORT_COLUMNS: ConnectionColumn["id"][] = ["status", "service", "request", "latency", "last"];
+
+const STATUS_ORDER: Record<ConnectionHealthStatus, number> = {
+  error: 0,
+  disconnected: 1,
+  connecting: 2,
+  connected: 3,
+  idle: 4,
+};
+
+function statusLabel(status: ConnectionHealthStatus): string {
+  if (status === "connected") return "Connected";
+  if (status === "connecting") return "Connecting";
+  if (status === "disconnected") return "Disconnected";
+  if (status === "error") return "Error";
+  return "Idle";
+}
+
+function statusColor(status: ConnectionHealthStatus): string {
+  if (status === "connected") return colors.positive;
+  if (status === "connecting") return colors.warning;
+  if (status === "disconnected" || status === "error") return colors.negative;
+  return colors.textMuted;
+}
+
+function formatLatency(latencyMs: number | null): string {
+  if (latencyMs == null) return "-";
+  return latencyMs < 1000 ? `${Math.round(latencyMs)}ms` : `${(latencyMs / 1000).toFixed(1)}s`;
+}
+
+function columnsForWidth(width: number): ConnectionColumn[] {
+  const statusWidth = 13;
+  const latencyWidth = 8;
+  const lastWidth = 9;
+  const requestWidth = width >= 72 ? 18 : 0;
+  // Floor low enough that a narrow pane scrolls horizontally instead of clipping.
+  const serviceWidth = Math.max(10, width - statusWidth - latencyWidth - lastWidth - requestWidth - 4);
+  return [
+    { id: "service", label: "SERVICE", width: serviceWidth, align: "left" },
+    { id: "status", label: "STATUS", width: statusWidth, align: "left" },
+    ...(requestWidth > 0 ? [{ id: "request", label: "REQUEST", width: requestWidth, align: "left" } as ConnectionColumn] : []),
+    { id: "latency", label: "LATENCY", width: latencyWidth, align: "right" },
+    { id: "last", label: "LAST", width: lastWidth, align: "right" },
+  ];
+}
+
+function DetailLine({ label, value, color = colors.text }: { label: string; value: string; color?: string }) {
+  return (
+    <Box height={1} flexDirection="row">
+      <Box width={16}><Text fg={colors.textDim}>{label}</Text></Box>
+      <Text fg={color}>{value}</Text>
+    </Box>
+  );
+}
+
+function ConnectionDetail({ source, width, now }: { source: ConnectionHealthState; width: number; now: number }) {
+  const lineWidth = Math.max(24, width - 2);
+  return (
+    <ScrollBox scrollY focusable={false} flexGrow={1} paddingX={1}>
+      <Box flexDirection="column" width={lineWidth}>
+        <DetailLine label="Status" value={statusLabel(source.status)} color={statusColor(source.status)} />
+        <DetailLine label="Type" value={source.kind} color={colors.textDim} />
+        {source.ownerId ? <DetailLine label="Owner" value={source.ownerId} color={colors.textDim} /> : null}
+        {source.socketState ? <DetailLine label="Socket" value={source.socketState} color={statusColor(source.status)} /> : null}
+        {source.lastTransitionAt ? (
+          <DetailLine label="Transition" value={formatRelativeAge(source.lastTransitionAt, now)} color={colors.textMuted} />
+        ) : null}
+        <DetailLine label="Last request" value={source.lastRequestAt ? formatRelativeAge(source.lastRequestAt, now) : "never"} color={colors.textMuted} />
+        <DetailLine label="Operation" value={source.lastOperation ?? "-"} color={colors.textDim} />
+        <DetailLine label="Latency" value={formatLatency(source.lastLatencyMs)} color={colors.textMuted} />
+        {source.currentDetail ? (
+          <DetailLine label="Detail" value={truncateToDisplayWidth(source.currentDetail, Math.max(8, lineWidth - 16))} color={source.status === "error" ? colors.negative : colors.textDim} />
+        ) : null}
+        {source.lastSuccess ? (
+          <DetailLine
+            label="Last success"
+            value={`${formatRelativeAge(source.lastSuccess.at, now)} · ${formatLatency(source.lastSuccess.latencyMs)} · ${source.lastSuccess.operation}`}
+            color={colors.positive}
+          />
+        ) : null}
+        {source.lastError ? (
+          <DetailLine
+            label="Last error"
+            value={`${formatRelativeAge(source.lastError.at, now)} · ${source.lastError.error ?? source.lastError.operation}`}
+            color={colors.negative}
+          />
+        ) : null}
+        {source.recentRequests.length > 0 ? (
+          <>
+            <Box height={1} />
+            <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>Recent requests</Text>
+            {source.recentRequests.slice(0, 8).map((request, index) => (
+              <Box key={`${request.at}:${index}`} height={1} flexDirection="row">
+                <Box width={7}><Text fg={request.success ? colors.positive : colors.negative}>{request.success ? "ok" : "error"}</Text></Box>
+                <Box width={9}><Text fg={colors.textMuted}>{formatLatency(request.latencyMs)}</Text></Box>
+                <Box width={10}><Text fg={colors.textMuted}>{formatRelativeAge(request.at, now)}</Text></Box>
+                <Text fg={colors.textDim}>{truncateToDisplayWidth(request.error ?? request.operation, Math.max(8, lineWidth - 26))}</Text>
+              </Box>
+            ))}
+          </>
+        ) : null}
+      </Box>
+    </ScrollBox>
+  );
+}
+
+export function ConnectionsPane({ focused, width, height }: PaneProps) {
+  const health = useConnectionHealth();
+  const [snapshot, setSnapshot] = useState(() => health.getSnapshot());
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [sort, setSort] = useState<{ columnId: ConnectionColumn["id"]; direction: "asc" | "desc" }>({
+    columnId: "status",
+    direction: "asc",
+  });
+  const [now, setNow] = useState(Date.now());
+  // Sources register asynchronously at boot, so an empty first snapshot is a load,
+  // not an answer.
+  const [settled, setSettled] = useState(() => health.getSnapshot().sources.length > 0);
+
+  useEffect(() => {
+    if (settled) return;
+    const timer = setTimeout(() => setSettled(true), 2000);
+    return () => clearTimeout(timer);
+  }, [settled]);
+
+  useEffect(() => health.subscribe(() => {
+    setSnapshot(health.getSnapshot());
+    setSettled(true);
+  }), [health]);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setNow(Date.now());
+      setSnapshot(health.getSnapshot());
+    }, 5000);
+    return () => clearInterval(timer);
+  }, [health]);
+
+  const sources = useMemo(() => [...snapshot.sources].sort((left, right) => {
+    let comparison = 0;
+    if (sort.columnId === "status") comparison = STATUS_ORDER[left.status] - STATUS_ORDER[right.status];
+    else if (sort.columnId === "service") comparison = left.name.localeCompare(right.name);
+    else if (sort.columnId === "request") comparison = (left.lastOperation ?? "").localeCompare(right.lastOperation ?? "");
+    else if (sort.columnId === "latency") comparison = (left.lastLatencyMs ?? Number.POSITIVE_INFINITY) - (right.lastLatencyMs ?? Number.POSITIVE_INFINITY);
+    else comparison = (left.lastRequestAt ?? 0) - (right.lastRequestAt ?? 0);
+    return (sort.direction === "asc" ? comparison : -comparison)
+      || (left.priority ?? 1000) - (right.priority ?? 1000)
+      || left.name.localeCompare(right.name);
+  }), [snapshot, sort]);
+  const selected = sources.find((source) => source.id === selectedId) ?? sources[0] ?? null;
+  const issues = sources.filter((source) => source.status === "error" || source.status === "disconnected").length;
+  const connecting = sources.filter((source) => source.status === "connecting").length;
+
+  useEffect(() => {
+    if (!selectedId && sources[0]) setSelectedId(sources[0].id);
+    if (selectedId && !sources.some((source) => source.id === selectedId)) {
+      setSelectedId(sources[0]?.id ?? null);
+      setDetailOpen(false);
+    }
+  }, [selectedId, sources]);
+
+  const cycleSort = useCallback(() => {
+    setSort((current) => {
+      const currentIndex = SORT_COLUMNS.indexOf(current.columnId);
+      return current.direction === "asc"
+        ? { ...current, direction: "desc" }
+        : { columnId: SORT_COLUMNS[(currentIndex + 1) % SORT_COLUMNS.length]!, direction: "asc" };
+    });
+  }, []);
+
+  useShortcut((event) => {
+    if (!focused || detailOpen || event.name !== "s") return;
+    event.stopPropagation();
+    cycleSort();
+  });
+
+  usePaneFooter("connections", () => ({
+    info: [
+      ...(issues > 0 ? [{ id: "issues", parts: [{ text: `${issues} issue${issues === 1 ? "" : "s"}`, tone: "warning" as const }] }] : []),
+      ...(connecting > 0 ? [{ id: "connecting", parts: [{ text: `${connecting} connecting`, tone: "muted" as const }] }] : []),
+    ],
+    hints: detailOpen ? [] : [{ id: "sort", key: "s", label: "ort", onPress: cycleSort }],
+  }), [connecting, cycleSort, detailOpen, issues]);
+
+  const renderCell = useCallback((source: ConnectionHealthState, column: ConnectionColumn): DataTableCell => {
+    if (column.id === "service") return { text: truncateToDisplayWidth(source.name, column.width), color: colors.text };
+    if (column.id === "status") return { text: statusLabel(source.status), color: statusColor(source.status) };
+    if (column.id === "request") return { text: truncateToDisplayWidth(source.lastOperation ?? "-", column.width), color: colors.textDim };
+    if (column.id === "latency") return { text: formatLatency(source.lastLatencyMs), color: source.status === "error" ? colors.negative : colors.textMuted };
+    return { text: source.lastRequestAt ? formatRelativeAge(source.lastRequestAt, now) : "-", color: colors.textMuted };
+  }, [now]);
+
+  return (
+    <Box flexDirection="column" width={width} height={height} overflow="hidden">
+      <DataTableStackView<ConnectionHealthState, ConnectionColumn>
+        focused={focused}
+        detailOpen={detailOpen && !!selected}
+        onBack={() => setDetailOpen(false)}
+        detailTitle={selected?.name}
+        detailContent={selected ? <ConnectionDetail source={selected} width={width} now={now} /> : <Box />}
+        rootWidth={width}
+        rootHeight={height}
+        selection={{
+          kind: "id",
+          selectedId: selected?.id ?? null,
+          getId: (source) => source.id,
+          onChange: (id) => setSelectedId(id),
+        }}
+        onActivate={(source) => {
+          setSelectedId(source.id);
+          setDetailOpen(true);
+        }}
+        columns={columnsForWidth(width)}
+        items={sources}
+        sortColumnId={sort.columnId}
+        sortDirection={sort.direction}
+        onHeaderClick={(columnId) => {
+          setSort((current) => current.columnId === columnId
+            ? { ...current, direction: current.direction === "asc" ? "desc" : "asc" }
+            : { columnId: columnId as ConnectionColumn["id"], direction: "asc" });
+        }}
+        getItemKey={(source) => source.id}
+        renderCell={renderCell}
+        emptyContent={settled ? undefined : (
+          <Box paddingX={1} paddingY={1}>
+            <Spinner label="Waiting for services to register..." />
+          </Box>
+        )}
+        emptyStateTitle="No connection activity yet."
+        emptyStateHint="Sources appear when providers and services register."
+      />
+    </Box>
+  );
+}

package/src/plugins/builtin/correlation/index.test.tsx

@@ -121,7 +121,8 @@ describe("correlationModule", () => {
     });
 
     const lines = testSetup!.captureCharFrame().split("\n");
-    const headerY = lines.findIndex((line) => line.includes("AAPL") && line.includes("MSFT"));
+    // The first AAPL+MSFT line is the in-pane ticker input, so skip comma-separated rows.
+    const headerY = lines.findIndex((line) => line.includes("AAPL") && line.includes("MSFT") && !line.includes(","));
     const headerCol = lines[headerY]?.indexOf("AAPL") ?? -1;
     expect(headerY).toBeGreaterThanOrEqual(0);
     expect(headerCol).toBeGreaterThanOrEqual(0);

package/src/plugins/builtin/correlation/index.tsx

@@ -1,21 +1,23 @@
-import { Box, ScrollBox, Text } from "../../../ui";
-import { useCallback, useMemo, useState } from "react";
-import { usePaneFooter } from "../../../components";
+import { Box, ScrollBox, Text, type InputRenderable } from "../../../ui";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { InputSearchBar, SegmentedControl, usePaneFooter } from "../../../components";
 import type { PaneProps } from "../../../types/plugin";
 import type { PluginModule } from "../plugin-module";
 import { TICKER_RESEARCH_PANE_ID } from "../../../types/config";
 import { colors } from "../../../theme/colors";
 import { usePluginTickerActions } from "../../runtime";
-import { useAppSelector, usePaneInstance } from "../../../state/app/context";
+import { useAppSelector, usePaneInstance, usePaneSettingValue } from "../../../state/app/context";
 import { useChartQueries } from "../../../market-data/hooks";
 import { buildChartKey } from "../../../market-data/selectors";
 import { formatTickerListInput } from "../../../tickers/list";
 import { formatCorrelation } from "./compute";
 import {
+  CORRELATION_RANGE_OPTIONS,
   DEFAULT_CORRELATION_SYMBOLS,
   MAX_CORRELATION_TICKERS,
   buildCorrelationSettingsDef,
   getCorrelationPaneSettings,
+  type CorrelationRangePreset,
 } from "./settings";
 import { resolveCorrelationHeatmapCellColors } from "./colors";
 import {
@@ -39,12 +41,17 @@ import {
 } from "./matrix/model";
 import { SymbolLabelCell } from "./matrix/symbol-cell";
 
-function CorrelationMatrixPane({ width, height }: PaneProps) {
+function CorrelationMatrixPane({ focused, width, height }: PaneProps) {
   const pane = usePaneInstance();
   const { navigateTicker, pinTicker } = usePluginTickerActions();
   const tickers = useAppSelector((state) => state.tickers);
   const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
   const settings = useMemo(() => getCorrelationPaneSettings(pane?.settings), [pane?.settings]);
+  const [rangePreset, setRangePreset] = usePaneSettingValue<CorrelationRangePreset>("rangePreset", settings.rangePreset);
+  const [symbolsText, setSymbolsText] = usePaneSettingValue<string>("symbolsText", settings.symbolsText);
+  const [symbolsEditing, setSymbolsEditing] = useState(false);
+  const [symbolsFocusToken, setSymbolsFocusToken] = useState(0);
+  const symbolsInputRef = useRef<InputRenderable | null>(null);
 
   const instruments = useMemo(() => {
     if (settings.symbolsError) return [];
@@ -94,19 +101,19 @@ function CorrelationMatrixPane({ width, height }: PaneProps) {
   }, [symbolsKey, seriesBySymbol]);
 
   const statusSummary = useMemo(
-    () => buildStatusSummary(symbols, seriesBySymbol, matrix.sampleMin, matrix.sampleMax),
-    [symbolsKey, seriesBySymbol, matrix.sampleMin, matrix.sampleMax],
+    () => buildStatusSummary(symbols, seriesBySymbol, matrix.sampleMin, matrix.sampleMax, matrix.hasThinPair),
+    [symbolsKey, seriesBySymbol, matrix.sampleMin, matrix.sampleMax, matrix.hasThinPair],
   );
 
+  // The ticker set and range are visible in-pane, so the footer only carries
+  // load state and errors.
   usePaneFooter("correlation", () => ({
-    info: [
-      { id: "tickers", parts: [{ text: `${symbols.length} tickers`, tone: symbols.length >= 2 ? "value" : "warning", bold: symbols.length >= 2 }] },
-      { id: "range", parts: [{ text: settings.rangePreset, tone: "muted" }] },
-      ...(settings.symbolsError
-        ? [{ id: "error", parts: [{ text: settings.symbolsError, tone: "warning" as const }] }]
-        : [{ id: "status", parts: [{ text: statusSummary, tone: "muted" as const }] }]),
-    ],
-  }), [settings.rangePreset, settings.symbolsError, statusSummary, symbols.length]);
+    info: settings.symbolsError
+      ? [{ id: "error", parts: [{ text: settings.symbolsError, tone: "warning" as const }] }]
+      : statusSummary
+        ? [{ id: "status", parts: [{ text: statusSummary, tone: "muted" as const }] }]
+        : [],
+  }), [settings.symbolsError, statusSummary]);
 
   const openSymbol = useCallback((symbol: string) => {
     if (tickers.has(symbol)) {
@@ -144,11 +151,43 @@ function CorrelationMatrixPane({ width, height }: PaneProps) {
   );
   const availableCellWidth = Math.floor((Math.max(width - rowHeaderWidth - 4, symbols.length * MIN_MATRIX_CELL_WIDTH)) / symbols.length);
   const cellWidth = Math.max(MIN_MATRIX_CELL_WIDTH, Math.min(MATRIX_CELL_WIDTH, availableCellWidth));
+  // Rows are exactly as wide as the matrix, so the zebra and hover bands stop at
+  // the last column instead of running to the pane edge.
+  const matrixRowWidth = rowHeaderWidth + symbols.length * cellWidth + 2;
 
   return (
     <Box flexDirection="column" width={width} height={height}>
+      <Box height={1} flexDirection="row" overflow="hidden">
+        <Box flexShrink={1} overflow="hidden">
+          <InputSearchBar
+            value={symbolsText}
+            focused={focused}
+            active={symbolsEditing}
+            width={Math.max(12, Math.min(40, width - 24))}
+            focusToken={symbolsFocusToken}
+            inputRef={symbolsInputRef}
+            placeholder="tickers"
+            debounceMs={500}
+            onFocus={() => {
+              setSymbolsEditing(true);
+              setSymbolsFocusToken((token) => token + 1);
+            }}
+            onBlur={() => setSymbolsEditing(false)}
+            onQueryChange={(query) => setSymbolsText(query)}
+          />
+        </Box>
+        <Box flexGrow={1} />
+        <SegmentedControl
+          options={CORRELATION_RANGE_OPTIONS.map((range) => ({ label: range, value: range }))}
+          value={rangePreset}
+          onChange={(value) => setRangePreset(value as CorrelationRangePreset)}
+          focused={focused && !symbolsEditing}
+          shortcutScope="correlation:range"
+        />
+      </Box>
+
       {/* Column header row */}
-      <Box flexDirection="row" paddingX={1} height={1} backgroundColor={headerBg}>
+      <Box flexDirection="row" paddingX={1} height={1} width={matrixRowWidth} backgroundColor={headerBg}>
         <Box width={rowHeaderWidth} flexShrink={0} />
         {symbols.map((sym) => (
           <SymbolLabelCell
@@ -166,10 +205,10 @@ function CorrelationMatrixPane({ width, height }: PaneProps) {
       </Box>
 
       {/* Matrix rows */}
-      <ScrollBox flexGrow={1} scrollY focusable={false}>
+      <ScrollBox flexGrow={1} scrollY scrollX focusable={false}>
         <Box flexDirection="column">
           {symbols.map((rowSym, rowIndex) => (
-            <Box key={rowSym} flexDirection="row" paddingX={1} backgroundColor={rowIndex % 2 === 0 ? colors.bg : undefined}>
+            <Box key={rowSym} flexDirection="row" paddingX={1} width={matrixRowWidth} backgroundColor={rowIndex % 2 === 0 ? colors.bg : undefined}>
               {/* Row header */}
               <Box
                 width={rowHeaderWidth}
@@ -267,7 +306,7 @@ export const correlationModule: PluginModule = {
           ? options.symbols
           : DEFAULT_CORRELATION_SYMBOLS;
         return {
-          title: buildCorrelationPaneTitle(symbols, "1Y"),
+          title: buildCorrelationPaneTitle(),
           placement: "floating",
           settings: {
             rangePreset: "1Y",

package/src/plugins/builtin/correlation/matrix/model.ts

@@ -93,9 +93,11 @@ export function buildCorrelationMatrix(
   results: Map<string, CorrelationResult>;
   sampleMin: number | null;
   sampleMax: number | null;
+  hasThinPair: boolean;
 } {
   const results = new Map<string, CorrelationResult>();
   const sampleSizes: number[] = [];
+  let hasThinPair = false;
 
   for (let rowIndex = 0; rowIndex < symbols.length; rowIndex++) {
     for (let colIndex = 0; colIndex < symbols.length; colIndex++) {
@@ -108,8 +110,11 @@ export function buildCorrelationMatrix(
         ? correlateDatedReturns(rowSeries.returns, colSeries.returns, MIN_CORRELATION_OBSERVATIONS)
         : { correlation: null, sampleSize: 0 };
       results.set(pairKey(rowSym, colSym), result);
-      if (rowIndex < colIndex && result.sampleSize > 0) {
-        sampleSizes.push(result.sampleSize);
+      if (rowIndex < colIndex) {
+        if (result.sampleSize > 0) sampleSizes.push(result.sampleSize);
+        if (result.correlation == null && result.sampleSize < MIN_CORRELATION_OBSERVATIONS) {
+          hasThinPair = true;
+        }
       }
     }
   }
@@ -118,6 +123,7 @@ export function buildCorrelationMatrix(
     results,
     sampleMin: sampleSizes.length > 0 ? Math.min(...sampleSizes) : null,
     sampleMax: sampleSizes.length > 0 ? Math.max(...sampleSizes) : null,
+    hasThinPair,
   };
 }
 
@@ -126,6 +132,7 @@ export function buildStatusSummary(
   seriesBySymbol: Map<string, CorrelationSeries>,
   sampleMin: number | null,
   sampleMax: number | null,
+  hasThinPair = false,
 ): string {
   const parts: string[] = [];
   const byStatus = (status: SeriesStatus) => symbols.filter((symbol) => seriesBySymbol.get(symbol)?.status === status);
@@ -144,12 +151,16 @@ export function buildStatusSummary(
     parts.push("No paired dates yet");
   }
 
-  parts.push(`— <${MIN_CORRELATION_OBSERVATIONS} shared`);
+  // Only legend the blank cells when at least one pair actually has too few
+  // shared dates to correlate.
+  if (hasThinPair) parts.push(`- <${MIN_CORRELATION_OBSERVATIONS} shared`);
   return parts.join(" · ");
 }
 
-export function buildCorrelationPaneTitle(symbols: string[], rangePreset: CorrelationRangePreset): string {
-  if (symbols.length === 0) return `Correlation ${rangePreset}`;
-  if (symbols.length <= 3) return `${symbols.join(" · ")} ${rangePreset}`;
-  return `${symbols.slice(0, 2).join(" · ")} +${symbols.length - 2} ${rangePreset}`;
+/**
+ * The matrix already labels every symbol on both axes and the pane now carries
+ * its own range control, so the title stays generic instead of repeating them.
+ */
+export function buildCorrelationPaneTitle(): string {
+  return "Correlation";
 }

package/src/plugins/builtin/correlation/relationship/pane.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Box, Text } from "../../../../ui";
-import { usePaneFooter } from "../../../../components";
+import { Button, usePaneFooter } from "../../../../components";
 import { useShortcut, type KeyEventLike } from "../../../../react/input";
 import { StaticMultiLineChartSurface } from "../../../../components/chart/static/multi-line-chart-surface";
 import { StaticScatterChartSurface } from "../../../../components/chart/static/scatter-chart-surface";
@@ -45,6 +45,10 @@ export {
 
 type RelationshipGraphShortcut = "range" | "window" | "correlation" | "regression";
 
+/**
+ * Keys are the first letter of their hint label: [t]ime range, [p]eriod, [c]orr,
+ * [f]it line. `r` stays reserved for the app-wide refresh.
+ */
 export function resolveRelationshipGraphShortcut(
   event: Pick<KeyEventLike, "name" | "key" | "ctrl" | "shift" | "alt" | "meta" | "super">,
 ): RelationshipGraphShortcut | null {
@@ -57,7 +61,7 @@ export function resolveRelationshipGraphShortcut(
       return "window";
     case "c":
       return "correlation";
-    case "g":
+    case "f":
       return "regression";
     default:
       return null;
@@ -93,19 +97,28 @@ export function RelationshipGraphPane({ focused, width, height }: PaneProps) {
     : "negative";
   const ratioPalette = useMemo(() => resolveChartPalette(colors, ratioTrend), [ratioTrend]);
   const chartWidth = Math.max(20, width - 2);
-  const headerRows = 1;
-  const availableChartRows = Math.max(8, height - headerRows);
-  const showScatter = showRegression && availableChartRows >= 17;
-  const priceHeight = Math.max(5, Math.floor(availableChartRows * (showScatter ? 0.26 : 0.34)));
-  const ratioHeight = Math.max(4, Math.floor(availableChartRows * (showScatter ? 0.22 : 0.33)));
-  const correlationHeight = showCorrelation
-    ? Math.max(4, Math.floor(availableChartRows * (showScatter ? 0.22 : 0.33)))
+  // Panels are allocated in priority order out of the rows that actually exist, so
+  // a short pane drops the lowest-priority chart instead of clipping every axis.
+  const headerRows = 2;
+  const availableChartRows = Math.max(0, height - headerRows);
+  const railWidth = chartWidth >= 68 ? Math.min(34, Math.floor(chartWidth * 0.3)) : 0;
+  const statsBelowRows = railWidth === 0 ? 1 : 0;
+  let remainingRows = availableChartRows;
+  const priceHeight = Math.min(remainingRows, Math.max(5, Math.floor(availableChartRows * 0.28)));
+  remainingRows -= priceHeight;
+  const ratioHeight = remainingRows >= 4
+    ? Math.min(remainingRows, Math.max(4, Math.floor(availableChartRows * 0.24)))
     : 0;
-  const statsRailWidth = showScatter && chartWidth >= 68 ? Math.min(34, Math.floor(chartWidth * 0.3)) : 0;
-  const statsBelowRows = showScatter && statsRailWidth === 0 ? 1 : 0;
-  const scatterHeight = showScatter
-    ? Math.max(5, availableChartRows - priceHeight - ratioHeight - correlationHeight - statsBelowRows)
+  remainingRows -= ratioHeight;
+  const showCorrelationChart = showCorrelation && remainingRows >= 4;
+  const correlationHeight = showCorrelationChart
+    ? Math.min(remainingRows, Math.max(4, Math.floor(availableChartRows * 0.24)))
     : 0;
+  remainingRows -= correlationHeight;
+  // Scatter needs its own two label rows on top of a usable plot.
+  const showScatter = showRegression && remainingRows >= 7 + statsBelowRows;
+  const scatterHeight = showScatter ? remainingRows - statsBelowRows : 0;
+  const statsRailWidth = showScatter ? railWidth : 0;
   const scatterWidth = statsRailWidth > 0 ? Math.max(20, chartWidth - statsRailWidth - 1) : chartWidth;
   const stats = analysis?.stats ?? null;
   const alignedDates = useMemo(() => analysis?.aligned.map((entry) => entry.date) ?? [], [analysis]);
@@ -213,10 +226,10 @@ export function RelationshipGraphPane({ focused, width, height }: PaneProps) {
       ...(error ? [{ id: "error", parts: [{ text: error, tone: "warning" as const }] }] : []),
     ],
     hints: [
-      { id: "range", key: "t", label: "range", onPress: cycleRange },
+      { id: "range", key: "t", label: "ime range", onPress: cycleRange },
       { id: "window", key: "p", label: "eriod", onPress: cycleWindow },
       { id: "correlation", key: "c", label: "orr", onPress: toggleCorrelation },
-      { id: "regression", key: "g", label: "reg", onPress: toggleRegression },
+      { id: "regression", key: "f", label: "it line", onPress: toggleRegression },
     ],
   }), [
     cycleRange,
@@ -256,8 +269,17 @@ export function RelationshipGraphPane({ focused, width, height }: PaneProps) {
     >
       <Box height={1} flexDirection="row" gap={2}>
         <RelationshipToggle checked={showCorrelation} label="Correlation" onPress={toggleCorrelation} />
-        <RelationshipToggle checked={showRegression} label="Regression" onPress={toggleRegression} />
-        <Text fg={colors.textDim}>Range {range}  Window {correlationWindow}d</Text>
+        <RelationshipToggle checked={showRegression} label="Fit line" onPress={toggleRegression} />
+        <Button label={`Range ${range}`} variant="ghost" onPress={cycleRange} />
+        <Button label={`Window ${correlationWindow}d`} variant="ghost" onPress={cycleWindow} />
+      </Box>
+      <Box height={1} flexDirection="row" gap={2}>
+        {priceSeries.map((series) => (
+          <Box key={series.id} flexDirection="row" gap={1}>
+            <Box width={2} height={1} backgroundColor={series.color} />
+            <Text fg={colors.textDim}>{series.label}</Text>
+          </Box>
+        ))}
       </Box>
       <StaticMultiLineChartSurface
         series={priceSeries}
@@ -272,6 +294,7 @@ export function RelationshipGraphPane({ focused, width, height }: PaneProps) {
         formatYAxisValue={(value) => formatNumber(value, 0)}
         onCursorDateChange={selectCursorDate}
       />
+      {ratioHeight > 0 ? (
       <StaticMultiLineChartSurface
         series={ratioSeries}
         width={chartWidth}
@@ -285,7 +308,8 @@ export function RelationshipGraphPane({ focused, width, height }: PaneProps) {
         formatYAxisValue={(value) => formatNumber(value, Math.abs(value) >= 10 ? 1 : 3)}
         onCursorDateChange={selectCursorDate}
       />
-      {showCorrelation ? (
+      ) : null}
+      {showCorrelationChart ? (
         <StaticMultiLineChartSurface
           series={correlationSeries}
           width={chartWidth}
@@ -320,7 +344,7 @@ export function RelationshipGraphPane({ focused, width, height }: PaneProps) {
           ) : null}
         </Box>
       ) : null}
-      {showRegression && (!showScatter || statsRailWidth === 0) ? (
+      {showScatter && statsRailWidth === 0 ? (
         <Text fg={colors.textDim}>
           {metricsRows.map((row) => `${row.label} ${row.value}`).join("  ")}
         </Text>

package/src/plugins/builtin/correlation/settings.ts

@@ -4,7 +4,7 @@ import { formatTickerListInput, MAX_TICKER_LIST_SIZE, parseTickerListInput } fro
 
 export const MAX_CORRELATION_TICKERS = MAX_TICKER_LIST_SIZE;
 const DEFAULT_CORRELATION_RANGE: CorrelationRangePreset = "1Y";
-const CORRELATION_RANGE_OPTIONS = ["1M", "3M", "6M", "1Y", "5Y"] as const;
+export const CORRELATION_RANGE_OPTIONS = ["1M", "3M", "6M", "1Y", "5Y"] as const;
 export const DEFAULT_CORRELATION_SYMBOLS = ["AAPL", "MSFT", "NVDA", "AMD"];
 
 export type CorrelationRangePreset = Extract<TimeRange, typeof CORRELATION_RANGE_OPTIONS[number]>;