gloomberb 0.5.1 → 0.6.0

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

@@ -1,4 +1,5 @@
-import { useKeyboard } from "@opentui/react";
+import { Box } from "../../../ui";
+import { useShortcut } from "../../../react/input";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { DetailTabDef, PaneProps } from "../../../types/plugin";
 import { quoteSubscriptionTargetFromTicker } from "../../../market-data/request-types";
@@ -13,10 +14,8 @@ import {
 import { useQuoteStreaming } from "../../../state/use-quote-streaming";
 import { getCollectionName, getCollectionTickerCount } from "../../../state/selectors";
 import { getSharedRegistry } from "../../registry";
-import { EmptyState } from "../../../components";
-import { TabBar } from "../../../components/tab-bar";
-import { getConfiguredIbkrGatewayInstances } from "../../ibkr/instance-selection";
-import { useOptionsAvailability } from "../options-availability";
+import { EmptyState, Tabs } from "../../../components";
+import { resolveOptionsTarget } from "../../../utils/options";
 import { ChartTab } from "./chart-tab";
 import { ResolvedFinancialsTab } from "./financials-tab";
 import { OverviewTab } from "./overview-tab";
@@ -26,6 +25,14 @@ import {
   resolveLockedTabId,
 } from "./settings";
 
+function sameStringSet(left: Set<string>, right: Set<string>): boolean {
+  if (left.size !== right.size) return false;
+  for (const value of left) {
+    if (!right.has(value)) return false;
+  }
+  return true;
+}
+
 export function TickerDetailPane({ focused, width, height }: PaneProps) {
   const dispatch = useAppDispatch();
   const config = useAppSelector((state) => state.config);
@@ -39,8 +46,9 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
   const [activeTabId, setActiveTabId] = usePaneStateValue<string>("activeTabId", "overview");
   const [chartInteractive, setChartInteractive] = useState(false);
   const [pluginCaptured, setPluginCaptured] = useState(false);
+  const [mountedTabIds, setMountedTabIds] = useState<Set<string>>(() => new Set());
   const paneSettings = getTickerDetailPaneSettings(paneInstance?.settings);
-  const hasOptionsChain = useOptionsAvailability(ticker);
+  const hasOptionsChain = !!resolveOptionsTarget(ticker)?.effectiveTicker;
   const collectionTickerCount = useAppSelector((state) => getCollectionTickerCount(state, collectionId));
   const collectionName = useAppSelector((state) => getCollectionName(state, collectionId));
 
@@ -48,21 +56,33 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
   const registry = getSharedRegistry();
   const pluginTabs = useMemo<DetailTabDef[]>(() => (
     registry
-      ? [...registry.detailTabs.values()].filter((tab) => !disabledPlugins.includes(tab.id))
+      ? [...registry.detailTabs.values()].filter((tab) => {
+        const ownerId = registry.getDetailTabPluginId?.(tab.id);
+        return !ownerId || !disabledPlugins.includes(ownerId);
+      })
       : []
   ), [disabledPlugins, registry]);
-  const hasIbkrGatewayTrading = useMemo(
-    () => getConfiguredIbkrGatewayInstances(config).length > 0,
-    [config],
-  );
   const allTabs = buildVisibleDetailTabs(pluginTabs, ticker, financials, {
-    hasIbkrGatewayTrading,
+    config,
     hasOptionsChain,
   });
   const resolvedTabId = paneSettings.hideTabs
     ? resolveLockedTabId(paneSettings, allTabs)
     : (allTabs.some((tab) => tab.id === activeTabId) ? activeTabId : (allTabs[0]?.id ?? "overview"));
-  const activePluginTab = pluginTabs.find((tab) => tab.id === resolvedTabId && allTabs.some((visibleTab) => visibleTab.id === tab.id)) ?? null;
+  const tabBarHeight = paneSettings.hideTabs ? 0 : 1;
+  const contentHeight = Math.max(1, height - tabBarHeight);
+  const visibleTabIdKey = allTabs.map((tab) => tab.id).join("\0");
+  const visibleTabIds = useMemo(() => new Set(allTabs.map((tab) => tab.id)), [visibleTabIdKey]);
+  const renderedTabIds = useMemo(() => {
+    const next = new Set<string>();
+    for (const tabId of mountedTabIds) {
+      if (visibleTabIds.has(tabId)) next.add(tabId);
+    }
+    if (visibleTabIds.has(resolvedTabId)) {
+      next.add(resolvedTabId);
+    }
+    return next;
+  }, [mountedTabIds, resolvedTabId, visibleTabIds]);
 
   const allTabsRef = useRef(allTabs);
   allTabsRef.current = allTabs;
@@ -96,6 +116,7 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
     setPluginCaptured(capturing);
     dispatch({ type: "SET_INPUT_CAPTURED", captured: capturing });
   }, [dispatch]);
