gloomberb 0.7.2 → 0.7.3

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

@@ -1,23 +1,38 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { DataTableView, usePaneFooter, type DataTableCell, type DataTableColumn, type DataTableKeyEvent } from "../../../components";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Box } from "../../../ui";
+import { DataTableView, Tabs, usePaneFooter, type DataTableCell, type DataTableColumn, type DataTableKeyEvent } from "../../../components";
 import type { GloomPlugin, PaneProps } from "../../../types/plugin";
+import type { PricePoint } from "../../../types/financials";
 import { colors, priceColor } from "../../../theme/colors";
 import { formatCurrency, formatPercentRaw } from "../../../utils/format";
-import { useAssetData, usePluginPaneState, usePluginTickerActions } from "../../plugin-runtime";
-import { SECTORS, type SectorDef } from "./sector-data";
+import { useAssetData, useDebouncedPluginPaneState, usePluginPaneState, usePluginTickerActions } from "../../plugin-runtime";
+import {
+  SECTOR_COLLECTIONS,
+  getSectorCollection,
+  type SectorCollectionId,
+  type SectorDef,
+} from "./sector-data";
 
 const REFRESH_INTERVAL_MS = 60_000;
+const DAY_MS = 24 * 60 * 60 * 1000;
+const ONE_MONTH_DAYS = 30;
+const ONE_YEAR_DAYS = 365;
+const DEFAULT_COLLECTION_ID: SectorCollectionId = "sectors";
 
 interface SectorRow extends SectorDef {
   price: number | null;
   changePercent: number | null;
+  return1M: number | null;
+  return1Y: number | null;
   currency: string;
   loading: boolean;
 }
 
-type SectorColumnId = "name" | "etf" | "price" | "changePercent" | "bar";
+type SectorColumnId = "name" | "etf" | "price" | "changePercent" | "return1M" | "return1Y" | "bar";
 type SectorColumn = DataTableColumn & { id: SectorColumnId };
 type SortDirection = "asc" | "desc";
