gloomberb 0.7.2 → 0.7.3

package/src/plugins/builtin/comparison-chart.test.tsx

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, test } from "bun:test";
-import { act, type ReactElement } from "react";
+import { act, useState, type ReactElement } from "react";
 import { createTestRenderer } from "@opentui/core/testing";
 import { createOpenTuiTestRoot as createRoot } from "../../renderers/opentui/test-utils";
 import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "../../market-data/coordinator";
@@ -301,7 +301,6 @@ describe("comparisonChartPlugin", () => {
     expect(frame).toContain("1:1D");
     expect(frame).toContain("2:1W");
     expect(frame).toContain("1D");
-    expect(frame).toContain("view:");
     expect(frame).toContain("[t]ickers");
     expect(frame).toContain("[m]ode");
     expect(frame).toContain("[r]es");
@@ -312,6 +311,119 @@ describe("comparisonChartPlugin", () => {
     expect(frame).not.toContain("side by side");
   });
 
+  test("updates every legend value from the crosshair position", async () => {
+    const provider = createProvider({
+      AAPL: [100, 102, 104],
+      MSFT: [200, 202, 204],
+    }, {
+      AAPL: "USD",
+      MSFT: "USD",
+    });
+    setSharedMarketDataForTests(provider);
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
+    setSharedRegistryForTests(createRegistrySpy({ selected: [], focused: [] }));
+
+    await mountComparisonHarness({
+      axisMode: "percent",
+      symbols: ["AAPL", "MSFT"],
+      symbolsText: "AAPL, MSFT",
+    }, [
+      makeTicker("AAPL", "USD"),
+      makeTicker("MSFT", "USD"),
+    ], [
+      ["AAPL", makeFinancials("AAPL", "USD", [100, 102, 104])],
+      ["MSFT", makeFinancials("MSFT", "USD", [200, 202, 204])],
+    ]);
+
+    await flushFrames();
+
+    let frame = testSetup!.captureCharFrame();
+    expect(frame).not.toContain("AAPL - 1D");
+    expect(frame).toContain("AAPL $104.00 +4.00%");
+    expect(frame).toContain("MSFT $204.00 +2.00%");
+
+    await act(async () => {
+      await testSetup!.mockMouse.moveTo(2, 4);
+      await testSetup!.renderOnce();
+    });
+    await flushFrames();
+
+    frame = testSetup!.captureCharFrame();
+    expect(frame).toContain("AAPL $100.00 0.00%");
+    expect(frame).toContain("MSFT $200.00 0.00%");
+  });
+
+  test("does not refetch resolution support when only comparison prices update", async () => {
+    let supportCalls = 0;
+    const provider = createProvider({
+      AAPL: [100, 102, 104],
+      MSFT: [200, 202, 204],
+    }, {
+      AAPL: "USD",
+      MSFT: "USD",
+    });
+    provider.getChartResolutionCapabilities = async () => {
+      supportCalls += 1;
+      return ["5m", "15m", "1h", "1d", "1wk", "1mo"];
+    };
+    setSharedMarketDataForTests(provider);
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
+    setSharedRegistryForTests(createRegistrySpy({ selected: [], focused: [] }));
+
+    const settings = {
+      axisMode: "percent",
+      symbols: ["AAPL", "MSFT"],
+      symbolsText: "AAPL, MSFT",
+    };
+    const tickers = [
+      makeTicker("AAPL", "USD"),
+      makeTicker("MSFT", "USD"),
+    ];
+    const spy = { selected: [] as string[], focused: [] as string[] };
+    const runtime = createRuntimeSpy(spy);
+    let updateFinancials: ((rows: Array<[string, TickerFinancials]>) => void) | null = null;
+    function PriceUpdateHarness({ initialFinancials }: { initialFinancials: Array<[string, TickerFinancials]> }) {
+      const [rows, setRows] = useState(initialFinancials);
+      updateFinancials = setRows;
+      return createComparisonHarness(settings, tickers, rows, runtime);
+    }
+
+    actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
+    testSetup = await createTestRenderer({ width: 120, height: 20 });
+    root = createRoot(testSetup.renderer);
+    await act(async () => {
+      root!.render(
+        <PriceUpdateHarness
+          initialFinancials={[
+            ["AAPL", makeFinancials("AAPL", "USD", [100, 102, 104])],
+            ["MSFT", makeFinancials("MSFT", "USD", [200, 202, 204])],
+          ]}
+        />,
+      );
+      await Promise.resolve();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await testSetup!.renderOnce();
+    });
+    await flushFrames();
+
+    expect(supportCalls).toBe(2);
+
+    await act(async () => {
+      updateFinancials!([
+        ["AAPL", makeFinancials("AAPL", "USD", [101, 103, 105])],
+        ["MSFT", makeFinancials("MSFT", "USD", [201, 203, 205])],
+      ]);
+      await Promise.resolve();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await testSetup!.renderOnce();
+    });
+    await flushFrames();
+
+    expect(supportCalls).toBe(2);
+  });
+
   test("keeps controls visible when comparison history is empty", async () => {
     const provider = createProvider({
       AAPL: [],
@@ -346,7 +458,7 @@ describe("comparisonChartPlugin", () => {
     expect(frame).toContain("AUTO");
   });
 
-  test("moves legend selection with the keyboard and opens the selected ticker on Enter", async () => {
+  test("moves legend selection with arrow and h/l keys, then opens the selected ticker on Enter", async () => {
     const spy = { selected: [] as string[], focused: [] as string[] };
     const provider = createProvider({
       AAPL: [100, 102, 104],
@@ -378,6 +490,8 @@ describe("comparisonChartPlugin", () => {
 
     await flushFrames();
     await pressComparisonInput(() => testSetup!.mockInput.pressArrow("right"));
+    await pressComparisonInput(() => testSetup!.mockInput.pressKey("l"));
+    await pressComparisonInput(() => testSetup!.mockInput.pressKey("h"));
     await pressComparisonInput(() => testSetup!.mockInput.pressEnter());
 
     expect(spy.selected).toEqual(["MSFT"]);

package/src/plugins/builtin/correlation/colors.test.ts

@@ -0,0 +1,39 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { applyTheme } from "../../../theme/colors";
+import { contrastRatio } from "../../../theme/color-utils";
+import { DEFAULT_THEME, themes } from "../../../theme/themes";
+import { resolveCorrelationHeatmapCellColors } from "./colors";
+
+const CORRELATION_VALUES = [-1, -0.75, -0.5, -0.25, 0, 0.13, 0.24, 0.39, 0.49, 0.75, 1] as const;
+const CELL_TEXT_MIN_CONTRAST = 4.5;
+const MUTED_TEXT_MIN_CONTRAST = 3.6;
+
+afterEach(() => {
+  applyTheme(DEFAULT_THEME);
+});
+
+describe("correlation heatmap colors", () => {
+  test("keeps populated cells readable in every theme", () => {
+    for (const themeId of Object.keys(themes)) {
+      applyTheme(themeId);
+      for (const correlation of CORRELATION_VALUES) {
+        const cell = resolveCorrelationHeatmapCellColors(correlation);
+        expect(
+          contrastRatio(cell.foreground, cell.background),
+          `${themeId} correlation ${correlation}`,
+        ).toBeGreaterThanOrEqual(CELL_TEXT_MIN_CONTRAST);
+      }
+    }
+  });
+
+  test("keeps empty cells readable in every theme", () => {
+    for (const themeId of Object.keys(themes)) {
+      applyTheme(themeId);
+      const cell = resolveCorrelationHeatmapCellColors(null);
+      expect(
+        contrastRatio(cell.foreground, cell.background),
+        `${themeId} empty cell`,
+      ).toBeGreaterThanOrEqual(MUTED_TEXT_MIN_CONTRAST);
+    }
+  });
+});

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

@@ -0,0 +1,87 @@
+import { colors } from "../../../theme/colors";
+import { blendHex, contrastRatio } from "../../../theme/color-utils";
+
+const HEATMAP_BASE_BLEND = 0.35;
+const HEATMAP_TEXT_MIN_CONTRAST = 4.5;
+const HEATMAP_MUTED_MIN_CONTRAST = 3.6;
+const HEATMAP_TINT_STEPS = [0.56, 0.5, 0.44, 0.38, 0.32, 0.28, 0.24, 0.2, 0.16, 0.12] as const;
+
+export interface CorrelationHeatmapCellColors {
+  background: string;
+  foreground: string;
+}
+
+function highestContrast(candidates: readonly string[], background: string): string {
+  return candidates.reduce((best, candidate) => (
+    contrastRatio(candidate, background) > contrastRatio(best, background) ? candidate : best
+  ));
+}
+
+function textCandidates(): string[] {
+  return [
+    colors.text,
+    colors.textDim,
+    colors.textBright,
+    colors.textMuted,
+    colors.selectedText,
+    colors.headerText,
+    colors.bg,
+    colors.panel,
+    colors.header,
+    colors.commandBg,
+  ];
+}
+
+function heatmapBaseBackground(): string {
+  return blendHex(colors.panel, colors.bg, HEATMAP_BASE_BLEND);
+}
+
+function heatmapSemanticColor(correlation: number): string {
+  const clamped = Math.max(-1, Math.min(1, correlation));
+  return clamped < 0
+    ? blendHex(colors.negative, colors.warning, clamped + 1)
+    : blendHex(colors.warning, colors.positive, clamped);
+}
+
+function heatmapTintSteps(targetStrength: number): number[] {
+  const steps = HEATMAP_TINT_STEPS.filter((step) => step <= targetStrength);
+  return steps[0] === targetStrength ? steps : [targetStrength, ...steps];
+}
+
+function readableForeground(background: string): string {
+  return highestContrast(textCandidates(), background);
+}
+
+export function resolveCorrelationHeatmapCellColors(correlation: number | null): CorrelationHeatmapCellColors {
+  const baseBackground = heatmapBaseBackground();
+
+  if (correlation === null) {
+    const muted = colors.textMuted;
+    return {
+      background: baseBackground,
+      foreground: contrastRatio(muted, baseBackground) >= HEATMAP_MUTED_MIN_CONTRAST
+        ? muted
+        : readableForeground(baseBackground),
+    };
+  }
+
+  const clamped = Math.max(-1, Math.min(1, correlation));
+  const semanticColor = heatmapSemanticColor(clamped);
+  const targetStrength = 0.3 + Math.abs(clamped) * 0.26;
+  let fallback: CorrelationHeatmapCellColors | null = null;
+
+  for (const tintStrength of heatmapTintSteps(targetStrength)) {
+    const background = blendHex(baseBackground, semanticColor, tintStrength);
+    const foreground = readableForeground(background);
+    const cellColors = { background, foreground };
+    fallback = cellColors;
+    if (contrastRatio(foreground, background) >= HEATMAP_TEXT_MIN_CONTRAST) {
+      return cellColors;
+    }
+  }
+
+  return fallback ?? {
+    background: baseBackground,
+    foreground: readableForeground(baseBackground),
+  };
+}

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

@@ -0,0 +1,151 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, type ReactElement } from "react";
+import { Box } from "../../../ui";
+import { testRender } from "../../../renderers/opentui/test-utils";
+import {
+  AppContext,
+  createInitialState,
+  PaneInstanceProvider,
+} from "../../../state/app-context";
+import { cloneLayout, createDefaultConfig } from "../../../types/config";
+import type { TickerRecord } from "../../../types/ticker";
+import { createTestPluginRuntime } from "../../../test-support/plugin-runtime";
+import { PluginRenderProvider, type PluginRuntimeAccess } from "../../plugin-runtime";
+import { correlationPlugin } from ".";
+
+const TEST_PANE_ID = "correlation:test";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+function makeTicker(symbol: string): TickerRecord {
+  return {
+    metadata: {
+      ticker: symbol,
+      exchange: "NASDAQ",
+      currency: "USD",
+      name: symbol,
+      portfolios: [],
+      watchlists: [],
+      positions: [],
+      broker_contracts: [],
+      custom: {},
+      tags: [],
+    },
+  };
+}
+
+function CorrelationHarness({ runtime }: { runtime: PluginRuntimeAccess }) {
+  const layout = {
+    dockRoot: { kind: "pane" as const, instanceId: TEST_PANE_ID },
+    instances: [{
+      instanceId: TEST_PANE_ID,
+      paneId: "correlation",
+      settings: {
+        rangePreset: "1Y",
+        symbols: ["AAPL", "MSFT"],
+        symbolsText: "AAPL, MSFT",
+      },
+    }],
+    floating: [],
+    detached: [],
+  };
+  const config = {
+    ...createDefaultConfig("/tmp/gloomberb-correlation-test"),
+    layout,
+    layouts: [{ name: "Default", layout: cloneLayout(layout) }],
+  };
+  const state = createInitialState(config);
+  state.focusedPaneId = TEST_PANE_ID;
+  state.tickers = new Map([
+    ["AAPL", makeTicker("AAPL")],
+    ["MSFT", makeTicker("MSFT")],
+  ]);
+
+  const CorrelationPane = correlationPlugin.panes?.[0]?.component as (props: {
+    paneId: string;
+    paneType: string;
+    focused: boolean;
+    width: number;
+    height: number;
+  }) => ReactElement;
+
+  return (
+    <AppContext value={{ state, dispatch: () => {} }}>
+      <PaneInstanceProvider paneId={TEST_PANE_ID}>
+        <PluginRenderProvider pluginId="correlation" runtime={runtime}>
+          <Box width={60} height={8}>
+            <CorrelationPane
+              paneId={TEST_PANE_ID}
+              paneType="correlation"
+              focused
+              width={60}
+              height={8}
+            />
+          </Box>
+        </PluginRenderProvider>
+      </PaneInstanceProvider>
+    </AppContext>
+  );
+}
+
+afterEach(async () => {
+  if (testSetup) {
+    await act(async () => {
+      testSetup!.renderer.destroy();
+      await Promise.resolve();
+    });
+  }
+  testSetup = undefined;
+});
+
+describe("correlationPlugin", () => {
+  test("opens tickers from row and column labels", async () => {
+    const opened: Array<{ symbol: string; options: { floating?: boolean; paneType?: string } | undefined }> = [];
+    const runtime = createTestPluginRuntime({
+      pinTicker: (symbol, options) => opened.push({ symbol, options }),
+      navigateTicker: () => {
+        throw new Error("known correlation tickers should open directly");
+      },
+    });
+
+    await act(async () => {
+      testSetup = await testRender(<CorrelationHarness runtime={runtime} />, {
+        width: 60,
+        height: 8,
+      });
+    });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await Promise.resolve();
+      await testSetup!.renderOnce();
+    });
+
+    const lines = testSetup!.captureCharFrame().split("\n");
+    const headerY = lines.findIndex((line) => line.includes("AAPL") && line.includes("MSFT"));
+    const headerCol = lines[headerY]?.indexOf("AAPL") ?? -1;
+    expect(headerY).toBeGreaterThanOrEqual(0);
+    expect(headerCol).toBeGreaterThanOrEqual(0);
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(headerCol + 1, headerY);
+      await Promise.resolve();
+      await testSetup!.renderOnce();
+    });
+
+    const rowY = lines.findIndex((line, index) => index > headerY && line.includes("MSFT"));
+    const rowCol = lines[rowY]?.indexOf("MSFT") ?? -1;
+    expect(rowY).toBeGreaterThanOrEqual(0);
+    expect(rowCol).toBeGreaterThanOrEqual(0);
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(rowCol + 1, rowY);
+      await Promise.resolve();
+      await testSetup!.renderOnce();
+    });
+
+    expect(opened).toEqual([
+      { symbol: "AAPL", options: { floating: true, paneType: "ticker-detail" } },
+      { symbol: "MSFT", options: { floating: true, paneType: "ticker-detail" } },
+    ]);
+  });
+});

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

@@ -1,9 +1,9 @@
 import { Box, ScrollBox, Text } from "../../../ui";
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { TextAttributes } from "../../../ui";
 import { usePaneFooter } from "../../../components";
 import type { GloomPlugin, PaneProps } from "../../../types/plugin";
-import { colors } from "../../../theme/colors";
+import { colors, hoverBg } from "../../../theme/colors";
 import { usePluginTickerActions } from "../../plugin-runtime";
 import { useAppSelector, usePaneInstance } from "../../../state/app-context";
 import { useChartQueries } from "../../../market-data/hooks";
@@ -15,7 +15,6 @@ import {
   computeDatedReturns,
   correlateDatedReturns,
   formatCorrelation,
-  correlationColor,
   type CorrelationResult,
   type DatedReturn,
 } from "./compute";
@@ -26,6 +25,7 @@ import {
   getCorrelationPaneSettings,
   type CorrelationRangePreset,
 } from "./settings";
+import { resolveCorrelationHeatmapCellColors } from "./colors";
 
 const ROW_HEADER_WIDTH = 7;
 const MATRIX_CELL_WIDTH = 10;
@@ -142,10 +142,63 @@ function buildCorrelationPaneTitle(symbols: string[], rangePreset: CorrelationRa
   return `${symbols.slice(0, 2).join(" · ")} +${symbols.length - 2} ${rangePreset}`;
 }
 
+function handleSymbolMouseDown(event: {
+  preventDefault?: () => void;
+  stopPropagation?: () => void;
+}, openSymbol: () => void): void {
+  event.preventDefault?.();
+  event.stopPropagation?.();
+  openSymbol();
+}
+
+function SymbolLabelCell({
+  symbol,
+  width,
+  color,
+  align = "flex-start",
+  hovered,
+  onHover,
+  onLeave,
+  onOpen,
+}: {
+  symbol: string;
+  width: number;
+  color: string;
+  align?: "flex-start" | "flex-end";
+  hovered: boolean;
+  onHover: (symbol: string) => void;
+  onLeave: (symbol: string) => void;
+  onOpen: (symbol: string) => void;
+}) {
+  const openSymbol = useCallback(() => onOpen(symbol), [onOpen, symbol]);
+  return (
+    <Box
+      width={width}
+      flexShrink={0}
+      justifyContent={align}
+      paddingRight={align === "flex-end" ? 1 : undefined}
+      overflow="hidden"
+      backgroundColor={hovered ? hoverBg() : undefined}
+      style={{ cursor: "pointer" }}
+      onMouseMove={() => onHover(symbol)}
+      onMouseOut={() => onLeave(symbol)}
+      onMouseDown={(event: any) => handleSymbolMouseDown(event, openSymbol)}
+    >
+      <Text
+        fg={hovered ? colors.textBright : color}
+        attributes={TextAttributes.BOLD | TextAttributes.UNDERLINE}
+      >
+        {displaySymbol(symbol)}
+      </Text>
+    </Box>
+  );
+}
+
 function CorrelationMatrixPane({ width, height }: PaneProps) {
   const pane = usePaneInstance();
-  const { navigateTicker } = usePluginTickerActions();
+  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 instruments = useMemo(() => {
@@ -234,6 +287,18 @@ function CorrelationMatrixPane({ width, height }: PaneProps) {
     ],
   }), [settings.rangePreset, settings.symbolsError, statusSummary, symbols.length]);
 
+  const openSymbol = useCallback((symbol: string) => {
+    if (tickers.has(symbol)) {
+      pinTicker(symbol, { floating: true, paneType: "ticker-detail" });
+      return;
+    }
+    navigateTicker(symbol);
+  }, [navigateTicker, pinTicker, tickers]);
+
+  const clearHoveredSymbol = useCallback((symbol: string) => {
+    setHoveredSymbol((current) => (current === symbol ? null : current));
+  }, []);
+
   if (settings.symbolsError) {
     return (
       <Box flexDirection="column" width={width} height={height} paddingX={2} paddingY={1}>
@@ -265,11 +330,17 @@ function CorrelationMatrixPane({ width, height }: PaneProps) {
       <Box flexDirection="row" paddingX={1} height={1} backgroundColor={headerBg}>
         <Box width={rowHeaderWidth} flexShrink={0} />
         {symbols.map((sym) => (
-          <Box key={sym} width={cellWidth} justifyContent="flex-end" paddingRight={1} overflow="hidden">
-            <Text fg={colors.textDim} attributes={TextAttributes.BOLD}>
-              {displaySymbol(sym)}
-            </Text>
-          </Box>
+          <SymbolLabelCell
+            key={sym}
+            symbol={sym}
+            width={cellWidth}
+            align="flex-end"
+            color={colors.textDim}
+            hovered={hoveredSymbol === sym}
+            onHover={setHoveredSymbol}
+            onLeave={clearHoveredSymbol}
+            onOpen={openSymbol}
+          />
         ))}
       </Box>
 
@@ -283,14 +354,16 @@ function CorrelationMatrixPane({ width, height }: PaneProps) {
                 width={rowHeaderWidth}
                 flexShrink={0}
                 overflow="hidden"
-                onMouseDown={() => navigateTicker(rowSym)}
               >
-                <Text
-                  fg={rowHeaderColor(seriesBySymbol.get(rowSym)?.status ?? "loading")}
-                  attributes={TextAttributes.BOLD | TextAttributes.UNDERLINE}
-                >
-                  {displaySymbol(rowSym)}
-                </Text>
+                <SymbolLabelCell
+                  symbol={rowSym}
+                  width={rowHeaderWidth}
+                  color={rowHeaderColor(seriesBySymbol.get(rowSym)?.status ?? "loading")}
+                  hovered={hoveredSymbol === rowSym}
+                  onHover={setHoveredSymbol}
+                  onLeave={clearHoveredSymbol}
+                  onOpen={openSymbol}
+                />
               </Box>
               {/* Cells */}
               {symbols.map((colSym) => {
@@ -301,9 +374,7 @@ function CorrelationMatrixPane({ width, height }: PaneProps) {
                 } else {
                   r = matrix.results.get(pairKey(rowSym, colSym))?.correlation ?? null;
                 }
-                const cellColor = isDiag
-                  ? colors.textDim
-                  : correlationColor(r, colors.positive, colors.negative, colors.textMuted);
+                const cellColors = resolveCorrelationHeatmapCellColors(r);
                 const text = isDiag ? " 1.00" : formatCorrelation(r);
                 return (
                   <Box
@@ -311,9 +382,9 @@ function CorrelationMatrixPane({ width, height }: PaneProps) {
                     width={cellWidth}
                     justifyContent="flex-end"
                     paddingRight={1}
-                    backgroundColor={isDiag ? headerBg : undefined}
+                    backgroundColor={cellColors.background}
                   >
-                    <Text fg={cellColor}>{text}</Text>
+                    <Text fg={cellColors.foreground}>{text}</Text>
                   </Box>
                 );
               })}

package/src/plugins/builtin/debug.tsx

@@ -7,6 +7,7 @@ import { usePaneFooter } from "../../components";
 import { usePluginAppActions } from "../plugin-runtime";
 import { colors, hoverBg } from "../../theme/colors";
 import { debugLog, type LogEntry, type LogLevel } from "../../utils/debug-log";
+import { isPlainKey } from "../../utils/keyboard";
 import { wrapTextLines } from "../../utils/text-wrap";
 import { writeFileSync } from "fs";
 import { join } from "path";
@@ -37,7 +38,7 @@ function levelColor(level: LogLevel): string {
   switch (level) {
     case "debug": return colors.textDim;
     case "info": return colors.positive;
-    case "warn": return "#e5c07b";
+    case "warn": return colors.warning;
     case "error": return colors.negative;
   }
 }
@@ -154,12 +155,12 @@ function DebugPane({ focused, width, height }: PaneProps) {
     }
 
     // Navigation
-    if (event.name === "j" || event.name === "down") {
+    if (isPlainKey(event, "j", "down")) {
       setAutoScroll(false);
       setSelectedIdx((prev) => Math.min(prev + 1, entries.length - 1));
       return;
     }
-    if (event.name === "k" || event.name === "up") {
+    if (isPlainKey(event, "k", "up")) {
       setAutoScroll(false);
       setSelectedIdx((prev) => Math.max(prev - 1, 0));
       return;

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

@@ -12,6 +12,7 @@ import { resolveFredMapping } from "./fred-series-map";
 import { resolveChartPalette } from "../../../components/chart/chart-renderer";
 import type { ProjectedChartPoint } from "../../../components/chart/chart-data";
 import { apiClient, type CloudFredObservationPayload, type CloudFredSeriesInfoPayload } from "../../../utils/api-client";
+import { isPlainKey } from "../../../utils/keyboard";
 
 const CACHE_TTL_MS = 15 * 60 * 1000;
 
@@ -202,11 +203,11 @@ function EconDetailView({ event, width, height, focused }: EconDetailViewProps)
 
   useShortcut((ev) => {
     if (!focused) return;
-    if (ev.name === "j" || ev.name === "down") {
+    if (isPlainKey(ev, "j", "down")) {
       ev.stopPropagation?.();
       ev.preventDefault?.();
       scrollDetailBy(1);
-    } else if (ev.name === "k" || ev.name === "up") {
+    } else if (isPlainKey(ev, "k", "up")) {
       ev.stopPropagation?.();
       ev.preventDefault?.();
       scrollDetailBy(-1);

package/src/plugins/builtin/help.test.tsx

@@ -81,7 +81,7 @@ describe("HelpPane", () => {
           paneId: "ticker-detail",
           label: "Quote Monitor",
           description: "Open ticker detail",
-          shortcut: { prefix: "QQ", argPlaceholder: "ticker" },
+          shortcut: { prefix: "QQ", argPlaceholder: "tickers", argKind: "ticker-list" },
         },
       ]]),
       shortcuts: new Map([[
@@ -110,7 +110,7 @@ describe("HelpPane", () => {
     const frame = testSetup!.captureCharFrame();
     expect(frame).toMatch(/AW\s+<ticker>/);
     expect(frame).toMatch(/SA\s+<symbol condition price>/);
-    expect(frame).toMatch(/QQ\s+<ticker>/);
+    expect(frame).toMatch(/QQ\s+<tickers>/);
     expect(frame).toContain("Add Alert (Alerts)");
     expect(frame).toContain("Shift+C");
     expect(frame).toContain("Toggle chat (Gloomberb Cloud)");