gloomberb 0.2.0 → 0.3.2

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

@@ -0,0 +1,242 @@
+import { TextAttributes } from "@opentui/core";
+import { useTerminalDimensions } from "@opentui/react";
+import { useFxRatesMap } from "../../../market-data/hooks";
+import { useAppState, usePaneTicker } from "../../../state/app-context";
+import { colors, priceColor } from "../../../theme/colors";
+import {
+  convertCurrency,
+  formatCompact,
+  formatCompactCurrency,
+  formatCurrency,
+  formatNumber,
+  formatPercent,
+  formatPercentRaw,
+} from "../../../utils/format";
+import {
+  exchangeShortName,
+  marketStateColor,
+  marketStateLabel,
+} from "../../../utils/market-status";
+import { selectEffectiveExchangeRates } from "../../../utils/exchange-rate-map";
+import { EmptyState, FieldRow } from "../../../components";
+import { StockChart } from "../../../components/chart/stock-chart";
+
+export function OverviewTab({ width }: { width?: number }) {
+  const { state } = useAppState();
+  const { ticker, financials } = usePaneTicker();
+  const { width: termWidth } = useTerminalDimensions();
+
+  if (!ticker) return <EmptyState title="No ticker selected." />;
+
+  const quote = financials?.quote;
+  const fundamentals = financials?.fundamentals;
+  const profile = financials?.profile;
+  const baseCurrency = state.config.baseCurrency;
+  const exchangeRates = useFxRatesMap([
+    baseCurrency,
+    ticker.metadata.currency,
+    quote?.currency,
+    ...ticker.metadata.positions.map((position) => position.currency),
+  ]);
+  const effectiveExchangeRates = selectEffectiveExchangeRates(exchangeRates, state.exchangeRates);
+  const quoteCurrency = quote?.currency ?? ticker.metadata.currency ?? baseCurrency;
+  const toBase = (value: number, fromCurrency: string) =>
+    convertCurrency(value, fromCurrency, baseCurrency, effectiveExchangeRates);
+  const sector = ticker.metadata.sector ?? profile?.sector;
+  const industry = ticker.metadata.industry ?? profile?.industry;
+  const description = profile?.description?.trim();
+
+  const chartWidth = Math.max((width || Math.floor(termWidth * 0.5)) - 4, 20);
+  const hasHistory = (financials?.priceHistory?.length ?? 0) > 2;
+
+  return (
+    <scrollbox flexGrow={1} scrollY>
+      <box flexDirection="column" paddingX={1} paddingBottom={1} gap={1}>
+        <box flexDirection="row">
+          <text attributes={TextAttributes.BOLD} fg={colors.textBright}>
+            {ticker.metadata.ticker}
+          </text>
+          {ticker.metadata.name && ticker.metadata.name !== ticker.metadata.ticker && (
+            <text fg={colors.textDim}>
+              {" "}- {ticker.metadata.name || quote?.name || ""}
+            </text>
+          )}
+          {quote?.exchangeName && (
+            <text fg={colors.textDim}>
+              {" "}({exchangeShortName(quote.exchangeName, quote.fullExchangeName)})
+            </text>
+          )}
+          {quote?.marketState && (
+            <text fg={marketStateColor(quote.marketState)}>
+              {" "}{marketStateLabel(quote.marketState)}
+            </text>
+          )}
+        </box>
+
+        {quote && (
+          <box flexDirection="column" gap={0}>
+            <box flexDirection="row" gap={2}>
+              <text attributes={TextAttributes.BOLD} fg={priceColor(quote.change)}>
+                {formatCurrency(quote.price, quote.currency)}
+              </text>
+              <text fg={priceColor(quote.change)}>
+                {quote.change >= 0 ? "+" : ""}
+                {quote.change.toFixed(2)} ({formatPercentRaw(quote.changePercent)})
+              </text>
+            </box>
+            {(quote.marketState === "PRE" || quote.marketState === "PREPRE") && quote.preMarketPrice != null && (
+              <box flexDirection="row" gap={2}>
+                <text fg={colors.textDim}>Pre-Market:</text>
+                <text fg={priceColor(quote.preMarketChange ?? 0)}>
+                  {formatCurrency(quote.preMarketPrice, quote.currency)}
+                </text>
+                <text fg={priceColor(quote.preMarketChange ?? 0)}>
+                  {(quote.preMarketChange ?? 0) >= 0 ? "+" : ""}
+                  {(quote.preMarketChange ?? 0).toFixed(2)} ({formatPercentRaw(quote.preMarketChangePercent ?? 0)})
+                </text>
+              </box>
+            )}
+            {(quote.marketState === "POST" || quote.marketState === "POSTPOST") && quote.postMarketPrice != null && (
+              <box flexDirection="row" gap={2}>
+                <text fg={colors.textDim}>After-Hours:</text>
+                <text fg={priceColor(quote.postMarketChange ?? 0)}>
+                  {formatCurrency(quote.postMarketPrice, quote.currency)}
+                </text>
+                <text fg={priceColor(quote.postMarketChange ?? 0)}>
+                  {(quote.postMarketChange ?? 0) >= 0 ? "+" : ""}
+                  {(quote.postMarketChange ?? 0).toFixed(2)} ({formatPercentRaw(quote.postMarketChangePercent ?? 0)})
+                </text>
+              </box>
+            )}
+          </box>
+        )}
+
+        {hasHistory && (
+          <StockChart width={chartWidth} height={8} focused={false} compact />
+        )}
+
+        <box flexDirection="column">
+          <FieldRow
+            label="Market Cap"
+            value={quote?.marketCap ? formatCompactCurrency(toBase(quote.marketCap, quoteCurrency), baseCurrency) : "—"}
+          />
+          <FieldRow label="P/E (TTM)" value={fundamentals?.trailingPE ? formatNumber(fundamentals.trailingPE, 1) : "—"} />
+          <FieldRow label="Forward P/E" value={fundamentals?.forwardPE ? formatNumber(fundamentals.forwardPE, 1) : "—"} />
+          <FieldRow label="PEG Ratio" value={fundamentals?.pegRatio ? formatNumber(fundamentals.pegRatio, 2) : "—"} />
+          <FieldRow label="EPS" value={fundamentals?.eps ? formatCurrency(fundamentals.eps, quoteCurrency) : "—"} />
+          <FieldRow label="Div Yield" value={fundamentals?.dividendYield != null ? formatPercent(fundamentals.dividendYield) : "—"} />
+          <FieldRow label="Revenue" value={fundamentals?.revenue ? formatCompact(fundamentals.revenue) : "—"} />
+          <FieldRow label="Net Income" value={fundamentals?.netIncome ? formatCompact(fundamentals.netIncome) : "—"} />
+          <FieldRow label="FCF" value={fundamentals?.freeCashFlow ? formatCompact(fundamentals.freeCashFlow) : "—"} />
+          <FieldRow label="Op. Margin" value={fundamentals?.operatingMargin != null ? formatPercent(fundamentals.operatingMargin) : "—"} />
+          <FieldRow label="Profit Margin" value={fundamentals?.profitMargin != null ? formatPercent(fundamentals.profitMargin) : "—"} />
+          {(quote?.bid != null || quote?.ask != null) && (
+            <>
+              <FieldRow label="Bid" value={quote?.bid != null ? formatCurrency(quote.bid, quote.currency) : "—"} />
+              <FieldRow label="Ask" value={quote?.ask != null ? formatCurrency(quote.ask, quote.currency) : "—"} />
+              <FieldRow
+                label="Spread"
+                value={quote?.bid != null && quote?.ask != null ? formatCurrency(quote.ask - quote.bid, quote.currency) : "—"}
+              />
+            </>
+          )}
+          <FieldRow
+            label="52W Range"
+            value={quote?.low52w && quote?.high52w ? `${formatCurrency(quote.low52w, quoteCurrency)} - ${formatCurrency(quote.high52w, quoteCurrency)}` : "—"}
+          />
+          <FieldRow
+            label="1Y Return"
+            value={fundamentals?.return1Y != null ? formatPercent(fundamentals.return1Y) : "—"}
+            valueColor={fundamentals?.return1Y != null ? priceColor(fundamentals.return1Y) : undefined}
+          />
+          <FieldRow
+            label="3Y Return"
+            value={fundamentals?.return3Y != null ? formatPercent(fundamentals.return3Y) : "—"}
+            valueColor={fundamentals?.return3Y != null ? priceColor(fundamentals.return3Y) : undefined}
+          />
+        </box>
+
+        {description && (
+          <box flexDirection="column" paddingTop={1}>
+            <box height={1}>
+              <text attributes={TextAttributes.BOLD} fg={colors.textBright}>Description</text>
+            </box>
+            <text fg={colors.text}>{description}</text>
+          </box>
+        )}
+
+        {(sector || industry || ticker.metadata.assetCategory || ticker.metadata.isin) && (
+          <box flexDirection="column">
+            {ticker.metadata.assetCategory && (
+              <FieldRow label="Type" value={ticker.metadata.assetCategory} />
+            )}
+            {sector && (
+              <FieldRow label="Sector" value={sector} />
+            )}
+            {industry && (
+              <FieldRow label="Industry" value={industry} />
+            )}
+            {ticker.metadata.isin && (
+              <FieldRow label="ISIN" value={ticker.metadata.isin} />
+            )}
+          </box>
+        )}
+
+        {ticker.metadata.positions.length > 0 && (
+          <box flexDirection="column">
+            <box height={1}>
+              <text attributes={TextAttributes.BOLD} fg={colors.textBright}>Positions</text>
+            </box>
+            {ticker.metadata.positions.map((position, index) => {
+              const costBasis = position.shares * position.avgCost * (position.multiplier || 1);
+              const positionCurrency = position.currency || quoteCurrency;
+              const costBasisBase = toBase(costBasis, positionCurrency);
+              const marketValueBase = position.marketValue != null
+                ? toBase(position.marketValue, positionCurrency)
+                : position.markPrice != null
+                  ? toBase(Math.abs(position.shares) * position.markPrice * (position.multiplier || 1), positionCurrency)
+                  : quote
+                    ? toBase(Math.abs(position.shares) * quote.price * (position.multiplier || 1), quoteCurrency)
+                    : null;
+              const pnlValue = position.unrealizedPnl != null
+                ? toBase(position.unrealizedPnl, positionCurrency)
+                : marketValueBase != null
+                  ? marketValueBase - costBasisBase
+                  : null;
+              const pnlText = pnlValue != null
+                ? `  P&L: ${pnlValue >= 0 ? "+" : ""}${formatCurrency(pnlValue, baseCurrency)}`
+                : "";
+
+              return (
+                <box key={index} flexDirection="column">
+                  <box flexDirection="row" height={1}>
+                    <text fg={colors.textDim}>{position.portfolio}</text>
+                    <text fg={colors.textMuted}>{" via "}{position.broker}</text>
+                    {position.side === "short" && <text fg={colors.negative}>{" SHORT"}</text>}
+                  </box>
+                  <box flexDirection="row" height={1}>
+                    <text fg={colors.text}>
+                      {position.shares} {position.multiplier && position.multiplier > 1 ? "contracts" : "shares"} @ {formatCurrency(position.avgCost, positionCurrency)}
+                      {" = "}{formatCurrency(costBasisBase, baseCurrency)}
+                    </text>
+                    {pnlText && (
+                      <text fg={priceColor(pnlValue ?? 0)}>{pnlText}</text>
+                    )}
+                  </box>
+                  {position.markPrice != null && (
+                    <box flexDirection="row" height={1}>
+                      <text fg={colors.textDim}>Mark: {formatCurrency(position.markPrice, positionCurrency)}</text>
+                      {marketValueBase != null && (
+                        <text fg={colors.textDim}>{" "}Mkt Value: {formatCurrency(marketValueBase, baseCurrency)}</text>
+                      )}
+                    </box>
+                  )}
+                </box>
+              );
+            })}
+          </box>
+        )}
+      </box>
+    </scrollbox>
+  );
+}

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

