gloomberb 0.7.2 → 0.7.3

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

@@ -1,4 +1,4 @@
-import { Box, ScrollBox, Text } from "../../../ui";
+import { Box, ScrollBox, Text, useUiCapabilities } from "../../../ui";
 import { TextAttributes } from "../../../ui";
 import { useViewport } from "../../../react/input";
 import { useFxRatesMap } from "../../../market-data/hooks";
@@ -32,7 +32,6 @@ const STAT_COLUMN_GAP = 2;
 const STAT_LABEL_WIDTH = 12;
 const BOOK_LABEL_WIDTH = 4;
 const RANGE_ENDPOINT_WIDTH = 11;
-const RANGE_MAX_WIDTH = 42;
 const POSITION_COLUMN_GAP = 1;
 
 function CompactRangeBar({
@@ -71,21 +70,23 @@ function CompactRangeBar({
   return (
     <Box flexDirection="column" width={width} flexShrink={0}>
       <Box flexDirection="row" height={1}>
-        <Text fg={colors.textDim}>{padTo(label, labelWidth)}</Text>
+        <Box width={labelWidth} overflow="hidden">
+          <Text fg={colors.textDim}>{label}</Text>
+        </Box>
         <Text fg={markerColor}>{pctLabel}</Text>
       </Box>
       <Box flexDirection="row" height={1}>
-        <Text fg={colors.textDim}>
-          {padTo(lowText, endpointWidth)}
-        </Text>
+        <Box width={endpointWidth} overflow="hidden">
+          <Text fg={colors.textDim}>{lowText}</Text>
+        </Box>
         <Box marginLeft={1} marginRight={1} width={barWidth} flexDirection="row">
           <Text fg={colors.border}>{"─".repeat(markerIndex)}</Text>
           <Text fg={markerColor}>{"●"}</Text>
           <Text fg={colors.border}>{"─".repeat(Math.max(0, barWidth - markerIndex - 1))}</Text>
         </Box>
-        <Text fg={colors.textDim}>
-          {padTo(highText, endpointWidth, "right")}
-        </Text>
+        <Box flexDirection="row" width={endpointWidth} justifyContent="flex-end" overflow="hidden">
+          <Text fg={colors.textDim}>{highText}</Text>
+        </Box>
       </Box>
     </Box>
   );
@@ -164,7 +165,10 @@ interface PositionColumn {
 
 function StatGrid({ fields, width }: { fields: StatField[]; width: number }) {
   const columnCount = width >= 58 ? 2 : 1;
-  const colWidth = Math.floor((width - STAT_COLUMN_GAP * (columnCount - 1)) / columnCount);
+  const availableWidth = width - STAT_COLUMN_GAP * (columnCount - 1);
+  const baseColWidth = Math.floor(availableWidth / columnCount);
+  const extraWidth = availableWidth - baseColWidth * columnCount;
+  const colWidths = Array.from({ length: columnCount }, (_, index) => baseColWidth + (index === columnCount - 1 ? extraWidth : 0));
   const rows: Array<Array<StatField | null>> = [];
   for (let i = 0; i < fields.length; i += columnCount) {
     rows.push(Array.from({ length: columnCount }, (_, offset) => fields[i + offset] ?? null));
@@ -175,6 +179,7 @@ function StatGrid({ fields, width }: { fields: StatField[]; width: number }) {
       {rows.map((row, i) => (
         <Box key={i} flexDirection="row" height={1}>
           {row.map((field, j) => {
+            const colWidth = colWidths[j] ?? baseColWidth;
             if (!field) {
               return (
                 <Box key={j} flexDirection="row">
@@ -189,8 +194,12 @@ function StatGrid({ fields, width }: { fields: StatField[]; width: number }) {
               <Box key={j} flexDirection="row">
                 {j > 0 && <Box width={STAT_COLUMN_GAP} />}
                 <Box width={colWidth} flexDirection="row">
-                  <Text fg={colors.textDim}>{padTo(field.label, labelWidth)}</Text>
-                  <Text fg={field.valueColor ?? colors.text}>{padTo(field.value, valueWidth, "right")}</Text>
+                  <Box width={labelWidth} overflow="hidden">
+                    <Text fg={colors.textDim}>{field.label}</Text>
+                  </Box>
+                  <Box flexDirection="row" width={valueWidth} justifyContent="flex-end" overflow="hidden">
+                    <Text fg={field.valueColor ?? colors.text}>{field.value}</Text>
+                  </Box>
                 </Box>
               </Box>
             );
@@ -300,6 +309,7 @@ export function OverviewTab({
   const baseCurrency = useAppSelector((state) => state.config.baseCurrency);
   const exchangeRatesState = useAppSelector((state) => state.exchangeRates);
   const { width: termWidth } = useViewport();
+  const { fractionalViewport = false } = useUiCapabilities();
 
   if (!ticker) return <EmptyState title="No ticker selected." />;
 
@@ -336,7 +346,7 @@ export function OverviewTab({
     routingVenue && routingVenue !== listingVenue ? `route ${routingVenue}` : "",
   ].filter((part) => part.length > 0);
 
-  const contentWidth = Math.max((width || Math.floor(termWidth * 0.5)) - 4, 20);
+  const contentWidth = Math.max((width || Math.floor(termWidth * 0.5)) - (fractionalViewport ? 2 : 4), 20);
   const chartWidth = contentWidth;
   const hasHistory = (financials?.priceHistory?.length ?? 0) > 2;
   const hasBidAsk = quote?.bid != null || quote?.ask != null;
@@ -347,8 +357,8 @@ export function OverviewTab({
   const hasYearRange = quote?.low52w != null && quote?.high52w != null && quote.high52w > quote.low52w;
   const rangeInline = contentWidth >= 70 && hasDayRange && hasYearRange;
   const rangeWidth = rangeInline
-    ? Math.min(RANGE_MAX_WIDTH, Math.floor((contentWidth - 2) / 2))
-    : Math.min(RANGE_MAX_WIDTH, contentWidth);
+    ? Math.floor((contentWidth - 2) / 2)
+    : contentWidth;
   const rangeMarkerColor = quote ? priceColor(quote.change) : colors.textDim;
 
   const stats: StatField[] = [];

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

@@ -154,12 +154,6 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
     });
   }, [resolvedTabId, visibleTabIds]);
 
-  useEffect(() => {
-    if (resolvedTabId !== activeTabId) {
-      setActiveTabId(resolvedTabId);
-    }
-  }, [activeTabId, resolvedTabId, setActiveTabId]);
-
   const handleKeyboard = useCallback((event: { name?: string }) => {
     const currentState = stateRef.current;
     if (!currentState.focused || currentState.pluginCaptured) return;

package/src/plugins/builtin/ticker-detail/quote-monitor.tsx

@@ -1,97 +1,476 @@
-import { Box, Text } from "../../../ui";
+import { useCallback, useMemo } from "react";
+import { Box, Text, useUiCapabilities } from "../../../ui";
 import { TextAttributes } from "../../../ui";
 import type { PaneProps } from "../../../types/plugin";
 import type { Quote } from "../../../types/financials";
+import type { TickerFinancials } from "../../../types/financials";
+import type { TickerRecord } from "../../../types/ticker";
+import type { QuoteSubscriptionTarget } from "../../../types/data-provider";
 import { quoteSubscriptionTargetFromTicker } from "../../../market-data/request-types";
-import { usePaneTicker } from "../../../state/app-context";
+import { useTickerFinancials } from "../../../market-data/hooks";
+import { useAppSelector, usePaneInstance, usePaneTicker } from "../../../state/app-context";
 import { useQuoteStreaming } from "../../../state/use-quote-streaming";
+import { usePluginAppActions, usePluginTickerActions } from "../../plugin-runtime";
+import { useDoubleClickActivation } from "../../../components/use-double-click-activation";
 import { colors, priceColor } from "../../../theme/colors";
 import { formatPercentRaw } from "../../../utils/format";
 import { formatMarketPriceWithCurrency, formatSignedMarketPrice } from "../../../utils/market-format";
 import { getActiveQuoteDisplay } from "../../../utils/market-status";
-import { EmptyState, usePaneFooter } from "../../../components";
+import { EmptyState } from "../../../components";
+import {
+  PriceAreaSparklineBackground,
+  PriceSparkline,
+  resolvePriceSparklineRange,
+  type PriceSparklinePeriod,
+  type PriceSparklineTrend,
+} from "../../../components/price-sparkline-view";
+import { getQuoteMonitorPaneSettings } from "./settings";
+import { useShortcut } from "../../../react/input";
 
 function getQuoteMonitorDisplay(quote: Quote | null | undefined) {
   return getActiveQuoteDisplay(quote);
 }
 
-export function QuoteMonitorPane({ focused, width }: PaneProps) {
-  const { ticker, financials } = usePaneTicker();
-  const streamingTarget = quoteSubscriptionTargetFromTicker(ticker, ticker?.metadata.ticker, "provider");
-  useQuoteStreaming(streamingTarget ? [streamingTarget] : []);
-  const quote = financials?.quote;
+function chunkSymbols(symbols: string[], columns: number): string[][] {
+  const rows: string[][] = [];
+  for (let index = 0; index < symbols.length; index += columns) {
+    rows.push(symbols.slice(index, index + columns));
+  }
+  return rows;
+}
 
-  usePaneFooter("quote-monitor", () => ({
-    info: [
-      ...(ticker ? [{ id: "ticker", parts: [{ text: ticker.metadata.ticker, tone: "value" as const, bold: true }] }] : []),
-      ...(quote?.lastUpdated ? [{
-        id: "updated",
-        parts: [{ text: `quote ${new Date(quote.lastUpdated).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`, tone: "muted" as const }],
-      }] : []),
-      ...(quote?.providerId || quote?.dataSource ? [{
-        id: "source",
-        parts: [{ text: quote.providerId ?? quote.dataSource ?? "", tone: "muted" as const }],
-      }] : []),
-    ],
-  }), [quote?.dataSource, quote?.lastUpdated, quote?.providerId, ticker?.metadata.ticker]);
-
-  if (!ticker) {
-    return (
-      <Box flexDirection="column" flexGrow={1} paddingX={1}>
-        <EmptyState title="No ticker selected." />
-      </Box>
-    );
+function resolveGridColumnCount(symbolCount: number, width: number, height: number, nativePaneChrome: boolean): number {
+  if (symbolCount <= 1) return 1;
+
+  const contentWidth = Math.max(1, width - (nativePaneChrome ? 0 : 2));
+  const contentHeight = Math.max(1, height);
+  const minimumCellWidth = nativePaneChrome ? 34 : 28;
+  const minimumCellHeight = nativePaneChrome ? 4 : 3;
+  const maxColumns = Math.max(1, Math.min(symbolCount, Math.floor(contentWidth / minimumCellWidth)));
+  const targetAspect = nativePaneChrome ? 5.5 : 4.5;
+  let bestColumns = 1;
+  let bestScore = Number.POSITIVE_INFINITY;
+
+  for (let columns = 1; columns <= maxColumns; columns++) {
+    const rows = Math.ceil(symbolCount / columns);
+    const cellWidth = Math.floor(contentWidth / columns);
+    const cellHeight = Math.floor(contentHeight / rows);
+    const aspect = cellWidth / Math.max(1, cellHeight);
+    const emptySlots = columns * rows - symbolCount;
+    const widthPenalty = cellWidth < minimumCellWidth ? (minimumCellWidth - cellWidth) * 0.5 : 0;
+    const heightPenalty = cellHeight < minimumCellHeight ? (minimumCellHeight - cellHeight) * 1.4 : 0;
+    const score = Math.abs(Math.log(aspect / targetAspect))
+      + emptySlots * 0.35
+      + widthPenalty
+      + heightPenalty
+      - columns * 0.03;
+    if (score < bestScore) {
+      bestScore = score;
+      bestColumns = columns;
+    }
   }
 
-  const display = getQuoteMonitorDisplay(financials?.quote);
+  return bestColumns;
+}
+
+function quoteTrend(value: number | null | undefined): PriceSparklineTrend {
+  if (value == null || value === 0) return "neutral";
+  return value > 0 ? "positive" : "negative";
+}
+
+function QuoteMonitorCard({
+  symbol,
+  ticker,
+  cachedFinancials,
+  width,
+  height,
+  showRightDivider,
+  showBottomDivider,
+  chartPeriod,
+  onOpen,
+}: {
+  symbol: string;
+  ticker: TickerRecord | null;
+  cachedFinancials: TickerFinancials | null;
+  width: number;
+  height: number;
+  showRightDivider: boolean;
+  showBottomDivider: boolean;
+  chartPeriod: PriceSparklinePeriod;
+  onOpen: (symbol: string) => void;
+}) {
+  const { nativePaneChrome } = useUiCapabilities();
+  const marketFinancials = useTickerFinancials(symbol, ticker);
+  const financials = marketFinancials ?? cachedFinancials;
+  const quote = financials?.quote;
+  const display = getQuoteMonitorDisplay(quote);
   const changeColor = priceColor(display?.change ?? 0);
-  const compact = width < 56;
-  const currency = financials?.quote?.currency ?? ticker.metadata.currency ?? "USD";
+  const currency = quote?.currency ?? ticker?.metadata.currency ?? "USD";
+  const stacked = width < 31;
+  const priceText = display
+    ? formatMarketPriceWithCurrency(display.price, currency, { assetCategory: ticker?.metadata.assetCategory })
+    : "";
+  const changePercentText = display ? formatPercentRaw(display.changePercent) : "";
+  const changeValueText = display ? formatSignedMarketPrice(display.change, { assetCategory: ticker?.metadata.assetCategory }) : "";
+  const priceColumnWidth = Math.max(priceText.length, changePercentText.length + changeValueText.length + 1);
+  const nameMaxWidth = Math.max(10, width - priceColumnWidth - (nativePaneChrome ? 5 : 3));
+  const sparklineRange = resolvePriceSparklineRange(financials?.priceHistory, chartPeriod);
+  const rangeLabel = sparklineRange
+    ? `${chartPeriod} ${formatMarketPriceWithCurrency(sparklineRange.min, currency, { assetCategory: ticker?.metadata.assetCategory })}-${formatMarketPriceWithCurrency(sparklineRange.max, currency, { assetCategory: ticker?.metadata.assetCategory })}`
+    : "";
+  const sparklineWidth = Math.max(8, width - (nativePaneChrome ? rangeLabel.length + 5 : 2));
+  const trend = quoteTrend(display?.change);
+  const terminalSparklineHeight = !nativePaneChrome && !stacked && height >= 4 ? 2 : 1;
+  const desktopPriceStyle = nativePaneChrome
+    ? {
+        fontSize: "22px",
+        lineHeight: "1.05",
+        fontWeight: 720,
+        textShadow: `0 1px 2px ${colors.bg}`,
+      }
+    : undefined;
+  const desktopChangeStyle = nativePaneChrome
+    ? {
+        fontSize: "12px",
+        lineHeight: "1.1",
+        fontWeight: 540,
+        textShadow: `0 1px 2px ${colors.bg}`,
+      }
+    : undefined;
+  const desktopSymbolStyle = nativePaneChrome
+    ? {
+        fontSize: "15px",
+        lineHeight: "18px",
+      }
+    : undefined;
+
+  const handleMouseDown = useDoubleClickActivation<string>({
+    onActivate: onOpen,
+  });
 
   return (
-    <Box flexDirection="column" flexGrow={1} backgroundColor={colors.panel} padding={1}>
-      <Box
-        flexGrow={1}
-        border
-        borderColor={focused ? colors.borderFocused : colors.border}
-        backgroundColor={colors.bg}
-        paddingX={compact ? 2 : 4}
-        paddingY={1}
-        justifyContent="center"
-      >
-        {!display ? (
-          <Box flexDirection="column" alignItems="center" justifyContent="center" gap={1} flexGrow={1}>
-            <Text attributes={TextAttributes.BOLD} fg={colors.textBright}>
-              {ticker.metadata.ticker}
+    <Box
+      flexDirection="column"
+      width={nativePaneChrome ? undefined : width}
+      height={nativePaneChrome ? undefined : height}
+      backgroundColor={colors.bg}
+      paddingX={nativePaneChrome ? 0 : 1}
+      paddingY={0}
+      overflow="hidden"
+      onMouseDown={(event: any) => {
+        event.preventDefault?.();
+        handleMouseDown(symbol, symbol, event);
+      }}
+      data-gloom-role="quote-monitor-card"
+      style={nativePaneChrome ? {
+        cursor: "pointer",
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 6,
+        paddingBottom: 4,
+        borderRight: showRightDivider ? `1px solid ${colors.border}` : undefined,
+        borderBottom: showBottomDivider ? `1px solid ${colors.border}` : undefined,
+      } : undefined}
+    >
+      {nativePaneChrome && display && (
+        <PriceAreaSparklineBackground priceHistory={financials?.priceHistory} trend={trend} period={chartPeriod} />
+      )}
+      {!display ? (
+        <Box flexDirection="column" flexGrow={1} justifyContent="center">
+          <Text attributes={TextAttributes.BOLD} fg={colors.textBright} style={desktopSymbolStyle}>
+            {symbol}
+          </Text>
+          <Text fg={colors.textDim}>Waiting for quote...</Text>
+        </Box>
+      ) : nativePaneChrome ? (
+        <Box
+          flexGrow={1}
+          style={{
+            position: "relative",
+            zIndex: 1,
+            display: "grid",
+            gridTemplateColumns: "minmax(130px, 1fr) minmax(88px, auto)",
+            gridTemplateRows: "auto 1fr auto",
+            columnGap: 12,
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          <Box
+            flexDirection="column"
+            minWidth={0}
+            style={{
+              gridColumn: "1",
+              gridRow: "1 / span 2",
+              minWidth: 0,
+              overflow: "hidden",
+            }}
+          >
+            <Text attributes={TextAttributes.BOLD} fg={colors.textBright} style={desktopSymbolStyle}>
+              {symbol}
             </Text>
-            <Text fg={colors.textDim}>Waiting for quote...</Text>
+            {ticker?.metadata.name && (
+              <Text
+                fg={colors.textDim}
+                style={{
+                  fontSize: "12px",
+                  lineHeight: "14px",
+                  maxWidth: "100%",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {ticker.metadata.name}
+              </Text>
+            )}
           </Box>
-        ) : (
+
           <Box
-            flexDirection={compact ? "column" : "row"}
-            alignItems={compact ? "flex-start" : "center"}
-            justifyContent="space-between"
-            gap={compact ? 1 : 2}
-            flexGrow={1}
+            flexDirection="column"
+            alignItems="flex-end"
+            style={{
+              gridColumn: "2",
+              gridRow: "1",
+              justifySelf: "end",
+              backgroundColor: colors.bg,
+              borderRadius: 4,
+              boxShadow: `0 0 0 2px ${colors.bg}`,
+              paddingLeft: 6,
+              paddingBottom: 1,
+            }}
           >
-            <Box flexGrow={1} justifyContent="center">
-              <Text attributes={TextAttributes.BOLD} fg={colors.textBright}>
-                {ticker.metadata.ticker}
-              </Text>
+            <Text
+              attributes={TextAttributes.BOLD}
+              fg={changeColor}
+              style={desktopPriceStyle}
+            >
+              {priceText}
+            </Text>
+            <Box flexDirection="row" gap={1} justifyContent="flex-end">
+              <Text fg={changeColor} style={desktopChangeStyle}>{changePercentText}</Text>
+              <Text fg={changeColor} style={desktopChangeStyle}>{changeValueText}</Text>
             </Box>
+          </Box>
 
-            <Box flexDirection="column" alignItems={compact ? "flex-start" : "flex-end"}>
-              <Text attributes={TextAttributes.BOLD} fg={changeColor}>
-                {formatMarketPriceWithCurrency(display.price, currency, { assetCategory: ticker.metadata.assetCategory })}
+          {rangeLabel && (
+            <Text
+              fg={colors.textDim}
+              style={{
+                gridColumn: "2",
+                gridRow: "3",
+                justifySelf: "end",
+                alignSelf: "end",
+                fontSize: "11px",
+                lineHeight: "13px",
+                backgroundColor: colors.bg,
+                paddingLeft: 6,
+                paddingRight: 2,
+                boxShadow: `0 0 0 2px ${colors.bg}`,
+              }}
+            >
+              {rangeLabel}
+            </Text>
+          )}
+        </Box>
+      ) : (
+        <Box flexDirection="column" flexGrow={1} justifyContent="flex-start">
+          {stacked ? (
+            <Box flexDirection="column">
+              <Text attributes={TextAttributes.BOLD} fg={colors.textBright} style={desktopSymbolStyle}>
+                {symbol}
               </Text>
-              <Box flexDirection="row" gap={1}>
-                <Text fg={changeColor}>{formatPercentRaw(display.changePercent)}</Text>
-                <Text fg={changeColor}>{formatSignedMarketPrice(display.change, { assetCategory: ticker.metadata.assetCategory })}</Text>
+              <Box flexDirection="column">
+                <Text attributes={TextAttributes.BOLD} fg={changeColor} style={desktopPriceStyle}>
+                  {priceText}
+                </Text>
+                <Box flexDirection="row" gap={1}>
+                  <Text fg={changeColor} style={desktopChangeStyle}>{changePercentText}</Text>
+                  <Text fg={changeColor} style={desktopChangeStyle}>{changeValueText}</Text>
+                </Box>
               </Box>
             </Box>
+          ) : (
+            <Box
+              flexDirection="row"
+              alignItems="flex-start"
+              justifyContent="space-between"
+              gap={1}
+            >
+              <Box flexDirection="column" flexGrow={1} minWidth={0}>
+                <Text attributes={TextAttributes.BOLD} fg={colors.textBright} style={desktopSymbolStyle}>
+                  {symbol}
+                </Text>
+                {nativePaneChrome && ticker?.metadata.name && width >= 36 && (
+                  <Text
+                    fg={colors.textDim}
+                    style={{
+                      fontSize: "12px",
+                      lineHeight: "16px",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                    maxWidth={nameMaxWidth}
+                  >
+                    {ticker.metadata.name}
+                  </Text>
+                )}
+              </Box>
+              <Box flexDirection="column" alignItems="flex-end">
+                <Text
+                  attributes={TextAttributes.BOLD}
+                  fg={changeColor}
+                  style={desktopPriceStyle}
+                >
+                  {priceText}
+                </Text>
+                <Box flexDirection="row" gap={1} justifyContent="flex-end">
+                  <Text fg={changeColor} style={desktopChangeStyle}>{changePercentText}</Text>
+                  <Text fg={changeColor} style={desktopChangeStyle}>{changeValueText}</Text>
+                </Box>
+              </Box>
+            </Box>
+          )}
+
+          <Box height={terminalSparklineHeight} flexDirection="row" alignItems="center" gap={1}>
+            <PriceSparkline
+              priceHistory={financials?.priceHistory}
+              width={sparklineWidth}
+              height={terminalSparklineHeight}
+              trend={trend}
+              period={chartPeriod}
+              area={!nativePaneChrome}
+            />
+            {nativePaneChrome && rangeLabel && (
+              <Text fg={colors.textDim} style={{ fontSize: "11px", lineHeight: "14px" }}>
+                {rangeLabel}
+              </Text>
+            )}
           </Box>
-        )}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export function QuoteMonitorPane({ paneId, focused, width, height }: PaneProps) {
+  const pane = usePaneInstance();
+  const { symbol: fallbackSymbol, ticker: fallbackTicker } = usePaneTicker();
+  const settings = useMemo(
+    () => getQuoteMonitorPaneSettings(pane?.settings, fallbackSymbol),
+    [fallbackSymbol, pane?.settings],
+  );
+  const symbols = settings.symbols;
+  const financialsBySymbol = useAppSelector((state) => state.financials);
+  const tickersBySymbol = useAppSelector((state) => state.tickers);
+  const streamingTargets = useMemo(() => (
+    symbols
+      .map((symbol) => {
+        const ticker = tickersBySymbol.get(symbol) ?? (fallbackTicker?.metadata.ticker === symbol ? fallbackTicker : null);
+        return quoteSubscriptionTargetFromTicker(ticker, symbol, "provider");
+      })
+      .filter((target): target is QuoteSubscriptionTarget => target != null)
+  ), [fallbackTicker, symbols, tickersBySymbol]);
+  useQuoteStreaming(streamingTargets);
+  const { pinTicker } = usePluginTickerActions();
+  const { openPaneSettings } = usePluginAppActions();
+  const { nativePaneChrome } = useUiCapabilities();
+  const openTicker = useCallback((nextSymbol: string) => {
+    pinTicker(nextSymbol, { paneType: "ticker-detail", floating: true });
+  }, [pinTicker]);
+  useShortcut((event) => {
+    if (!focused || event.name !== "t") return;
+    event.preventDefault?.();
+    event.stopPropagation?.();
+    openPaneSettings(paneId);
+  });
+
+  if (symbols.length === 0) {
+    return (
+      <Box flexDirection="column" flexGrow={1} paddingX={1}>
+        <EmptyState title="No tickers selected." />
       </Box>
+    );
+  }
+
+  const columns = resolveGridColumnCount(symbols.length, width, height, nativePaneChrome);
+  const rows = chunkSymbols(symbols, columns);
+  const contentWidth = Math.max(1, width - (nativePaneChrome ? 0 : 2));
+  const contentHeight = Math.max(3, height);
+  const cardHeight = Math.max(nativePaneChrome ? 4 : 3, Math.floor(contentHeight / rows.length));
+  const cardWidth = Math.max(1, Math.floor(contentWidth / columns));
+
+  if (nativePaneChrome) {
+    return (
+      <Box
+        flexGrow={1}
+        backgroundColor={colors.bg}
+        overflow="hidden"
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(min(240px, 100%), 1fr))",
+          gridAutoRows: "minmax(66px, 1fr)",
+          alignItems: "stretch",
+          alignContent: "stretch",
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        {symbols.map((symbol, index) => {
+          const ticker = tickersBySymbol.get(symbol) ?? (fallbackTicker?.metadata.ticker === symbol ? fallbackTicker : null);
+          return (
+            <QuoteMonitorCard
+              key={symbol}
+              symbol={symbol}
+              ticker={ticker}
+              cachedFinancials={financialsBySymbol.get(symbol) ?? null}
+              width={width}
+              height={height}
+              showRightDivider={false}
+              showBottomDivider
+              chartPeriod={settings.chartPeriod}
+              onOpen={openTicker}
+            />
+          );
+        })}
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      backgroundColor={colors.bg}
+      paddingX={nativePaneChrome ? 0 : 1}
+      paddingY={0}
+      overflow="hidden"
+    >
+      {rows.map((row, rowIndex) => (
+        <Box key={`${rowIndex}:${row.join(",")}`} flexDirection="row" height={cardHeight}>
+          {row.map((symbol, columnIndex) => {
+            const ticker = tickersBySymbol.get(symbol) ?? (fallbackTicker?.metadata.ticker === symbol ? fallbackTicker : null);
+            return (
+              <QuoteMonitorCard
+                key={symbol}
+                symbol={symbol}
+                ticker={ticker}
+                cachedFinancials={financialsBySymbol.get(symbol) ?? null}
+                width={cardWidth}
+                height={cardHeight}
+                showRightDivider={columnIndex < row.length - 1}
+                showBottomDivider={rowIndex < rows.length - 1}
+                chartPeriod={settings.chartPeriod}
+                onOpen={openTicker}
+              />
+            );
+          })}
+        </Box>
+      ))}
     </Box>
   );
 }