+type SectorRowsByCollection = Record<SectorCollectionId, SectorRow[]>;
+type SectorRefreshByCollection = Partial<Record<SectorCollectionId, number>>;
 
 interface SectorSortPreference {
   columnId: SectorColumnId;
@@ -40,22 +55,130 @@ function formatTime(date: Date): string {
   return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 }
 
+function createLoadingRows(sectors: readonly SectorDef[]): SectorRow[] {
+  return sectors.map((sector) => ({
+    ...sector,
+    price: null,
+    changePercent: null,
+    return1M: null,
+    return1Y: null,
+    currency: "USD",
+    loading: true,
+  }));
+}
+
+function createRowsByCollection(): SectorRowsByCollection {
+  return {
+    sectors: createLoadingRows(getSectorCollection("sectors").items),
+    industries: createLoadingRows(getSectorCollection("industries").items),
+  };
+}
+
+const INITIAL_ROWS_BY_COLLECTION = createRowsByCollection();
+const INITIAL_REFRESH_BY_COLLECTION: SectorRefreshByCollection = {};
+
+function normalizeRowsForCollection(
+  rowsByCollection: SectorRowsByCollection,
+  collectionId: SectorCollectionId,
+): SectorRow[] {
+  const collection = getSectorCollection(collectionId);
+  const rows = rowsByCollection[collectionId] ?? [];
+  return collection.items.map((sector) => {
+    const existing = rows.find((row) => row.etf === sector.etf);
+    return {
+      ...sector,
+      price: existing?.price ?? null,
+      changePercent: existing?.changePercent ?? null,
+      return1M: existing?.return1M ?? null,
+      return1Y: existing?.return1Y ?? null,
+      currency: existing?.currency ?? "USD",
+      loading: existing?.loading ?? true,
+    };
+  });
+}
+
+function updateRowsForCollection(
+  rowsByCollection: SectorRowsByCollection,
+  collectionId: SectorCollectionId,
+  updater: (rows: SectorRow[]) => SectorRow[],
+): SectorRowsByCollection {
+  return {
+    ...rowsByCollection,
+    [collectionId]: updater(normalizeRowsForCollection(rowsByCollection, collectionId)),
+  };
+}
+
+function getPricePointTimestamp(point: PricePoint): number {
+  const value = point.date as Date | string | number | null | undefined;
+  if (value instanceof Date) return value.getTime();
+  if (value == null) return Number.NaN;
+  return new Date(value).getTime();
+}
+
+function getSortedHistory(history: readonly PricePoint[]): Array<{ point: PricePoint; timestamp: number }> {
+  return history
+    .map((point) => ({ point, timestamp: getPricePointTimestamp(point) }))
+    .filter(({ point, timestamp }) => (
+      Number.isFinite(timestamp)
+      && Number.isFinite(point.close)
+      && point.close > 0
+    ))
+    .sort((left, right) => left.timestamp - right.timestamp);
+}
+
+function latestHistoryClose(history: readonly PricePoint[]): number | null {
+  return getSortedHistory(history).at(-1)?.point.close ?? null;
+}
+
+export function computeTrailingReturn(
+  history: readonly PricePoint[],
+  days: number,
+  latestPrice?: number | null,
+): number | null {
+  const points = getSortedHistory(history);
+  if (points.length < 2) return null;
+
+  const latest = points.at(-1)!;
+  const endPrice = latestPrice != null && Number.isFinite(latestPrice) && latestPrice > 0
+    ? latestPrice
+    : latest.point.close;
+  const targetTimestamp = latest.timestamp - days * DAY_MS;
+  let baseline = points[0]!;
+  for (const point of points) {
+    if (point.timestamp > targetTimestamp) break;
+    baseline = point;
+  }
+  const baselinePrice = baseline.point.close;
+  if (!Number.isFinite(endPrice) || !Number.isFinite(baselinePrice) || baselinePrice <= 0) return null;
+  return (endPrice / baselinePrice - 1) * 100;
+}
+
 function buildColumns(width: number): SectorColumn[] {
-  const etfWidth = 6;
-  const priceWidth = 11;
-  const changeWidth = 9;
-  const barWidth = Math.max(4, Math.min(24, Math.floor(width * 0.24)));
-  const columnCount = 5;
-  const fixedWidth = etfWidth + priceWidth + changeWidth + barWidth;
-  const nameWidth = Math.max(12, width - 2 - columnCount - fixedWidth);
-
-  return [
+  const etfWidth = 4;
+  const priceWidth = 8;
+  const changeWidth = 8;
+  const returnWidth = 8;
+  const showBar = width >= 67;
+  const compactBar = width < 82;
+  const barWidth = showBar
+    ? compactBar ? 6 : Math.max(8, Math.min(18, Math.floor(width * 0.16)))
+    : 0;
+  const columnCount = showBar ? 7 : 6;
+  const fixedWidth = etfWidth + priceWidth + changeWidth + returnWidth * 2 + barWidth;
+  const nameWidth = Math.max(12, Math.min(22, width - 2 - columnCount - fixedWidth));
+
+  const columns: SectorColumn[] = [
     { id: "name", label: "SECTOR", width: nameWidth, align: "left" },
     { id: "etf", label: "ETF", width: etfWidth, align: "left" },
     { id: "price", label: "LAST", width: priceWidth, align: "right" },
-    { id: "changePercent", label: "CHG%", width: changeWidth, align: "right" },
-    { id: "bar", label: "MOVE", width: barWidth, align: "left" },
+    { id: "changePercent", label: "1D", width: changeWidth, align: "right" },
+    { id: "return1M", label: "1M", width: returnWidth, align: "right" },
+    { id: "return1Y", label: "1Y", width: returnWidth, align: "right" },
   ];
+  if (showBar) {
+    columns.push({ id: "bar", label: "MOVE", width: barWidth, align: "left" });
+  }
+  return columns;
 }
 
 function getSortValue(columnId: SectorColumnId, row: SectorRow): string | number | null {
@@ -67,6 +190,11 @@ function getSortValue(columnId: SectorColumnId, row: SectorRow): string | number
     case "price":
       return row.price;
     case "changePercent":
+      return row.changePercent;
+    case "return1M":
+      return row.return1M;
+    case "return1Y":
+      return row.return1Y;
     case "bar":
       return row.changePercent;
   }
@@ -100,7 +228,12 @@ function nextSortPreference(current: SectorSortPreference, columnId: string): Se
   if (current.columnId !== typedColumnId) {
     return {
       columnId: typedColumnId,
-      direction: typedColumnId === "changePercent" || typedColumnId === "bar" ? "desc" : "asc",
+      direction: typedColumnId === "changePercent"
+        || typedColumnId === "return1M"
+        || typedColumnId === "return1Y"
+        || typedColumnId === "bar"
+        ? "desc"
+        : "asc",
     };
   }
   if (current.direction === "desc") {
@@ -112,20 +245,39 @@ function nextSortPreference(current: SectorSortPreference, columnId: string): Se
 function SectorPerformancePane({ focused, width, height }: PaneProps) {
   const dataProvider = useAssetData();
   const { navigateTicker } = usePluginTickerActions();
-  const [rows, setRows] = useState<SectorRow[]>(
-    SECTORS.map((sector) => ({ ...sector, price: null, changePercent: null, currency: "USD", loading: true })),
+  const [activeCollectionId, setActiveCollectionId] = usePluginPaneState<SectorCollectionId>(
+    "activeCollectionId",
+    DEFAULT_COLLECTION_ID,
+  );
+  const activeCollection = getSectorCollection(activeCollectionId);
+  const [rowsByCollection, setRowsByCollection] = useDebouncedPluginPaneState<SectorRowsByCollection>(
+    "rowsByCollection:v1",
+    INITIAL_ROWS_BY_COLLECTION,
+  );
+  const [lastRefreshByCollection, setLastRefreshByCollection] = useDebouncedPluginPaneState<SectorRefreshByCollection>(
+    "lastRefreshByCollection:v1",
+    INITIAL_REFRESH_BY_COLLECTION,
   );
   const [selectedEtf, setSelectedEtf] = usePluginPaneState<string | null>("selectedEtf", null);
   const [sortPreference, setSortPreference] = usePluginPaneState<SectorSortPreference>(
     "sortPreference",
     DEFAULT_SORT_PREFERENCE,
   );
-  const [lastRefresh, setLastRefresh] = useState<Date | null>(null);
 
   const fetchGenRef = useRef(0);
 
   const columns = useMemo(() => buildColumns(width), [width]);
+  const rows = useMemo(
+    () => normalizeRowsForCollection(rowsByCollection, activeCollection.id),
+    [activeCollection.id, rowsByCollection],
+  );
   const sortedRows = useMemo(() => sortRows(rows, sortPreference), [rows, sortPreference]);
+  const lastRefreshMs = lastRefreshByCollection[activeCollection.id];
+  const lastRefreshText = lastRefreshMs ? formatTime(new Date(lastRefreshMs)) : "loading";
+  const tabs = useMemo(() => SECTOR_COLLECTIONS.map((collection) => ({
+    label: collection.label,
+    value: collection.id,
+  })), []);
   const selectedIdx = selectedEtf
     ? sortedRows.findIndex((row) => row.etf === selectedEtf)
     : -1;
@@ -135,45 +287,66 @@ function SectorPerformancePane({ focused, width, height }: PaneProps) {
     fetchGenRef.current += 1;
     const gen = fetchGenRef.current;
     if (!dataProvider) {
-      setRows((prev) => prev.map((row) => ({ ...row, loading: false })));
+      setRowsByCollection((prev) => updateRowsForCollection(prev, activeCollection.id, (rows) => (
+        rows.map((row) => ({ ...row, loading: false }))
+      )));
       return;
     }
 
-    setRows((prev) => prev.map((row) => ({ ...row, loading: true })));
+    const sectorDefs = activeCollection.items;
+    const collectionId = activeCollection.id;
 
-    const fetches = SECTORS.map(async (sector) => {
+    setRowsByCollection((prev) => updateRowsForCollection(prev, collectionId, (rows) => (
+      rows.map((row) => ({ ...row, loading: true }))
+    )));
+
+    const fetches = sectorDefs.map(async (sector) => {
       try {
-        const quote = await dataProvider.getQuote(sector.etf, "");
+        const [quoteResult, historyResult] = await Promise.allSettled([
+          dataProvider.getQuote(sector.etf, ""),
+          dataProvider.getPriceHistory(sector.etf, "", "1Y"),
+        ]);
         if (fetchGenRef.current !== gen) return;
-        setRows((prev) =>
-          prev.map((row) =>
+        const quote = quoteResult.status === "fulfilled" ? quoteResult.value : null;
+        const history = historyResult.status === "fulfilled" ? historyResult.value : [];
+        const historyClose = latestHistoryClose(history);
+        const price = quote?.price ?? historyClose;
+        const return1M = computeTrailingReturn(history, ONE_MONTH_DAYS, price);
+        const return1Y = computeTrailingReturn(history, ONE_YEAR_DAYS, price);
+        setRowsByCollection((prev) => updateRowsForCollection(prev, collectionId, (rows) => (
+          rows.map((row) =>
             row.etf === sector.etf
               ? {
                   ...row,
-                  price: quote?.price ?? null,
+                  price,
                   changePercent: quote?.changePercent ?? null,
+                  return1M,
+                  return1Y,
                   currency: quote?.currency ?? "USD",
                   loading: false,
                 }
               : row,
-          ),
-        );
+          )
+        )));
       } catch {
         if (fetchGenRef.current !== gen) return;
-        setRows((prev) =>
-          prev.map((row) =>
+        setRowsByCollection((prev) => updateRowsForCollection(prev, collectionId, (rows) => (
+          rows.map((row) =>
             row.etf === sector.etf ? { ...row, loading: false } : row,
-          ),
-        );
+          )
+        )));
       }
     });
 
     Promise.allSettled(fetches).then(() => {
       if (fetchGenRef.current === gen) {
-        setLastRefresh(new Date());
+        setLastRefreshByCollection((prev) => ({
+          ...prev,
+          [collectionId]: Date.now(),
+        }));
       }
     });
-  }, [dataProvider]);
+  }, [activeCollection, dataProvider, setLastRefreshByCollection, setRowsByCollection]);
 
   useEffect(() => {
     fetchAll();
@@ -181,6 +354,11 @@ function SectorPerformancePane({ focused, width, height }: PaneProps) {
     return () => clearInterval(interval);
   }, [fetchAll]);
 
+  useEffect(() => {
+    if (activeCollectionId === activeCollection.id) return;
+    setActiveCollectionId(activeCollection.id);
+  }, [activeCollection.id, activeCollectionId, setActiveCollectionId]);
+
   useEffect(() => {
     if (selectedEtf && sortedRows.some((row) => row.etf === selectedEtf)) return;
     const firstRow = sortedRows[0];
@@ -244,6 +422,16 @@ function SectorPerformancePane({ focused, width, height }: PaneProps) {
           text: row.changePercent !== null ? formatPercentRaw(row.changePercent) : "—",
           color: selectedColor ?? (row.changePercent !== null ? priceColor(row.changePercent) : colors.textDim),
         };
+      case "return1M":
+        return {
+          text: row.loading && row.return1M === null ? "…" : row.return1M !== null ? formatPercentRaw(row.return1M) : "—",
+          color: selectedColor ?? (row.return1M !== null ? priceColor(row.return1M) : colors.textDim),
+        };
+      case "return1Y":
+        return {
+          text: row.loading && row.return1Y === null ? "…" : row.return1Y !== null ? formatPercentRaw(row.return1Y) : "—",
+          color: selectedColor ?? (row.return1Y !== null ? priceColor(row.return1Y) : colors.textDim),
+        };
       case "bar": {
         const bar = row.changePercent !== null ? buildBar(row.changePercent, column.width) : "";
         const barColor = row.changePercent !== null && row.changePercent >= 0 ? colors.positive : colors.negative;
@@ -257,13 +445,34 @@ function SectorPerformancePane({ focused, width, height }: PaneProps) {
 
   usePaneFooter("sectors", () => ({
     info: [
+      {
+        id: "collection",
+        parts: [{ text: activeCollection.label, tone: "label" }],
+      },
       {
         id: "updated",
-        parts: [{ text: lastRefresh ? formatTime(lastRefresh) : "loading", tone: lastRefresh ? "value" : "muted" }],
+        parts: [{ text: lastRefreshText, tone: lastRefreshMs ? "value" : "muted" }],
       },
     ],
     hints: [{ id: "refresh", key: "r", label: "efresh", onPress: fetchAll }],
-  }), [fetchAll, lastRefresh]);
+  }), [activeCollection.label, fetchAll, lastRefreshMs, lastRefreshText]);
+
+  const rootBefore = (
+    <Box height={1} paddingX={1}>
+      <Tabs
+        tabs={tabs}
+        activeValue={activeCollection.id}
+        onSelect={(value) => {
+          const nextId = value as SectorCollectionId;
+          setActiveCollectionId(nextId);
+          setSelectedEtf(null);
+        }}
+        compact
+        variant="bare"
+        focused={focused}
+      />
+    </Box>
+  );
 
   return (
     <DataTableView<SectorRow, SectorColumn>
@@ -272,8 +481,10 @@ function SectorPerformancePane({ focused, width, height }: PaneProps) {
       onSelectIndex={selectIndex}
       onActivateIndex={(_index, row) => openRow(row)}
       onRootKeyDown={handleTableKeyDown}
+      rootBefore={rootBefore}
       rootWidth={width}
       rootHeight={height}
+      resetScrollKey={activeCollection.id}
       columns={columns}
       items={sortedRows}
       sortColumnId={sortPreference.columnId}
@@ -293,7 +504,7 @@ export const sectorsPlugin: GloomPlugin = {
   id: "sectors",
   name: "Sector Performance",
   version: "1.0.0",
-  description: "S&P 500 sector performance via sector ETF proxies",
+  description: "S&P 500 sector and industry performance via ETF proxies",
   toggleable: true,
 
   panes: [
@@ -304,7 +515,7 @@ export const sectorsPlugin: GloomPlugin = {
       component: SectorPerformancePane,
       defaultPosition: "right",
       defaultMode: "floating",
-      defaultFloatingSize: { width: 75, height: 16 },
+      defaultFloatingSize: { width: 82, height: 18 },
     },
   ],
 
@@ -313,8 +524,8 @@ export const sectorsPlugin: GloomPlugin = {
       id: "sectors-pane",
       paneId: "sectors",
       label: "Sector Performance",
-      description: "S&P 500 sector performance sorted by daily change.",
-      keywords: ["sector", "sectors", "etf", "xlk", "xlv", "xlf", "performance", "spdr"],
+      description: "S&P 500 sector and industry performance sorted by daily change.",
+      keywords: ["sector", "sectors", "industry", "semis", "defense", "food", "leisure", "etf", "xlk", "xlv", "xlf", "performance", "spdr"],
       shortcut: { prefix: "BI" },
     },
   ],

package/src/plugins/builtin/sectors/sector-data.ts

@@ -4,7 +4,15 @@ export interface SectorDef {
   etf: string;
 }
 
-export const SECTORS: SectorDef[] = [
+export type SectorCollectionId = "sectors" | "industries";
+
+export interface SectorCollection {
+  id: SectorCollectionId;
+  label: string;
+  items: SectorDef[];
+}
+
+const CORE_SECTORS: SectorDef[] = [
   { name: "Technology",       etf: "XLK" },
   { name: "Healthcare",       etf: "XLV" },
   { name: "Financials",       etf: "XLF" },
@@ -17,3 +25,35 @@ export const SECTORS: SectorDef[] = [
   { name: "Real Estate",      etf: "XLRE" },
   { name: "Materials",        etf: "XLB" },
 ];
+
+const INDUSTRIES: SectorDef[] = [
+  { name: "Semiconductors",   etf: "SMH" },
+  { name: "Software",         etf: "IGV" },
+  { name: "Cybersecurity",    etf: "CIBR" },
+  { name: "Aero/Defense",     etf: "ITA" },
+  { name: "Banks",            etf: "KBE" },
+  { name: "Regional Banks",   etf: "KRE" },
+  { name: "Biotech",          etf: "XBI" },
+  { name: "Pharma",           etf: "PPH" },
+  { name: "Homebuilders",     etf: "XHB" },
+  { name: "Retail",           etf: "XRT" },
+  { name: "Food & Bev.",      etf: "PBJ" },
+  { name: "Leisure",          etf: "PEJ" },
+  { name: "Transportation",   etf: "IYT" },
+  { name: "Metals/Mining",    etf: "XME" },
+  { name: "Oil & Gas E&P",    etf: "XOP" },
+  { name: "Clean Energy",     etf: "ICLN" },
+  { name: "Infrastructure",   etf: "PAVE" },
+  { name: "Gold Miners",      etf: "GDX" },
+];
+
+export const SECTOR_COLLECTIONS: SectorCollection[] = [
+  { id: "sectors", label: "Sectors", items: CORE_SECTORS },
+  { id: "industries", label: "Industries", items: INDUSTRIES },
+];
+
+export const SECTORS = CORE_SECTORS;
+
+export function getSectorCollection(id: SectorCollectionId): SectorCollection {
+  return SECTOR_COLLECTIONS.find((collection) => collection.id === id) ?? SECTOR_COLLECTIONS[0]!;
+}

package/src/plugins/builtin/ticker-detail/chart-tab.tsx

@@ -1,4 +1,4 @@
-import { Box } from "../../../ui";
+import { Box, useUiCapabilities } from "../../../ui";
 import { useViewport } from "../../../react/input";
 import { useCallback, useMemo } from "react";
 import { ChartIndicatorSelector } from "../../../components/chart/chart-indicator-selector";
@@ -39,11 +39,12 @@ export function ChartTab({
   financials: TickerFinancials | null;
 }) {
   const { width: termWidth, height: termHeight } = useViewport();
+  const { fractionalViewport = false } = useUiCapabilities();
   const [rawIndicatorSelection] = usePluginConfigState<unknown>(CHART_INDICATORS_PLUGIN_CONFIG_KEY, null);
   const [indicatorSelectionVersion] = usePluginConfigState<unknown>(CHART_INDICATORS_PLUGIN_CONFIG_VERSION_KEY, null);
   const setPluginConfigStates = useSetPluginConfigStates();
 
-  const chartWidth = Math.max((width || Math.floor(termWidth * 0.55)) - 2, 30);
+  const chartWidth = Math.max((width || Math.floor(termWidth * 0.55)) - (fractionalViewport ? 1 : 2), 30);
   const chartHeight = Math.max(height ?? termHeight - 8, 10);
   const hasStoredIndicatorSelection = Array.isArray(rawIndicatorSelection);
   const selectedIndicatorIds = useMemo(

package/src/plugins/builtin/ticker-detail/index.tsx

@@ -4,9 +4,11 @@ import { TickerDetailPane } from "./pane";
 import { QuoteMonitorPane } from "./quote-monitor";
 import {
   buildQuoteMonitorSettingsDef,
+  buildQuoteMonitorPaneTitle,
   buildTickerDetailSettingsDef,
   getTickerDetailPaneSettings,
 } from "./settings";
+import { formatTickerListInput } from "../../../utils/ticker-list";
 
 export { FinancialsTab } from "./financials-tab";
 export { QuoteMonitorPane } from "./quote-monitor";
@@ -34,7 +36,7 @@ export const tickerDetailPlugin: GloomPlugin = {
       component: QuoteMonitorPane,
       defaultPosition: "right",
       defaultMode: "floating",
-      defaultFloatingSize: { width: 64, height: 8 },
+      defaultFloatingSize: { width: 72, height: 10 },
       settings: buildQuoteMonitorSettingsDef(),
     },
   ],
@@ -59,17 +61,36 @@ export const tickerDetailPlugin: GloomPlugin = {
       id: "quote-monitor-pane",
       paneId: "quote-monitor",
       label: "Quote Monitor",
-      description: "Open a compact quote monitor for the selected ticker",
+      description: "Open a compact quote monitor for one or more tickers",
       keywords: ["quote", "monitor", "price", "ticker", "pane"],
-      shortcut: { prefix: "QQ", argPlaceholder: "ticker", argKind: "ticker" },
-      canCreate: (context, options) => (options?.symbol ?? normalizeTickerInput(context.activeTicker, options?.arg)) !== null,
+      shortcut: { prefix: "QQ", argPlaceholder: "tickers", argKind: "ticker-list" },
+      wizard: [
+        {
+          key: "tickers",
+          label: "Quote Tickers",
+          placeholder: "AAPL, MSFT, NVDA",
+          body: ["Enter one or more ticker symbols separated by commas."],
+          type: "text",
+        },
+      ],
+      canCreate: (context, options) => (
+        (options?.symbols?.length ?? 0) > 0
+        || normalizeTickerInput(context.activeTicker, options?.arg) !== null
+      ),
       createInstance: (context, options) => {
-        const ticker = options?.symbol ?? normalizeTickerInput(context.activeTicker, options?.arg);
-        return ticker
+        const symbols = options?.symbols?.length
+          ? options.symbols
+          : [normalizeTickerInput(context.activeTicker, options?.arg)].filter((symbol): symbol is string => !!symbol);
+        const primarySymbol = symbols[0];
+        return primarySymbol
           ? {
-            title: ticker,
-            binding: { kind: "fixed", symbol: ticker },
-            settings: { symbol: ticker },
+            title: buildQuoteMonitorPaneTitle(symbols),
+            binding: { kind: "fixed", symbol: primarySymbol },
+            settings: {
+              symbol: primarySymbol,
+              symbols,
+              symbolsText: formatTickerListInput(symbols),
+            },
             placement: "floating",
           }
           : null;