@@ -0,0 +1,183 @@
+import { useKeyboard } from "@opentui/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { DetailTabDef, PaneProps } from "../../../types/plugin";
+import { quoteSubscriptionTargetFromTicker } from "../../../market-data/request-types";
+import {
+  useAppState,
+  usePaneCollection,
+  usePaneInstance,
+  usePaneStateValue,
+  usePaneTicker,
+} from "../../../state/app-context";
+import { useQuoteStreaming } from "../../../state/use-quote-streaming";
+import { getCollectionName, getCollectionTickers } 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 { ChartTab } from "./chart-tab";
+import { FinancialsTab } from "./financials-tab";
+import { OverviewTab } from "./overview-tab";
+import {
+  buildVisibleDetailTabs,
+  getTickerDetailPaneSettings,
+  resolveLockedTabId,
+} from "./settings";
+
+export function TickerDetailPane({ focused, width, height }: PaneProps) {
+  const { state, dispatch } = useAppState();
+  const paneInstance = usePaneInstance();
+  const { ticker, financials } = usePaneTicker();
+  const streamingTarget = quoteSubscriptionTargetFromTicker(ticker, ticker?.metadata.ticker, "provider");
+  useQuoteStreaming(streamingTarget ? [streamingTarget] : []);
+
+  const { collectionId } = usePaneCollection();
+  const [activeTabId, setActiveTabId] = usePaneStateValue<string>("activeTabId", "overview");
+  const [chartInteractive, setChartInteractive] = useState(false);
+  const [pluginCaptured, setPluginCaptured] = useState(false);
+  const paneSettings = getTickerDetailPaneSettings(paneInstance?.settings);
+  const hasOptionsChain = useOptionsAvailability(ticker);
+  const collectionTickers = getCollectionTickers(state, collectionId);
+  const collectionName = getCollectionName(state, collectionId);
+
+  const disabledPlugins = state.config.disabledPlugins || [];
+  const registry = getSharedRegistry();
+  const pluginTabs: DetailTabDef[] = registry
+    ? [...registry.detailTabs.values()].filter((tab) => !disabledPlugins.includes(tab.id))
+    : [];
+  const hasIbkrGatewayTrading = getConfiguredIbkrGatewayInstances(state.config).length > 0;
+  const allTabs = buildVisibleDetailTabs(pluginTabs, ticker, financials, {
+    hasIbkrGatewayTrading,
+    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 allTabsRef = useRef(allTabs);
+  allTabsRef.current = allTabs;
+
+  const stateRef = useRef({
+    focused,
+    chartInteractive,
+    pluginCaptured,
+    activeTabId: resolvedTabId,
+    tabIdx: Math.max(0, allTabs.findIndex((tab) => tab.id === resolvedTabId)),
+    allTabCount: allTabs.length,
+    hideTabs: paneSettings.hideTabs,
+  });
+  stateRef.current = {
+    focused,
+    chartInteractive,
+    pluginCaptured,
+    activeTabId: resolvedTabId,
+    tabIdx: Math.max(0, allTabs.findIndex((tab) => tab.id === resolvedTabId)),
+    allTabCount: allTabs.length,
+    hideTabs: paneSettings.hideTabs,
+  };
+
+  const setChartInteractiveEager = useCallback((value: boolean) => {
+    stateRef.current = { ...stateRef.current, chartInteractive: value };
+    setChartInteractive(value);
+  }, []);
+
+  const handlePluginCapture = useCallback((capturing: boolean) => {
+    stateRef.current = { ...stateRef.current, pluginCaptured: capturing };
+    setPluginCaptured(capturing);
+    dispatch({ type: "SET_INPUT_CAPTURED", captured: capturing });
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (resolvedTabId !== "chart") {
+      setChartInteractive(false);
+    }
+    setPluginCaptured(false);
+    dispatch({ type: "SET_INPUT_CAPTURED", captured: false });
+  }, [resolvedTabId, dispatch]);
+
+  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;
+
+    if (currentState.activeTabId === "chart") {
+      const isEnter = event.name === "enter" || event.name === "return";
+      if (event.name === "escape" && currentState.chartInteractive) {
+        setChartInteractiveEager(false);
+        return;
+      }
+      if (isEnter && !currentState.chartInteractive) {
+        setChartInteractiveEager(true);
+        return;
+      }
+      if (currentState.chartInteractive) return;
+    }
+
+    if (currentState.hideTabs) return;
+
+    const tabs = allTabsRef.current;
+    if (event.name === "h" || event.name === "left") {
+      const nextIndex = Math.max(currentState.tabIdx - 1, 0);
+      setActiveTabId(tabs[nextIndex]!.id);
+    } else if (event.name === "l" || event.name === "right") {
+      const nextIndex = Math.min(currentState.tabIdx + 1, currentState.allTabCount - 1);
+      setActiveTabId(tabs[nextIndex]!.id);
+    }
+  }, [setActiveTabId, setChartInteractiveEager]);
+
+  useKeyboard(handleKeyboard);
+
+  if (!ticker) {
+    const isEmptyFollowCollection = paneInstance?.binding?.kind === "follow" && !!collectionId && collectionTickers.length === 0;
+    const message = isEmptyFollowCollection
+      ? `No tickers in ${collectionName || "this collection"}.`
+      : "No ticker selected.";
+
+    return (
+      <box flexDirection="column" flexGrow={1} paddingX={1}>
+        <EmptyState title={message} />
+      </box>
+    );
+  }
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      {!paneSettings.hideTabs && (
+        <TabBar
+          tabs={allTabs.map((tab) => ({ label: tab.name, value: tab.id }))}
+          activeValue={resolvedTabId}
+          onSelect={setActiveTabId}
+        />
+      )}
+
+      {resolvedTabId === "overview" && <OverviewTab width={width} />}
+      {resolvedTabId === "financials" && <FinancialsTab focused={focused} />}
+      {resolvedTabId === "chart" && (
+        <ChartTab
+          width={width}
+          height={height}
+          focused={focused}
+          interactive={chartInteractive}
+          axisMode={paneSettings.chartAxisMode}
+          onActivate={() => setChartInteractiveEager(true)}
+        />
+      )}
+
+      {activePluginTab && (
+        <activePluginTab.component
+          width={width}
+          height={height}
+          focused={focused}
+          onCapture={handlePluginCapture}
+        />
+      )}
+    </box>
+  );
+}

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

