gloomberb 0.9.9 → 0.10.0

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

@@ -28,9 +28,11 @@ import { PaneFooterBar, PaneFooterProvider } from "../../../components/layout/pa
 import type { PluginRegistry } from "../../registry";
 import { setSharedRegistryForTests } from "../../registry";
 import { PluginRenderProvider } from "../../runtime";
-import { tickerDetailPlugin } from ".";
+import { tickerDetailModule } from ".";
+import { chartComposerModule } from "../chart-composer";
 import { FinancialsTab } from "./financials/tab";
 import { isUsEquityTicker } from "../../../utils/sec";
+import { MemoryPluginPersistence } from "../../../test-support/plugin-persistence";
 
 const TEST_PANE_ID = "ticker-research:test";
 
@@ -43,7 +45,7 @@ let sharedCoordinator: MarketDataCoordinator | null = null;
 const runtime = createTestPluginRuntime();
 const TICKER_TAB_SETTLE_MS = 160;
 
-const DetailPane = tickerDetailPlugin.panes![0]!.component as (props: {
+const DetailPane = tickerDetailModule.panes![0]!.component as (props: {
   paneId: string;
   paneType: string;
   focused: boolean;
@@ -161,18 +163,18 @@ function setOptionsProvider(provider: DataProvider | undefined): void {
   setSharedMarketDataCoordinator(sharedCoordinator);
 }
 
-function makeRegistry(options: { stubFundamentalGraphs?: boolean } = {}): PluginRegistry {
+function makeRegistry(): PluginRegistry {
   const stubTab = (_props: { width: number; height: number; focused: boolean; onCapture: (capturing: boolean) => void }) => (
     <text>stub</text>
   );
   const tickerResearchTabs = new Map<string, TickerResearchTabDef>();
-  tickerDetailPlugin.setup?.({
+  tickerDetailModule.setup?.({
+    registerTickerResearchTab: (tab: TickerResearchTabDef) => tickerResearchTabs.set(tab.id, tab),
+  } as any);
+  chartComposerModule.setup?.({
+    persistence: new MemoryPluginPersistence(),
     registerTickerResearchTab: (tab: TickerResearchTabDef) => tickerResearchTabs.set(tab.id, tab),
   } as any);
-  if (options.stubFundamentalGraphs) {
-    const tab = tickerResearchTabs.get("fundamental-graphs");
-    if (tab) tickerResearchTabs.set(tab.id, { ...tab, component: stubTab });
-  }
   for (const tab of [
     ["ibkr-trade", {
       id: "ibkr-trade",
@@ -211,6 +213,7 @@ function createDetailConfig(symbol: string, brokerInstances: BrokerInstanceConfi
       binding: { kind: "fixed" as const, symbol },
     }],
     floating: [],
+    detached: [],
   };
 
   return {
@@ -265,7 +268,7 @@ function DetailHarness({
     <AppContext value={{ state, dispatch }}>
       <PaneInstanceProvider paneId={TEST_PANE_ID}>
         <text>{`active:${state.paneState[TEST_PANE_ID]?.activeTabId ?? ""}`}</text>
-        <PluginRenderProvider pluginId={tickerDetailPlugin.id} runtime={runtime}>
+        <PluginRenderProvider pluginId="ticker-research" runtime={runtime}>
           <DetailPane
             paneId={TEST_PANE_ID}
             paneType={TICKER_RESEARCH_PANE_ID}
@@ -513,7 +516,7 @@ describe("TickerResearchPane", () => {
   });
 
   test("lets ticker detail tab arrows leave the embedded financials tab", async () => {
-    setSharedRegistryForTests(makeRegistry({ stubFundamentalGraphs: true }));
+    setSharedRegistryForTests(makeRegistry());
     setOptionsProvider(createProvider(false));
 
     testSetup = await testRender(
@@ -538,7 +541,7 @@ describe("TickerResearchPane", () => {
     await flushFrame();
 
     await settleTickerTabCommit();
-    expect(detailHarnessState?.paneState[TEST_PANE_ID]?.activeTabId).toBe("fundamental-graphs");
+    expect(detailHarnessState?.paneState[TEST_PANE_ID]?.activeTabId).toBe("chart");
 
     await act(async () => {
       testSetup!.mockInput.pressArrow("left");
@@ -550,130 +553,6 @@ describe("TickerResearchPane", () => {
     expect(detailHarnessState?.paneState[TEST_PANE_ID]?.activeTabId).toBe("financials");
   });
 
-  test("shows metric tabs for fundamental graph charts and defaults them to quarterly data", async () => {
-    setSharedRegistryForTests(makeRegistry());
-    setOptionsProvider(createProvider(false));
-
-    testSetup = await testRender(
-      <DetailHarness
-        config={createDetailConfig("AAPL")}
-        ticker={makeTicker("AAPL")}
-        financials={makeFinancials({
-          annualStatements: [{ date: "2024-12-31", totalRevenue: 1_000 }],
-          quarterlyStatements: [
-            { date: "2025-03-31", totalRevenue: 200 },
-            { date: "2025-06-30", totalRevenue: 250 },
-          ],
-        })}
-        activeTabId="fundamental-graphs"
-        height={28}
-      />,
-      { width: 90, height: 28 },
-    );
-
-    await flushFrame();
-    const frame = testSetup.captureCharFrame();
-    expect(frame).toContain("Revenue");
-    expect(frame).toContain("Gross Profit");
-    expect(frame).not.toContain("Revenue (quarterly)");
-    expect(frame).not.toContain("[g]roup");
-    expect(frame).toContain("2025-03-31");
-    expect(frame).toContain("2025-06-30");
-    expect(frame.indexOf("2025-06-30")).toBeLessThan(frame.indexOf("2025-03-31"));
-  });
-
-  test("captures arrows for graph metric tabs between enter and escape", async () => {
-    setSharedRegistryForTests(makeRegistry());
-    setOptionsProvider(createProvider(false));
-
-    testSetup = await testRender(
-      <DetailHarness
-        config={createDetailConfig("AAPL")}
-        ticker={makeTicker("AAPL")}
-        financials={makeFinancials({
-          annualStatements: [{ date: "2024-12-31", totalRevenue: 1_000, grossProfit: 400 }],
-          quarterlyStatements: [
-            { date: "2025-03-31", totalRevenue: 200, grossProfit: 80 },
-            { date: "2025-06-30", totalRevenue: 250, grossProfit: 120 },
-          ],
-        })}
-        activeTabId="fundamental-graphs"
-        height={28}
-      />,
-      { width: 90, height: 28 },
-    );
-
-    await flushFrame();
-    expect(detailHarnessState?.paneState[TEST_PANE_ID]?.activeTabId).toBe("fundamental-graphs");
-
-    await act(async () => {
-      testSetup!.mockInput.pressEnter();
-      await testSetup!.renderOnce();
-    });
-    await flushFrame();
-
-    await act(async () => {
-      testSetup!.mockInput.pressArrow("right");
-      await testSetup!.renderOnce();
-    });
-    await flushFrame();
-
-    expect(detailHarnessState?.paneState[TEST_PANE_ID]?.pluginState?.["ticker-detail"]?.detailMetric).toBe("grossProfit");
-    expect(detailHarnessState?.paneState[TEST_PANE_ID]?.activeTabId).toBe("fundamental-graphs");
-
-    await emitKeypress({ name: "escape", sequence: "\u001b" });
-    expect(detailHarnessState?.inputCaptured).toBe(false);
-
-    await act(async () => {
-      testSetup!.mockInput.pressArrow("right");
-      await testSetup!.renderOnce();
-    });
-    await flushFrame();
-
-    await settleTickerTabCommit();
-    expect(detailHarnessState?.paneState[TEST_PANE_ID]?.activeTabId).toBe("chart");
-  });
-
-  test("clicking graph content focuses metric tabs for arrow navigation", async () => {
-    setSharedRegistryForTests(makeRegistry());
-    setOptionsProvider(createProvider(false));
-
-    testSetup = await testRender(
-      <DetailHarness
-        config={createDetailConfig("AAPL")}
-        ticker={makeTicker("AAPL")}
-        financials={makeFinancials({
-          annualStatements: [{ date: "2024-12-31", totalRevenue: 1_000, grossProfit: 400 }],
-          quarterlyStatements: [
-            { date: "2025-03-31", totalRevenue: 200, grossProfit: 80 },
-            { date: "2025-06-30", totalRevenue: 250, grossProfit: 120 },
-          ],
-        })}
-        activeTabId="fundamental-graphs"
-        height={28}
-      />,
-      { width: 90, height: 28 },
-    );
-
-    await flushFrame();
-
-    await act(async () => {
-      await testSetup!.mockMouse.click(24, 6);
-      await testSetup!.renderOnce();
-    });
-    await flushFrame();
-    expect(detailHarnessState?.inputCaptured).toBe(true);
-
-    await act(async () => {
-      testSetup!.mockInput.pressArrow("right");
-      await testSetup!.renderOnce();
-    });
-    await flushFrame();
-
-    expect(detailHarnessState?.paneState[TEST_PANE_ID]?.pluginState?.["ticker-detail"]?.detailMetric).toBe("grossProfit");
-    expect(detailHarnessState?.paneState[TEST_PANE_ID]?.activeTabId).toBe("fundamental-graphs");
-  });
-
   test("shows Trade when an IBKR gateway profile exists", async () => {
     setSharedRegistryForTests(makeRegistry());
     setOptionsProvider(createProvider(false));
@@ -818,7 +697,7 @@ describe("TickerResearchPane", () => {
 
     await flushFrame();
     const frame = testSetup.captureCharFrame();
-    expect(receivedHeight).toBe(17);
+    expect(Number(receivedHeight)).toBe(17);
     expect(frame).toContain("height:17");
   });
 

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

@@ -1,15 +1,8 @@
-import type { GloomPlugin } from "../../../types/plugin";
+import type { PluginModule } from "../plugin-module";
 import type { TickerFinancials } from "../../../types/financials";
 import { TICKER_RESEARCH_PANE_ID } from "../../../types/config";
 import { normalizeTickerInput } from "../../../tickers/search";
 import { createTickerSurfacePaneTemplate } from "../shared/ticker-surface";
-import { TickerChartPane, ChartResearchTab } from "./chart-pane";
-import {
-  buildGraphPaneSettingsDef,
-  createGraphPaneTemplate,
-  FundamentalGraphPane,
-  FundamentalGraphsResearchTab,
-} from "./data-panes/fundamental-graph";
 import { FinancialAnalysisPane, FinancialsResearchTab } from "./financials/pane";
 import { HistoricalPricesPane } from "./data-panes/historical-prices";
 import {
@@ -22,7 +15,6 @@ import { QuoteMonitorPane } from "./quote-monitor";
 import {
   buildQuoteMonitorSettingsDef,
   buildQuoteMonitorPaneTitle,
-  buildTickerChartSettingsDef,
   buildTickerResearchSettingsDef,
   getTickerResearchPaneSettings,
 } from "./settings";
@@ -32,11 +24,7 @@ function hasStatementFinancials(financials: TickerFinancials | null | undefined)
   return (financials?.annualStatements.length ?? 0) > 0 || (financials?.quarterlyStatements.length ?? 0) > 0;
 }
 
-export const tickerDetailPlugin: GloomPlugin = {
-  id: "ticker-detail",
-  name: "Ticker Research",
-  version: "1.0.0",
-
+export const tickerDetailModule: PluginModule = {
   setup(ctx) {
     ctx.registerTickerResearchTab({
       id: "overview",
@@ -52,25 +40,6 @@ export const tickerDetailPlugin: GloomPlugin = {
       component: FinancialsResearchTab,
       isVisible: ({ financials }) => hasStatementFinancials(financials),
     });
-    ctx.registerTickerResearchTab({
-      id: "chart",
-      name: "Chart",
-      order: 30,
-      component: ChartResearchTab,
-      isVisible: ({ ticker }) => !!ticker,
-    });
-    ctx.registerTickerResearchTab({
-      id: "fundamental-graphs",
-      name: "Graphs",
-      order: 28,
-      component: FundamentalGraphsResearchTab,
-      isVisible: ({ ticker, financials }) => !!ticker && (
-        (financials?.annualStatements.length ?? 0) > 0
-        || (financials?.quarterlyStatements.length ?? 0) > 0
-        || !!financials?.fundamentals
-        || !!financials?.quote?.marketCap
-      ),
-    });
   },
 
   panes: [
@@ -92,16 +61,6 @@ export const tickerDetailPlugin: GloomPlugin = {
       defaultMode: "floating",
       defaultFloatingSize: { width: 98, height: 30 },
     },
-    {
-      id: "ticker-chart",
-      name: "Chart",
-      icon: "G",
-      component: TickerChartPane,
-      defaultPosition: "right",
-      defaultMode: "floating",
-      defaultFloatingSize: { width: 92, height: 30 },
-      settings: () => buildTickerChartSettingsDef(),
-    },
     {
       id: "quote-monitor",
       name: "Quote Monitor",
@@ -121,16 +80,6 @@ export const tickerDetailPlugin: GloomPlugin = {
       defaultMode: "floating",
       defaultFloatingSize: { width: 92, height: 26 },
     },
-    {
-      id: "fundamental-graph",
-      name: "Fundamental Graph",
-      icon: "G",
-      component: FundamentalGraphPane,
-      defaultPosition: "right",
-      defaultMode: "floating",
-      defaultFloatingSize: { width: 82, height: 22 },
-      settings: buildGraphPaneSettingsDef(),
-    },
     {
       id: "provider-search-results",
       name: "Provider Search",
@@ -206,20 +155,6 @@ export const tickerDetailPlugin: GloomPlugin = {
       keywords: ["historical", "prices", "hp", "ohlc", "volume"],
       shortcut: "HP",
     }),
-    createGraphPaneTemplate({
-      id: "fundamental-graph-pane",
-      label: "Fundamental Graph",
-      description: "Graph statement metrics for one or more tickers.",
-      shortcut: "GF",
-      chartKind: "fundamental",
-    }),
-    createGraphPaneTemplate({
-      id: "valuation-graph-pane",
-      label: "Valuation Graph",
-      description: "Graph valuation multiples for one or more tickers.",
-      shortcut: "GE",
-      chartKind: "valuation",
-    }),
     createProviderSearchPaneTemplate(),
     createTickerSurfacePaneTemplate({
       id: "financial-analysis-pane",
@@ -230,31 +165,5 @@ export const tickerDetailPlugin: GloomPlugin = {
       shortcut: "FA",
       titlePrefix: "FA",
     }),
-    createTickerSurfacePaneTemplate({
-      id: "graph-price-pane",
-      paneId: "ticker-chart",
-      label: "Graph Price",
-      description: "Open a price chart for a ticker.",
-      keywords: ["gp", "graph", "price", "chart"],
-      shortcut: "GP",
-      viewKey: "price",
-      settings: () => ({
-        chartRangePreset: "5Y",
-        chartResolution: "auto",
-      }),
-    }),
-    createTickerSurfacePaneTemplate({
-      id: "graph-intraday-price-pane",
-      paneId: "ticker-chart",
-      label: "Intraday Price Graph",
-      description: "Open an intraday price chart for a ticker.",
-      keywords: ["gip", "intraday", "graph", "chart"],
-      shortcut: "GIP",
-      viewKey: "intraday",
-      settings: () => ({
-        chartRangePreset: "1D",
-        chartResolution: "1m",
-      }),
-    }),
   ],
 };

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

@@ -2,6 +2,7 @@ import { Box, Text, TextAttributes } from "../../../../ui";
 import { colors, priceColor } from "../../../../theme/colors";
 import { displayWidth, formatNumber, padTo } from "../../../../utils/format";
 import { formatMarketPriceWithCurrency } from "../../../../market-data/market/format";
+import { t } from "../../../../i18n";
 import type { Quote } from "../../../../types/financials";
 import type { PositionTableRow, StatField } from "./types";
 
@@ -115,9 +116,9 @@ export function QuoteBook({ quote, assetCategory, width }: { quote: Quote; asset
 
   return (
     <Box flexDirection="column" width={width} flexShrink={0}>
-      <BookRow label="Bid" value={bidText} width={width} valueColor={colors.borderFocused} />
-      <BookRow label="Ask" value={askText} width={width} valueColor={colors.negative} />
-      <BookRow label="Spr" value={spreadText} width={width} valueColor={colors.textDim} />
+      <BookRow label={t("Bid")} value={bidText} width={width} valueColor={colors.borderFocused} />
+      <BookRow label={t("Ask")} value={askText} width={width} valueColor={colors.negative} />
+      <BookRow label={t("Spr")} value={spreadText} width={width} valueColor={colors.textDim} />
     </Box>
   );
 }
@@ -154,7 +155,7 @@ export function StatGrid({ fields, width }: { fields: StatField[]; width: number
                 {j > 0 && <Box width={STAT_COLUMN_GAP} />}
                 <Box width={colWidth} flexDirection="row">
                   <Box width={labelWidth} overflow="hidden">
-                    <Text fg={colors.textDim}>{field.label}</Text>
+                    <Text fg={colors.textDim}>{t(field.label)}</Text>
                   </Box>
                   <Box flexDirection="row" width={valueWidth} justifyContent="flex-end" overflow="hidden">
                     <Text fg={field.valueColor ?? colors.text}>{field.value}</Text>
@@ -219,7 +220,7 @@ export function PositionTable({ rows, width }: { rows: PositionTableRow[]; width
         {columns.map((column, index) => (
           <Box key={column.key} flexDirection="row">
             {index > 0 && <Box width={POSITION_COLUMN_GAP} />}
-            <Text fg={colors.textDim}>{padTo(column.label, column.width, column.align)}</Text>
+            <Text fg={colors.textDim}>{padTo(t(column.label), column.width, column.align)}</Text>
           </Box>
         ))}
       </Box>

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

@@ -2,6 +2,7 @@ import { Box, ScrollBox, Text, useUiCapabilities } from "../../../ui";
 import { TextAttributes } from "../../../ui";
 import { useViewport } from "../../../react/input";
 import { useFxRatesMap } from "../../../market-data/hooks";
+import { t } from "../../../i18n";
 import { useAppSelector } from "../../../state/app/context";
 import { colors, priceColor } from "../../../theme/colors";
 import { convertCurrency, formatPercentRaw } from "../../../utils/format";
@@ -14,7 +15,12 @@ import {
 } from "../../../market-data/market/status";
 import { selectEffectiveExchangeRates } from "../../../utils/exchange-rate-map";
 import { EmptyState } from "../../../components";
-import { ResolvedStockChart } from "../../../components/chart/stock-chart";
+import {
+  CompositeChart,
+  pricePointsToResolvedSeries,
+} from "../../../components/chart/composite";
+import { resolveExchangeTimeZone } from "../../../utils/exchanges";
+import { appendLiveQuotePoint } from "../../../components/chart/core/data";
 import { PriceReturnStrip } from "../../../components/price-performance";
 import {
   appendQuoteToPriceReturnHistory,
@@ -45,7 +51,7 @@ export function OverviewTab({
   const { width: termWidth } = useViewport();
   const { fractionalViewport = false } = useUiCapabilities();
 
-  if (!ticker) return <EmptyState title="No ticker selected." />;
+  if (!ticker) return <EmptyState title={t("No ticker selected.")} />;
 
   const quote = financials?.quote;
   const fundamentals = financials?.fundamentals;
@@ -83,6 +89,22 @@ export function OverviewTab({
   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 chartHistory = appendLiveQuotePoint(financials?.priceHistory ?? [], quote);
+  const chartDelta = (chartHistory.at(-1)?.close ?? 0) - (chartHistory[0]?.close ?? 0);
+  const chartTimeZone = resolveExchangeTimeZone(
+    ticker.metadata.exchange || quote?.listingExchangeName || quote?.exchangeName,
+  );
+  const priceSeries = pricePointsToResolvedSeries(chartHistory, {
+    id: `${ticker.metadata.ticker}:price`,
+    label: `${ticker.metadata.ticker} Price`,
+    color: priceColor(chartDelta),
+    unit: quoteCurrency,
+    style: "area",
+    axis: "right",
+    panelId: "price",
+    providerId: quote?.provenance?.price?.providerId ?? quote?.providerId,
+    timeBasis: chartTimeZone ? { kind: "market", timeZone: chartTimeZone } : undefined,
+  });
   const hasBidAsk = quote?.bid != null || quote?.ask != null;
   const quoteBookInline = hasBidAsk && contentWidth >= 68;
   const quoteBookWidth = quoteBookInline ? Math.min(32, Math.max(24, Math.floor(contentWidth * 0.3))) : Math.min(contentWidth, 32);
@@ -141,7 +163,7 @@ export function OverviewTab({
               )}
               {quote?.marketState && (
                 <Text fg={marketStateColor(quote.marketState)}>
-                  {" "}{marketStateLabel(quote.marketState)}
+                  {" "}{t(marketStateLabel(quote.marketState))}
                 </Text>
               )}
             </Box>
@@ -158,7 +180,7 @@ export function OverviewTab({
             )}
             {quote && (quote.marketState === "PRE" || quote.marketState === "PREPRE") && quote.preMarketPrice != null && (
               <Box flexDirection="row" gap={2}>
-                <Text fg={colors.textDim}>Pre-Market:</Text>
+                <Text fg={colors.textDim}>{t("Pre-Market")}:</Text>
                 <Text fg={priceColor(quote.preMarketChange ?? 0)}>
                   {formatMarketPriceWithCurrency(quote.preMarketPrice, quote.currency, { assetCategory: ticker.metadata.assetCategory })}
                 </Text>
@@ -169,7 +191,7 @@ export function OverviewTab({
             )}
             {quote && (quote.marketState === "POST" || quote.marketState === "POSTPOST") && quote.postMarketPrice != null && (
               <Box flexDirection="row" gap={2}>
-                <Text fg={colors.textDim}>After-Hours:</Text>
+                <Text fg={colors.textDim}>{t("After-Hours")}:</Text>
                 <Text fg={priceColor(quote.postMarketChange ?? 0)}>
                   {formatMarketPriceWithCurrency(quote.postMarketPrice, quote.currency, { assetCategory: ticker.metadata.assetCategory })}
                 </Text>
@@ -218,33 +240,35 @@ export function OverviewTab({
         )}
 
         {hasHistory && (
-          <ResolvedStockChart
+          <CompositeChart
             width={chartWidth}
             height={10}
             focused={false}
-            compact
-            ticker={ticker}
-            financials={financials}
+            interactive={false}
+            series={[priceSeries]}
+            panels={[{ id: "price" }]}
+            axisWidth={8}
+            showLegend={false}
           />
         )}
 
         {hasPerformance && (
           <Box flexDirection="column">
-            <SectionHeader title="Price Return" />
+            <SectionHeader title={t("Price Return")} />
             <PriceReturnStrip fields={performanceFields} width={contentWidth} />
           </Box>
         )}
 
         {stats.length > 0 && (
           <Box flexDirection="column">
-            <SectionHeader title="Fundamentals" />
+            <SectionHeader title={t("Fundamentals")} />
             <StatGrid fields={stats} width={contentWidth} />
           </Box>
         )}
 
         {positionRows.length > 0 && (
           <Box flexDirection="column">
-            <SectionHeader title="Positions" />
+            <SectionHeader title={t("Positions")} />
             <PositionTable rows={positionRows} width={contentWidth} />
           </Box>
         )}
@@ -254,19 +278,19 @@ export function OverviewTab({
           <Box flexDirection="row" height={1} gap={3}>
             {ticker.metadata.assetCategory && (
               <Box flexDirection="row">
-                <Text fg={colors.textDim}>Type: </Text>
+                <Text fg={colors.textDim}>{t("Type")}: </Text>
                 <Text fg={colors.text}>{ticker.metadata.assetCategory}</Text>
               </Box>
             )}
             {sector && (
               <Box flexDirection="row">
-                <Text fg={colors.textDim}>Sector: </Text>
+                <Text fg={colors.textDim}>{t("Sector")}: </Text>
                 <Text fg={colors.text}>{sector}</Text>
               </Box>
             )}
             {industry && (
               <Box flexDirection="row">
-                <Text fg={colors.textDim}>Industry: </Text>
+                <Text fg={colors.textDim}>{t("Industry")}: </Text>
                 <Text fg={colors.text}>{industry}</Text>
               </Box>
             )}
@@ -276,7 +300,7 @@ export function OverviewTab({
         {/* ISIN */}
         {ticker.metadata.isin && (
           <Box flexDirection="row" height={1}>
-            <Text fg={colors.textDim}>ISIN: </Text>
+            <Text fg={colors.textDim}>{t("ISIN")}: </Text>
             <Text fg={colors.text}>{ticker.metadata.isin}</Text>
           </Box>
         )}
@@ -284,7 +308,7 @@ export function OverviewTab({
         {/* Description — last, collapsed */}
         {description && (
           <Box flexDirection="column" width={contentWidth}>
-            <SectionHeader title="Description" />
+            <SectionHeader title={t("Description")} />
             <Text fg={colors.text} width={contentWidth} wrapMode="word" wrapText>{description}</Text>
           </Box>
         )}

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

@@ -1,6 +1,7 @@
 import { Box } from "../../../ui";
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import type { PaneProps, TickerResearchTabDef } from "../../../types/plugin";
+import { t, tf } from "../../../i18n";
 import { quoteSubscriptionTargetFromTicker } from "../../../market-data/request-types";
 import {
   useAppDispatch,
@@ -159,8 +160,8 @@ export function TickerResearchPane({ focused, width, height }: PaneProps) {
   if (!ticker) {
     const isEmptyFollowCollection = paneInstance?.binding?.kind === "follow" && !!collectionId && collectionTickerCount === 0;
     const message = isEmptyFollowCollection
-      ? `No tickers in ${collectionName || "this collection"}.`
-      : "No ticker selected.";
+      ? tf("No tickers in {name}.", { name: collectionName || t("this collection") })
+      : t("No ticker selected.");
 
     return (
       <Box flexDirection="column" flexGrow={1} paddingX={1}>
@@ -173,7 +174,7 @@ export function TickerResearchPane({ focused, width, height }: PaneProps) {
     <Box flexDirection="column" flexGrow={1} flexBasis={0} overflow="hidden">
       {!paneSettings.hideTabs && (
         <Tabs
-          tabs={allTabs.map((tab) => ({ label: tab.name, value: tab.id }))}
+          tabs={allTabs.map((tab) => ({ label: t(tab.name), value: tab.id }))}
           activeValue={resolvedTabId}
           onSelect={setActiveTabId}
           focused={focused && !pluginCaptured}

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

@@ -152,7 +152,7 @@ function createQuoteMonitorHarness(options: {
   return (
     <AppContext value={{ state, dispatch: () => {} }}>
       <PaneInstanceProvider paneId="quote-monitor:test">
-        <PluginRenderProvider pluginId="ticker-detail" runtime={makeRuntime({
+        <PluginRenderProvider pluginId="ticker-research" runtime={makeRuntime({
           pinCalls: options.pinCalls,
           settingsCalls: options.settingsCalls,
         })}>