gloomberb 0.7.2 → 0.7.3

package/src/components/command-bar/command-bar.test.tsx

@@ -9,7 +9,8 @@ import { cloneLayout, createDefaultConfig, type AppConfig } from "../../types/co
 import type { DataProvider } from "../../types/data-provider";
 import type { TickerRecord } from "../../types/ticker";
 import type { PluginRegistry } from "../../plugins/registry";
-import type { PaneTemplateCreateOptions } from "../../types/plugin";
+import type { PaneSettingField, PaneTemplateCreateOptions } from "../../types/plugin";
+import { useShortcut } from "../../react/input";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 
@@ -169,8 +170,9 @@ function makePluginRegistry(hasPaneSettings: (paneId: string) => boolean = () =>
         id: "quote-monitor-pane",
         paneId: "quote-monitor",
         label: "Quote Monitor",
-        description: "Open a compact quote monitor for the selected ticker",
-        shortcut: { prefix: "QQ", argPlaceholder: "ticker" },
+        description: "Open a compact quote monitor for one or more tickers",
+        shortcut: { prefix: "QQ", argPlaceholder: "tickers", argKind: "ticker-list" },
+        wizard: [{ key: "tickers", label: "Quote Tickers", type: "text" }],
       }],
       ["new-ibkr-trading-pane", {
         id: "new-ibkr-trading-pane",
@@ -232,10 +234,53 @@ function makePluginRegistry(hasPaneSettings: (paneId: string) => boolean = () =>
   } as unknown as PluginRegistry;
 }
 
+function makeQuoteMonitorPaneSettingsDescriptor(
+  pluginRegistry: PluginRegistry,
+  fields: PaneSettingField[],
+  settings: Record<string, unknown> = {},
+) {
+  const config = createDefaultConfig("/tmp/gloomberb-test");
+  const pane = {
+    instanceId: "quote-monitor:main",
+    paneId: "quote-monitor",
+    title: "Quote Monitor",
+    settings,
+  };
+  return {
+    paneId: "quote-monitor:main",
+    pane,
+    paneDef: pluginRegistry.panes.get("quote-monitor")!,
+    settingsDef: {
+      title: "Quote Monitor Settings",
+      fields,
+    },
+    context: {
+      config,
+      layout: cloneLayout(config.layout),
+      paneId: "quote-monitor:main",
+      paneType: "quote-monitor",
+      pane,
+      settings,
+      paneState: {},
+      activeTicker: "AAPL",
+      activeCollectionId: "main",
+    },
+  } as any;
+}
+
 function ThemeProbe() {
   return <text>{`theme:${useThemeId()}`}</text>;
 }
 
+function UnhandledEnterProbe({ onEnter }: { onEnter: () => void }) {
+  useShortcut((event) => {
+    if (event.name === "enter" || event.name === "return") {
+      onEnter();
+    }
+  });
+  return null;
+}
+
 function CommandBarHarness({
   query,
   disabledPlugins = [],
@@ -251,6 +296,7 @@ function CommandBarHarness({
   hasPaneSettings,
   onCheckForUpdates,
   onAction,
+  onUnhandledEnter,
 }: {
   query: string;
   disabledPlugins?: string[];
@@ -266,6 +312,7 @@ function CommandBarHarness({
   hasPaneSettings?: (paneId: string) => boolean;
   onCheckForUpdates?: () => void | Promise<void>;
   onAction?: (action: AppAction) => void;
+  onUnhandledEnter?: () => void;
 }) {
   let config = {
     ...createDefaultConfig("/tmp/gloomberb-test"),
@@ -330,6 +377,7 @@ function CommandBarHarness({
               onCheckForUpdates={onCheckForUpdates}
             />
           )}
+          {onUnhandledEnter && <UnhandledEnterProbe onEnter={onUnhandledEnter} />}
         </TestDialogProvider>
       </AppContext>
     </ThemeProvider>
@@ -966,7 +1014,7 @@ describe("CommandBar", () => {
     expect(frame).not.toContain("Back");
   });
 
-  test("QQ without an active ticker opens inline ticker search on enter", async () => {
+  test("QQ without an active ticker opens inline ticker-list entry on enter", async () => {
     testSetup = await testRender(<CommandBarHarness query="QQ" />, {
       width: 100,
       height: 20,
@@ -981,6 +1029,25 @@ describe("CommandBar", () => {
       await testSetup!.renderOnce();
     });
 
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Back");
+    expect(frame).toContain("Quote Tickers");
+  });
+
+  test("T without an active ticker opens ticker search on enter", async () => {
+    testSetup = await testRender(<CommandBarHarness query="T" />, {
+      width: 100,
+      height: 20,
+    });
+
+    await testSetup.renderOnce();
+    expect(testSetup.captureCharFrame()).toContain("Description");
+
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await testSetup!.renderOnce();
+    });
+
     const frame = testSetup.captureCharFrame();
     expect(frame).toContain("Back");
     expect(frame).toContain("Security Description");
@@ -1036,12 +1103,43 @@ describe("CommandBar", () => {
       templateId: "quote-monitor-pane",
       options: {
         arg: "AAPL",
-        symbol: "AAPL",
-        ticker: makeTicker("AAPL", "Apple Inc."),
+        symbols: ["AAPL"],
       },
     }]);
   });
 
+  test("consumes enter before focused pane shortcuts when executing a pane shortcut", async () => {
+    const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
+    let leakedEnterCount = 0;
+
+    testSetup = await testRender(<CommandBarHarness
+      query="PF"
+      live
+      onUnhandledEnter={() => {
+        leakedEnterCount += 1;
+      }}
+      configurePluginRegistry={(pluginRegistry) => {
+        pluginRegistry.createPaneFromTemplateAsyncFn = async (templateId, options) => {
+          created.push({ templateId, options });
+        };
+      }}
+    />, {
+      width: 100,
+      height: 20,
+    });
+
+    await testSetup.renderOnce();
+
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await Bun.sleep(0);
+      await testSetup!.renderOnce();
+    });
+
+    expect(created).toEqual([{ templateId: "new-portfolio-pane", options: undefined }]);
+    expect(leakedEnterCount).toBe(0);
+  });
+
   test("typing a chat channel shortcut opens that channel directly", async () => {
     const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
 
@@ -1134,6 +1232,121 @@ describe("CommandBar", () => {
     expect(frame).toContain("AAOI");
   });
 
+  test("keeps exact T ticker matches above noisy provider matches", async () => {
+    testSetup = await testRender(
+      <CommandBarHarness
+        query="T AMD"
+        extraTickers={[
+          makeTicker("AMDL", "GraniteShares 2x Long AMD Daily"),
+          makeTicker("AMUU", "Direxion Daily AMD Bull 2X ETF"),
+        ]}
+        dataProvider={makeDataProvider(async () => [
+          { providerId: "yahoo", symbol: "DES", name: "AMD-themed synthetic listing", exchange: "ASX", type: "EQUITY" },
+          { providerId: "yahoo", symbol: "DES2", name: "AMD-themed secondary listing", exchange: "LSE", type: "EQUITY" },
+          { providerId: "yahoo", symbol: "AMD", name: "Advanced Micro Devices", exchange: "NASDAQ", type: "EQUITY" },
+        ])}
+      />,
+      { width: 100, height: 24 },
+    );
+
+    await testSetup.renderOnce();
+    const frame = await waitForFrameToContain("DES2");
+    const resultLines = frame
+      .split("\n")
+      .filter((line) => /\b(AMD|DES2?|DES)\b/.test(line) && /\b(NASDAQ|ASX|LSE)\b/.test(line));
+
+    expect(resultLines[0]).toContain("AMD");
+    expect(resultLines[0]).toContain("NASDAQ");
+  });
+
+  test("loads exact provider matches for plain ticker-shaped root queries", async () => {
+    testSetup = await testRender(
+      <CommandBarHarness
+        query="amd"
+        extraTickers={[
+          makeTicker("AMDL", "GraniteShares 2x Long AMD Daily"),
+          makeTicker("AMUU", "Direxion Daily AMD Bull 2X ETF"),
+        ]}
+        dataProvider={makeDataProvider(async () => [
+          { providerId: "yahoo", symbol: "DES", name: "AMD-themed synthetic listing", exchange: "ASX", type: "EQUITY" },
+          { providerId: "yahoo", symbol: "AMD", name: "Advanced Micro Devices", exchange: "NASDAQ", type: "EQUITY" },
+        ])}
+      />,
+      { width: 100, height: 24 },
+    );
+
+    await testSetup.renderOnce();
+    const frame = await waitForFrameToContain("DES");
+    const resultLines = frame
+      .split("\n")
+      .filter((line) => /\b(AMD|AMDL|AMUU|DES)\b/.test(line) && /\b(NASDAQ|ASX)\b/.test(line));
+
+    expect(resultLines[0]).toContain("AMD");
+    expect(resultLines[0]).toContain("NASDAQ");
+  });
+
+  test("keeps pane matches visible alongside plain ticker provider results", async () => {
+    testSetup = await testRender(
+      <CommandBarHarness
+        query="opti"
+        dataProvider={makeDataProvider(async () => [
+          { providerId: "yahoo", symbol: "OPTI", name: "Optimi Health Corp", exchange: "CSE", type: "EQUITY" },
+          { providerId: "yahoo", symbol: "OPTI", name: "Optimi Health Corp", exchange: "NEO", type: "EQUITY" },
+          { providerId: "yahoo", symbol: "OPTI", name: "Optimi Health Corp", exchange: "LSE", type: "EQUITY" },
+        ])}
+        configurePluginRegistry={(pluginRegistry) => {
+          const paneTemplates = pluginRegistry.paneTemplates as Map<string, any>;
+          paneTemplates.set("options-pane", {
+            id: "options-pane",
+            paneId: "options",
+            label: "Options",
+            description: "Options chain for the selected ticker",
+            shortcut: { prefix: "OMON", argPlaceholder: "ticker", argKind: "ticker" },
+            canCreate: (context: any, options?: PaneTemplateCreateOptions) => (
+              context.activeTicker !== null || !!options?.arg
+            ),
+          });
+        }}
+      />,
+      { width: 100, height: 24 },
+    );
+
+    await testSetup.renderOnce();
+    const frame = await waitForFrameToContain("OPTI");
+    expect(frame).toContain("Options");
+    expect(frame).toContain("OMON");
+  });
+
+  test("clears stale provider rows after a plain ticker root search is cleared", async () => {
+    testSetup = await testRender(
+      <CommandBarHarness
+        query=""
+        live
+        dataProvider={makeDataProvider(async () => [
+          { providerId: "yahoo", symbol: "OPTI", name: "Optimi Health Corp", exchange: "CSE", type: "EQUITY" },
+          { providerId: "yahoo", symbol: "OPTI", name: "Optimi Health Corp", exchange: "NEO", type: "EQUITY" },
+          { providerId: "yahoo", symbol: "OPTI", name: "Optimi Health Corp", exchange: "LSE", type: "EQUITY" },
+        ])}
+      />,
+      { width: 100, height: 24 },
+    );
+
+    await testSetup.renderOnce();
+    await act(async () => {
+      await testSetup!.mockInput.typeText("opti");
+      await testSetup!.renderOnce();
+    });
+
+    await waitForFrameToContain("OPTI");
+    await emitKeypress(testSetup, { name: "u", ctrl: true });
+    await renderFrames(2);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Search");
+    expect(frame).toContain("Tickers");
+    expect(frame).not.toContain("OPTI");
+  });
+
   test("DES MSFT opens an exact ticker directly", async () => {
     const pinned: string[] = [];
 
@@ -1160,6 +1373,33 @@ describe("CommandBar", () => {
     expect(pinned).toEqual(["MSFT"]);
   });
 
+  test("T AMD opens an exact ticker directly", async () => {
+    const pinned: string[] = [];
+
+    testSetup = await testRender(
+      <CommandBarHarness
+        query="T AMD"
+        extraTickers={[makeTicker("AMD", "Advanced Micro Devices")]}
+        configurePluginRegistry={(pluginRegistry) => {
+          pluginRegistry.pinTicker = (symbol) => {
+            pinned.push(symbol);
+          };
+        }}
+      />,
+      { width: 100, height: 20 },
+    );
+
+    await testSetup.renderOnce();
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await Bun.sleep(0);
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(pinned).toEqual(["AMD"]);
+  });
+
   test("AW AAPL uses the active watchlist target by default", async () => {
     const saved: TickerRecord[] = [];
 
@@ -1897,6 +2137,32 @@ describe("CommandBar", () => {
     expect(frame).toContain("Current Layout");
   });
 
+  test("runs layout actions directly from root search", async () => {
+    const actions: AppAction[] = [];
+
+    testSetup = await testRender(<CommandBarHarness
+      query="undo layout change"
+      live
+      configureConfig={layoutModeConfig}
+      configureState={layoutModeState}
+      onAction={(action) => actions.push(action)}
+    />, {
+      width: 90,
+      height: 24,
+    });
+
+    await testSetup.renderOnce();
+
+    expect(testSetup.captureCharFrame()).toContain("Undo Layout Change");
+
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await testSetup!.renderOnce();
+    });
+
+    expect(actions.some((action) => action.type === "UNDO_LAYOUT")).toBe(true);
+  });
+
   test("renders filtered saved layouts with textual previews", async () => {
     testSetup = await testRender(<CommandBarHarness
       query="LAY Research"
@@ -2028,6 +2294,66 @@ describe("CommandBar", () => {
     expect(created).toEqual([{ templateId: "news-top-pane", options: undefined }]);
   });
 
+  test("surfaces ticker-required pane templates by name without an active ticker", async () => {
+    testSetup = await testRender(<CommandBarHarness
+      query="Options"
+      extraTickers={[makeTicker("^RUT", "Chicago Board Options Exchange Russell 2000")]}
+      configurePluginRegistry={(pluginRegistry) => {
+        const paneTemplates = pluginRegistry.paneTemplates as Map<string, any>;
+        paneTemplates.set("options-pane", {
+          id: "options-pane",
+          paneId: "options",
+          label: "Options",
+          description: "Options chain for the selected ticker",
+          keywords: ["options", "chain", "calls", "puts"],
+          shortcut: { prefix: "OMON", argPlaceholder: "ticker", argKind: "ticker" },
+          canCreate: (context: any, options?: PaneTemplateCreateOptions) => (
+            context.activeTicker !== null || !!options?.arg
+          ),
+        });
+      }}
+    />, {
+      width: 100,
+      height: 18,
+    });
+
+    await testSetup.renderOnce();
+
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Options");
+    expect(frame).toContain("OMON");
+
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await testSetup!.renderOnce();
+    });
+
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Back");
+    expect(frame).toContain("Ticker");
+  });
+
+  test("ranks exact ticker symbols before longer ticker prefixes in root search", async () => {
+    testSetup = await testRender(<CommandBarHarness
+      query="amd"
+      extraTickers={[
+        makeTicker("AMDL", "GraniteShares 2x Long AMD Daily ETF"),
+        makeTicker("AMD", "Advanced Micro Devices"),
+      ]}
+    />, {
+      width: 100,
+      height: 18,
+    });
+
+    await testSetup.renderOnce();
+
+    const tickerLines = testSetup.captureCharFrame()
+      .split("\n")
+      .filter((line) => /\bAMD\b|\bAMDL\b/.test(line));
+    expect(tickerLines[0]).toMatch(/\bAMD\b/);
+    expect(tickerLines[0]).not.toMatch(/\bAMDL\b/);
+  });
+
   test("opens plugin command wizards inline inside the command bar", async () => {
     let submittedValues: Record<string, string> | undefined;
 
@@ -2199,8 +2525,39 @@ describe("CommandBar", () => {
       templateId: "quote-monitor-pane",
       options: {
         arg: "MSFT",
-        symbol: "MSFT",
-        ticker: makeTicker("MSFT", "Microsoft Corp."),
+        symbols: ["MSFT"],
+      },
+    }]);
+  });
+
+  test("QQ AAPL,MSFT creates a multi-symbol quote monitor directly", async () => {
+    const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
+
+    testSetup = await testRender(<CommandBarHarness
+      query="QQ AAPL,MSFT"
+      selectedTicker="AAPL"
+      configurePluginRegistry={(pluginRegistry) => {
+        pluginRegistry.createPaneFromTemplateAsyncFn = async (templateId, options) => {
+          created.push({ templateId, options });
+        };
+      }}
+    />, {
+      width: 100,
+      height: 20,
+    });
+
+    await testSetup.renderOnce();
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await Bun.sleep(0);
+      await testSetup!.renderOnce();
+    });
+
+    expect(created).toEqual([{
+      templateId: "quote-monitor-pane",
+      options: {
+        arg: "AAPL,MSFT",
+        symbols: ["AAPL", "MSFT"],
       },
     }]);
   });
@@ -2469,41 +2826,12 @@ describe("CommandBar", () => {
       })}
       hasPaneSettings={(paneId) => paneId === "quote-monitor:main"}
       configurePluginRegistry={(pluginRegistry) => {
-        pluginRegistry.resolvePaneSettings = () => ({
-          paneId: "quote-monitor:main",
-          pane: {
-            instanceId: "quote-monitor:main",
-            paneId: "quote-monitor",
-            title: "Quote Monitor",
-            settings: {},
-          },
-          paneDef: pluginRegistry.panes.get("quote-monitor")!,
-          settingsDef: {
-            title: "Quote Monitor Settings",
-            fields: [{
-              key: "symbol",
-              label: "Symbol",
-              type: "text",
-              description: "Ticker symbol to track",
-            }],
-          },
-          context: {
-            config: createDefaultConfig("/tmp/gloomberb-test"),
-            layout: cloneLayout(createDefaultConfig("/tmp/gloomberb-test").layout),
-            paneId: "quote-monitor:main",
-            paneType: "quote-monitor",
-            pane: {
-              instanceId: "quote-monitor:main",
-              paneId: "quote-monitor",
-              title: "Quote Monitor",
-              settings: {},
-            },
-            settings: {},
-            paneState: {},
-            activeTicker: "AAPL",
-            activeCollectionId: "main",
-          },
-        }) as any;
+        pluginRegistry.resolvePaneSettings = () => makeQuoteMonitorPaneSettingsDescriptor(pluginRegistry, [{
+          key: "symbol",
+          label: "Symbol",
+          type: "text",
+          description: "Ticker symbol to track",
+        }]);
         pluginRegistry.applyPaneSettingValueFn = async (paneId, field, value) => {
           appliedValues.push({ paneId, key: field.key, value });
         };
@@ -2550,6 +2878,64 @@ describe("CommandBar", () => {
     }]);
   });
 
+  test("opens focused pane settings directly from root search", async () => {
+    const appliedValues: Array<{ paneId: string; key: string; value: unknown }> = [];
+
+    testSetup = await testRender(<CommandBarHarness
+      query="ticker symbol"
+      configureState={(state) => ({
+        ...state,
+        focusedPaneId: "quote-monitor:main",
+      })}
+      hasPaneSettings={(paneId) => paneId === "quote-monitor:main"}
+      configurePluginRegistry={(pluginRegistry) => {
+        pluginRegistry.resolvePaneSettings = () => makeQuoteMonitorPaneSettingsDescriptor(pluginRegistry, [{
+          key: "symbol",
+          label: "Symbol",
+          type: "text",
+          description: "Ticker symbol to track",
+        }]);
+        pluginRegistry.applyPaneSettingValueFn = async (paneId, field, value) => {
+          appliedValues.push({ paneId, key: field.key, value });
+        };
+      }}
+    />, {
+      width: 100,
+      height: 20,
+    });
+
+    await testSetup.renderOnce();
+
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Quote Monitor Settings");
+    expect(frame).toContain("Symbol");
+
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await testSetup!.renderOnce();
+    });
+
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Apply");
+    expect(frame).toContain("Symbol");
+
+    await act(async () => {
+      await testSetup!.mockInput.typeText("MSFT");
+      await testSetup!.renderOnce();
+    });
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await Bun.sleep(0);
+      await testSetup!.renderOnce();
+    });
+
+    expect(appliedValues).toEqual([{
+      paneId: "quote-monitor:main",
+      key: "symbol",
+      value: "MSFT",
+    }]);
+  });
+
   test("uses backspace as back only when a pane-settings route query is empty", async () => {
     testSetup = await testRender(<CommandBarHarness
       query="PS"
@@ -2559,41 +2945,12 @@ describe("CommandBar", () => {
       })}
       hasPaneSettings={(paneId) => paneId === "quote-monitor:main"}
       configurePluginRegistry={(pluginRegistry) => {
-        pluginRegistry.resolvePaneSettings = () => ({
-          paneId: "quote-monitor:main",
-          pane: {
-            instanceId: "quote-monitor:main",
-            paneId: "quote-monitor",
-            title: "Quote Monitor",
-            settings: {},
-          },
-          paneDef: pluginRegistry.panes.get("quote-monitor")!,
-          settingsDef: {
-            title: "Quote Monitor Settings",
-            fields: [{
-              key: "symbol",
-              label: "Symbol",
-              type: "text",
-              description: "Ticker symbol to track",
-            }],
-          },
-          context: {
-            config: createDefaultConfig("/tmp/gloomberb-test"),
-            layout: cloneLayout(createDefaultConfig("/tmp/gloomberb-test").layout),
-            paneId: "quote-monitor:main",
-            paneType: "quote-monitor",
-            pane: {
-              instanceId: "quote-monitor:main",
-              paneId: "quote-monitor",
-              title: "Quote Monitor",
-              settings: {},
-            },
-            settings: {},
-            paneState: {},
-            activeTicker: "AAPL",
-            activeCollectionId: "main",
-          },
-        }) as any;
+        pluginRegistry.resolvePaneSettings = () => makeQuoteMonitorPaneSettingsDescriptor(pluginRegistry, [{
+          key: "symbol",
+          label: "Symbol",
+          type: "text",
+          description: "Ticker symbol to track",
+        }]);
       }}
     />, {
       width: 100,
@@ -2649,48 +3006,17 @@ describe("CommandBar", () => {
       })}
       hasPaneSettings={(paneId) => paneId === "quote-monitor:main"}
       configurePluginRegistry={(pluginRegistry) => {
-        pluginRegistry.resolvePaneSettings = () => ({
-          paneId: "quote-monitor:main",
-          pane: {
-            instanceId: "quote-monitor:main",
-            paneId: "quote-monitor",
-            title: "Quote Monitor",
-            settings: {},
-          },
-          paneDef: pluginRegistry.panes.get("quote-monitor")!,
-          settingsDef: {
-            title: "Quote Monitor Settings",
-            fields: [{
-              key: "columns",
-              label: "Columns",
-              type: "ordered-multi-select",
-              description: "Visible columns",
-              options: [
-                { value: "volume", label: "AAA", description: "Volume column" },
-                { value: "spread", label: "BBB", description: "Spread column" },
-                { value: "beta", label: "CCC", description: "Beta column" },
-              ],
-            }],
-          },
-          context: {
-            config: createDefaultConfig("/tmp/gloomberb-test"),
-            layout: cloneLayout(createDefaultConfig("/tmp/gloomberb-test").layout),
-            paneId: "quote-monitor:main",
-            paneType: "quote-monitor",
-            pane: {
-              instanceId: "quote-monitor:main",
-              paneId: "quote-monitor",
-              title: "Quote Monitor",
-              settings: {},
-            },
-            settings: {
-              columns: ["volume", "spread"],
-            },
-            paneState: {},
-            activeTicker: "AAPL",
-            activeCollectionId: "main",
-          },
-        }) as any;
+        pluginRegistry.resolvePaneSettings = () => makeQuoteMonitorPaneSettingsDescriptor(pluginRegistry, [{
+          key: "columns",
+          label: "Columns",
+          type: "ordered-multi-select",
+          description: "Visible columns",
+          options: [
+            { value: "volume", label: "AAA", description: "Volume column" },
+            { value: "spread", label: "BBB", description: "Spread column" },
+            { value: "beta", label: "CCC", description: "Beta column" },
+          ],
+        }], { columns: ["volume", "spread"] });
       }}
     />, {
       width: 100,