@@ -0,0 +1,83 @@
+import { TextAttributes } from "@opentui/core";
+import type { PaneProps } from "../../../types/plugin";
+import type { Quote } from "../../../types/financials";
+import { quoteSubscriptionTargetFromTicker } from "../../../market-data/request-types";
+import { usePaneTicker } from "../../../state/app-context";
+import { useQuoteStreaming } from "../../../state/use-quote-streaming";
+import { colors, priceColor } from "../../../theme/colors";
+import { formatCurrency, formatPercentRaw } from "../../../utils/format";
+import { getActiveQuoteDisplay } from "../../../utils/market-status";
+import { EmptyState } from "../../../components";
+
+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] : []);
+
+  if (!ticker) {
+    return (
+      <box flexDirection="column" flexGrow={1} paddingX={1}>
+        <EmptyState title="No ticker selected." />
+      </box>
+    );
+  }
+
+  const display = getQuoteMonitorDisplay(financials?.quote);
+  const changeColor = priceColor(display?.change ?? 0);
+  const compact = width < 56;
+  const currency = financials?.quote?.currency ?? ticker.metadata.currency ?? "USD";
+
+  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}
+            </text>
+            <text fg={colors.textDim}>Waiting for quote...</text>
+          </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}>
+                {ticker.metadata.ticker}
+              </text>
+            </box>
+
+            <box flexDirection="column" alignItems={compact ? "flex-start" : "flex-end"}>
+              <text attributes={TextAttributes.BOLD} fg={changeColor}>
+                {formatCurrency(display.price, currency)}
+              </text>
+              <box flexDirection="row" gap={1}>
+                <text fg={changeColor}>{formatPercentRaw(display.changePercent)}</text>
+                <text fg={changeColor}>
+                  {display.change > 0 ? "+" : ""}
+                  {display.change.toFixed(2)}
+                </text>
+              </box>
+            </box>
+          </box>
+        )}
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,132 @@
+import type { PaneSettingsDef, DetailTabDef } from "../../../types/plugin";
+import type { TickerFinancials } from "../../../types/financials";
+import type { TickerRecord } from "../../../types/ticker";
+import type { ChartAxisMode } from "../../../components/chart/chart-types";
+import { getSharedRegistry } from "../../registry";
+
+type DetailTabSummary = { id: string; name: string; order: number };
+
+const CORE_OVERVIEW_TAB: DetailTabSummary = { id: "overview", name: "Overview", order: 10 };
+const CORE_FINANCIALS_TAB: DetailTabSummary = { id: "financials", name: "Financials", order: 20 };
+const CORE_CHART_TAB: DetailTabSummary = { id: "chart", name: "Chart", order: 30 };
+
+export interface TickerDetailPaneSettings {
+  hideTabs: boolean;
+  lockedTabId: string;
+  chartAxisMode: ChartAxisMode;
+}
+
+export function getTickerDetailPaneSettings(
+  settings: Record<string, unknown> | undefined,
+): TickerDetailPaneSettings {
+  return {
+    hideTabs: settings?.hideTabs === true,
+    lockedTabId: typeof settings?.lockedTabId === "string" ? settings.lockedTabId : "overview",
+    chartAxisMode: settings?.chartAxisMode === "percent" ? "percent" : "price",
+  };
+}
+
+export function resolveLockedTabId(
+  settings: TickerDetailPaneSettings,
+  tabs: DetailTabSummary[],
+): string {
+  if (tabs.some((tab) => tab.id === settings.lockedTabId)) {
+    return settings.lockedTabId;
+  }
+  return tabs[0]?.id ?? "overview";
+}
+
+function getAvailableSettingsTabs(): DetailTabSummary[] {
+  const registry = getSharedRegistry();
+  const pluginTabs = registry
+    ? [...registry.detailTabs.values()].map((tab) => ({ id: tab.id, name: tab.name, order: tab.order }))
+    : [];
+
+  return [CORE_OVERVIEW_TAB, CORE_FINANCIALS_TAB, CORE_CHART_TAB, ...pluginTabs]
+    .sort((left, right) => left.order - right.order)
+    .filter((tab, index, allTabs) => allTabs.findIndex((candidate) => candidate.id === tab.id) === index);
+}
+
+export function buildTickerDetailSettingsDef(settings: TickerDetailPaneSettings): PaneSettingsDef {
+  const tabs = getAvailableSettingsTabs();
+
+  return {
+    title: "Detail Pane Settings",
+    fields: [
+      {
+        key: "hideTabs",
+        label: "Hide Tabs",
+        description: "Hide the detail tabs and lock this pane to one view.",
+        type: "toggle" as const,
+      },
+      ...(settings.hideTabs
+        ? [{
+          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 })),
+        }]
+        : []),
+      {
+        key: "chartAxisMode",
+        label: "Chart Y-Axis",
+        description: "Show chart values as raw prices or percent change from the first visible point.",
+        type: "select" as const,
+        options: [
+          { value: "price", label: "Price" },
+          { value: "percent", label: "Percent" },
+        ],
+      },
+    ],
+  };
+}
+
+export function buildQuoteMonitorSettingsDef(): PaneSettingsDef {
+  return {
+    title: "Quote Monitor Settings",
+    fields: [
+      {
+        key: "symbol",
+        label: "Ticker",
+        description: "Set the fixed ticker symbol for this quote monitor.",
+        type: "text",
+        placeholder: "AAPL",
+      },
+    ],
+  };
+}
+
+function hasStatementFinancials(financials: TickerFinancials | null | undefined): boolean {
+  return (financials?.annualStatements.length ?? 0) > 0 || (financials?.quarterlyStatements.length ?? 0) > 0;
+}
+
+export function buildVisibleDetailTabs(
+  pluginTabs: DetailTabDef[],
+  ticker: TickerRecord | null,
+  financials: TickerFinancials | null | undefined,
+  options: {
+    hasIbkrGatewayTrading: boolean;
+    hasOptionsChain: boolean;
+  },
+): DetailTabSummary[] {
+  const tabs: DetailTabSummary[] = [CORE_OVERVIEW_TAB];
+  if (hasStatementFinancials(financials)) {
+    tabs.push(CORE_FINANCIALS_TAB);
+  }
+  tabs.push(CORE_CHART_TAB);
+
+  for (const tab of pluginTabs) {
+    if (tab.isVisible && !tab.isVisible({
+      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 });
+  }
+
+  return tabs.sort((left, right) => left.order - right.order);
+}