+  const ignorePluginCapture = useCallback(() => {}, []);
 
   useEffect(() => {
     if (resolvedTabId !== "chart") {
@@ -105,6 +126,19 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
     dispatch({ type: "SET_INPUT_CAPTURED", captured: false });
   }, [resolvedTabId, dispatch]);
 
+  useEffect(() => {
+    setMountedTabIds((current) => {
+      const next = new Set<string>();
+      for (const tabId of current) {
+        if (visibleTabIds.has(tabId)) next.add(tabId);
+      }
+      if (visibleTabIds.has(resolvedTabId)) {
+        next.add(resolvedTabId);
+      }
+      return sameStringSet(current, next) ? current : next;
+    });
+  }, [resolvedTabId, visibleTabIds]);
+
   useEffect(() => {
     if (resolvedTabId !== activeTabId) {
       setActiveTabId(resolvedTabId);
@@ -140,7 +174,7 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
     }
   }, [setActiveTabId, setChartInteractiveEager]);
 
-  useKeyboard(handleKeyboard);
+  useShortcut(handleKeyboard);
 
   if (!ticker) {
     const isEmptyFollowCollection = paneInstance?.binding?.kind === "follow" && !!collectionId && collectionTickerCount === 0;
@@ -149,53 +183,105 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
       : "No ticker selected.";
 
     return (
-      <box flexDirection="column" flexGrow={1} paddingX={1}>
+      <Box flexDirection="column" flexGrow={1} paddingX={1}>
         <EmptyState title={message} />
-      </box>
+      </Box>
     );
   }
 
   return (
-    <box flexDirection="column" flexGrow={1}>
+    <Box flexDirection="column" flexGrow={1} flexBasis={0} overflow="hidden">
       {!paneSettings.hideTabs && (
-        <TabBar
+        <Tabs
           tabs={allTabs.map((tab) => ({ label: tab.name, value: tab.id }))}
           activeValue={resolvedTabId}
           onSelect={setActiveTabId}
         />
       )}
 
-      {resolvedTabId === "overview" && (
-        <OverviewTab
-          width={width}
-          symbol={symbol}
-          ticker={ticker}
-          financials={financials}
-        />
-      )}
-      {resolvedTabId === "financials" && <ResolvedFinancialsTab focused={focused} financials={financials} />}
-      {resolvedTabId === "chart" && (
-        <ChartTab
-          width={width}
-          height={height}
-          focused={focused}
-          interactive={chartInteractive}
-          axisMode={paneSettings.chartAxisMode}
-          onActivate={() => setChartInteractiveEager(true)}
-          symbol={symbol}
-          ticker={ticker}
-          financials={financials}
-        />
-      )}
+      <Box height={contentHeight} flexGrow={1} flexBasis={0} overflow="hidden">
+        {renderedTabIds.has("overview") && (
+          <Box
+            key="overview"
+            visible={resolvedTabId === "overview"}
+            flexDirection="column"
+            flexGrow={1}
+            flexBasis={0}
+            height={contentHeight}
+            overflow="hidden"
+          >
+            <OverviewTab
+              width={width}
+              symbol={symbol}
+              ticker={ticker}
+              financials={financials}
+            />
+          </Box>
+        )}
+        {renderedTabIds.has("financials") && (
+          <Box
+            key="financials"
+            visible={resolvedTabId === "financials"}
+            flexDirection="column"
+            flexGrow={1}
+            flexBasis={0}
+            height={contentHeight}
+            overflow="hidden"
+          >
+            <ResolvedFinancialsTab
+              focused={focused && resolvedTabId === "financials"}
+              financials={financials}
+            />
+          </Box>
+        )}
+        {renderedTabIds.has("chart") && (
+          <Box
+            key="chart"
+            visible={resolvedTabId === "chart"}
+            flexDirection="column"
+            flexGrow={1}
+            flexBasis={0}
+            height={contentHeight}
+            overflow="hidden"
+          >
+            <ChartTab
+              width={width}
+              height={contentHeight}
+              focused={focused && resolvedTabId === "chart"}
+              interactive={chartInteractive}
+              axisMode={paneSettings.chartAxisMode}
+              onActivate={() => setChartInteractiveEager(true)}
+              symbol={symbol}
+              ticker={ticker}
+              financials={financials}
+            />
+          </Box>
+        )}
 
-      {activePluginTab && (
-        <activePluginTab.component
-          width={width}
-          height={height}
-          focused={focused}
-          onCapture={handlePluginCapture}
-        />
-      )}
-    </box>
+        {pluginTabs.map((tab) => {
+          if (!renderedTabIds.has(tab.id) || !visibleTabIds.has(tab.id)) return null;
+          const PluginTab = tab.component;
+          const isActive = resolvedTabId === tab.id;
+          return (
+            <Box
+              key={tab.id}
+              visible={isActive}
+              flexDirection="column"
+              flexGrow={1}
+              flexBasis={0}
+              height={contentHeight}
+              overflow="hidden"
+            >
+              <PluginTab
+                width={width}
+                height={contentHeight}
+                focused={focused && isActive}
+                onCapture={isActive ? handlePluginCapture : ignorePluginCapture}
+              />
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
   );
 }

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

@@ -1,4 +1,5 @@
-import { TextAttributes } from "@opentui/core";
+import { Box, Text } from "../../../ui";
+import { TextAttributes } from "../../../ui";
 import type { PaneProps } from "../../../types/plugin";
 import type { Quote } from "../../../types/financials";
 import { quoteSubscriptionTargetFromTicker } from "../../../market-data/request-types";
@@ -8,7 +9,7 @@ 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 } from "../../../components";
+import { EmptyState, usePaneFooter } from "../../../components";
 
 function getQuoteMonitorDisplay(quote: Quote | null | undefined) {
   return getActiveQuoteDisplay(quote);
@@ -18,12 +19,27 @@ 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;
+
+  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}>
+      <Box flexDirection="column" flexGrow={1} paddingX={1}>
         <EmptyState title="No ticker selected." />
-      </box>
+      </Box>
     );
   }
 
@@ -33,8 +49,8 @@ export function QuoteMonitorPane({ focused, width }: PaneProps) {
   const currency = financials?.quote?.currency ?? ticker.metadata.currency ?? "USD";
 
   return (
-    <box flexDirection="column" flexGrow={1} backgroundColor={colors.panel} padding={1}>
-      <box
+    <Box flexDirection="column" flexGrow={1} backgroundColor={colors.panel} padding={1}>
+      <Box
         flexGrow={1}
         border
         borderColor={focused ? colors.borderFocused : colors.border}
@@ -44,38 +60,38 @@ export function QuoteMonitorPane({ focused, width }: PaneProps) {
         justifyContent="center"
       >
         {!display ? (
-          <box flexDirection="column" alignItems="center" justifyContent="center" gap={1} flexGrow={1}>
-            <text attributes={TextAttributes.BOLD} fg={colors.textBright}>
+          <Box flexDirection="column" alignItems="center" justifyContent="center" gap={1} flexGrow={1}>
+            <Text attributes={TextAttributes.BOLD} fg={colors.textBright}>
               {ticker.metadata.ticker}
-            </text>
-            <text fg={colors.textDim}>Waiting for quote...</text>
-          </box>
+            </Text>
+            <Text fg={colors.textDim}>Waiting for quote...</Text>
+          </Box>
         ) : (
-          <box
+          <Box
             flexDirection={compact ? "column" : "row"}
             alignItems={compact ? "flex-start" : "center"}
             justifyContent="space-between"
             gap={compact ? 1 : 2}
             flexGrow={1}
           >
-            <box flexGrow={1} justifyContent="center">
-              <text attributes={TextAttributes.BOLD} fg={colors.textBright}>
+            <Box flexGrow={1} justifyContent="center">
+              <Text attributes={TextAttributes.BOLD} fg={colors.textBright}>
                 {ticker.metadata.ticker}
-              </text>
-            </box>
+              </Text>
+            </Box>
 
-            <box flexDirection="column" alignItems={compact ? "flex-start" : "flex-end"}>
-              <text attributes={TextAttributes.BOLD} fg={changeColor}>
+            <Box flexDirection="column" alignItems={compact ? "flex-start" : "flex-end"}>
+              <Text attributes={TextAttributes.BOLD} fg={changeColor}>
                 {formatMarketPriceWithCurrency(display.price, currency, { assetCategory: ticker.metadata.assetCategory })}
-              </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>
-            </box>
-          </box>
+              </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>
+            </Box>
+          </Box>
         )}
-      </box>
-    </box>
+      </Box>
+    </Box>
   );
 }

package/src/plugins/builtin/ticker-detail/settings.ts

@@ -1,6 +1,7 @@
 import type { PaneSettingsDef, DetailTabDef } from "../../../types/plugin";
 import type { TickerFinancials } from "../../../types/financials";
 import type { TickerRecord } from "../../../types/ticker";
+import type { AppConfig } from "../../../types/config";
 import type { ChartAxisMode, TimeRange } from "../../../components/chart/chart-types";
 import {
   DEFAULT_TICKER_CHART_RANGE_PRESET,
@@ -81,7 +82,6 @@ export function buildTickerDetailSettingsDef(settings: TickerDetailPaneSettings)
         ? [{
           key: "lockedTabId",
           label: "Locked Tab",
-          description: "Choose which tab this pane should stay pinned to when tabs are hidden.",
           type: "select" as const,
           options: tabs.map((tab) => ({ value: tab.id, label: tab.name })),
         }]
@@ -107,7 +107,6 @@ export function buildQuoteMonitorSettingsDef(): PaneSettingsDef {
       {
         key: "symbol",
         label: "Ticker",
-        description: "Set the fixed ticker symbol for this quote monitor.",
         type: "text",
         placeholder: "AAPL",
       },
@@ -124,7 +123,7 @@ export function buildVisibleDetailTabs(
   ticker: TickerRecord | null,
   financials: TickerFinancials | null | undefined,
   options: {
-    hasIbkrGatewayTrading: boolean;
+    config: AppConfig;
     hasOptionsChain: boolean;
   },
 ): DetailTabSummary[] {
@@ -136,13 +135,11 @@ export function buildVisibleDetailTabs(
 
   for (const tab of pluginTabs) {
     if (tab.isVisible && !tab.isVisible({
+      config: options.config,
       ticker,
       financials,
-      hasIbkrGatewayTrading: options.hasIbkrGatewayTrading,
       hasOptionsChain: options.hasOptionsChain,
     })) continue;
-    if (tab.id === "ibkr-trade" && !options.hasIbkrGatewayTrading) continue;
-    if (tab.id === "options" && !options.hasOptionsChain) continue;
     tabs.push({ id: tab.id, name: tab.name, order: tab.order });
   }
 

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

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { createTestRenderer } from "@opentui/core/testing";
-import { createRoot } from "@opentui/react";
+import { createOpenTuiTestRoot as createRoot } from "../../renderers/opentui/test-utils";
 import { DialogProvider } from "@opentui-ui/dialog/react";
 import { act, useReducer, type ReactElement } from "react";
 import {
@@ -11,9 +11,11 @@ import {
   type AppAction,
 } from "../../state/app-context";
 import { cloneLayout, createDefaultConfig, type AppConfig } from "../../types/config";
+import { createTestPluginRuntime } from "../../test-support/plugin-runtime";
 import type { TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
 import { getNativeSurfaceManager } from "../../components/chart/native/surface-manager";
+import { PluginRenderProvider } from "../plugin-runtime";
 import { tickerDetailPlugin } from "./ticker-detail";
 
 const TEST_PANE_ID = "ticker-detail:test";
@@ -30,6 +32,8 @@ let root: ReturnType<typeof createRoot> | undefined;
 let harnessDispatch: ((action: AppAction) => void) | null = null;
 const actEnvironment = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean };
 
+const runtime = createTestPluginRuntime();
+
 function makeTicker(symbol: string): TickerRecord {
   return {
     metadata: {
@@ -101,13 +105,15 @@ function DetailHarness({
     <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
       <AppContext value={{ state, dispatch }}>
         <PaneInstanceProvider paneId={TEST_PANE_ID}>
-          <DetailPane
-            paneId={TEST_PANE_ID}
-            paneType="ticker-detail"
-            focused
-            width={90}
-            height={28}
-          />
+          <PluginRenderProvider pluginId={tickerDetailPlugin.id} runtime={runtime}>
+            <DetailPane
+              paneId={TEST_PANE_ID}
+              paneType="ticker-detail"
+              focused
+              width={90}
+              height={28}
+            />
+          </PluginRenderProvider>
         </PaneInstanceProvider>
       </AppContext>
     </DialogProvider>
@@ -178,8 +184,8 @@ describe("Ticker detail chart tab switching", () => {
 
     await flushFrames();
     const chartTabFrame = testSetup.captureCharFrame();
-    expect(chartTabFrame).toContain("AAPL");
-    expect(chartTabFrame).toContain("[i]ndicators");
+    expect(chartTabFrame).toContain("AUTO 1M");
+    expect(chartTabFrame).not.toContain("AAPL -");
     expect(manager.surfaces.has("chart-surface:ticker-detail:test:full:base")).toBe(true);
 
     act(() => {