gloomberb 0.6.1 → 0.7.1

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

@@ -7,8 +7,8 @@ import {
   type DataTableColumn,
   type DataTableKeyEvent,
 } from "../../../components";
-import type { AnalystResearchData, CorporateActionsData, TickerFinancials } from "../../../types/financials";
-import type { DetailTabProps, GloomPlugin, PaneProps } from "../../../types/plugin";
+import type { AnalystRatingRecord, AnalystResearchData, CorporateActionsData, TickerFinancials } from "../../../types/financials";
+import type { GloomPlugin, PaneProps } from "../../../types/plugin";
 import { usePaneInstance, usePaneTicker } from "../../../state/app-context";
 import { blendHex, colors, priceColor } from "../../../theme/colors";
 import { formatCompact, formatCurrency, formatNumber, formatPercent, formatPercentRaw } from "../../../utils/format";
@@ -110,6 +110,32 @@ function ratingActionColor(action: string | undefined): string {
   return colors.textDim;
 }
 
+function formatPriceTarget(value: number | undefined, currency: string): string {
+  if (value == null) return "-";
+  return formatCurrency(value, currency)
+    .replace(/\.00\b/, "")
+    .replace(/(\.\d)0\b/, "$1");
+}
+
+function formatRatingTarget(row: AnalystResearchData["ratings"][number], currency: string): string {
+  const current = row.currentPriceTarget;
+  const prior = row.priorPriceTarget;
+  if (current == null && prior == null) return "-";
+  if (current == null) return ` ${formatPriceTarget(prior, currency)}`;
+  if (prior == null) return ` ${formatPriceTarget(current, currency)}`;
+  return ` ${formatPriceTarget(prior, currency)} → ${formatPriceTarget(current, currency)}`;
+}
+
+function ratingTargetDelta(row: AnalystResearchData["ratings"][number]): number | null {
+  if (row.currentPriceTarget == null || row.priorPriceTarget == null) return null;
+  return row.currentPriceTarget - row.priorPriceTarget;
+}
+
+function ratingTargetBackground(delta: number | null): string | undefined {
+  if (delta == null || delta === 0) return undefined;
+  return blendHex(colors.bg, delta > 0 ? colors.positive : colors.negative, 0.42);
+}
+
 function AnalystSummary({ data, width }: { data: AnalystResearchData | null; width: number }) {
   const target = data?.priceTarget;
   const upside = targetUpside(target);
@@ -170,26 +196,135 @@ function AnalystSummary({ data, width }: { data: AnalystResearchData | null; wid
   );
 }
 
-type RatingColumnId = "date" | "firm" | "action" | "current" | "prior";
+export type RatingColumnId = "date" | "firm" | "action" | "current" | "target" | "prior";
 type RatingColumn = DataTableColumn & { id: RatingColumnId };
+export type SortDirection = "asc" | "desc";
+
+export interface RatingSortPreference {
+  columnId: RatingColumnId;
+  direction: SortDirection;
+}
+
+const DEFAULT_RATING_SORT: RatingSortPreference = {
+  columnId: "date",
+  direction: "desc",
+};
+
+const DEFAULT_RATING_SORT_DIRECTIONS: Record<RatingColumnId, SortDirection> = {
+  date: "desc",
+  firm: "asc",
+  action: "asc",
+  current: "asc",
+  target: "desc",
+  prior: "asc",
+};
 
 const RATING_COLUMNS: RatingColumn[] = [
   { id: "date", label: "DATE", width: 10, align: "left" },
-  { id: "firm", label: "FIRM", width: 24, align: "left" },
-  { id: "action", label: "ACTION", width: 11, align: "left" },
-  { id: "current", label: "RATING", width: 14, align: "left" },
-  { id: "prior", label: "PRIOR", width: 14, align: "left" },
+  { id: "firm", label: "FIRM", width: 20, align: "left" },
+  { id: "action", label: "ACTION", width: 10, align: "left" },
+  { id: "current", label: "RATING", width: 13, align: "left" },
+  { id: "target", label: "TARGET", width: 13, align: "left" },
+  { id: "prior", label: "PRIOR", width: 13, align: "left" },
 ];
 
+function normalizedText(value: string | undefined): string | null {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed.toLocaleLowerCase() : null;
+}
+
+function ratingTargetSortValue(row: AnalystRatingRecord): number | null {
+  return row.currentPriceTarget ?? row.priorPriceTarget ?? null;
+}
+
+function ratingSortValue(row: AnalystRatingRecord, columnId: RatingColumnId): string | number | null {
+  switch (columnId) {
+    case "date":
+      return normalizedText(row.date);
+    case "firm":
+      return normalizedText(row.firm);
+    case "action":
+      return normalizedText(row.action);
+    case "current":
+      return normalizedText(row.current);
+    case "target":
+      return ratingTargetSortValue(row);
+    case "prior":
+      return normalizedText(row.prior);
+  }
+}
+
+function compareSortValues(
+  left: string | number | null,
+  right: string | number | null,
+  direction: SortDirection,
+): number {
+  if (left == null && right == null) return 0;
+  if (left == null) return 1;
+  if (right == null) return -1;
+
+  const comparison = typeof left === "string" && typeof right === "string"
+    ? left.localeCompare(right)
+    : Number(left) - Number(right);
+  return direction === "asc" ? comparison : -comparison;
+}
+
+export function sortRatingRows<T extends AnalystRatingRecord>(
+  rows: readonly T[],
+  preference: RatingSortPreference,
+): T[] {
+  return rows
+    .map((row, index) => ({ row, index }))
+    .sort((left, right) => {
+      const primary = compareSortValues(
+        ratingSortValue(left.row, preference.columnId),
+        ratingSortValue(right.row, preference.columnId),
+        preference.direction,
+      );
+      if (primary !== 0) return primary;
+
+      const dateTieBreak = preference.columnId === "date"
+        ? 0
+        : compareSortValues(
+          ratingSortValue(left.row, "date"),
+          ratingSortValue(right.row, "date"),
+          "desc",
+        );
+      if (dateTieBreak !== 0) return dateTieBreak;
+
+      return left.index - right.index;
+    })
+    .map((entry) => entry.row);
+}
+
+export function nextRatingSortPreference(
+  current: RatingSortPreference,
+  columnId: string,
+): RatingSortPreference {
+  const typedColumnId = columnId as RatingColumnId;
+  if (current.columnId !== typedColumnId) {
+    return {
+      columnId: typedColumnId,
+      direction: DEFAULT_RATING_SORT_DIRECTIONS[typedColumnId] ?? "asc",
+    };
+  }
+  return {
+    columnId: typedColumnId,
+    direction: current.direction === "asc" ? "desc" : "asc",
+  };
+}
+
 function AnalystResearchView({ focused, width, height }: { focused: boolean; width: number; height: number }) {
   const dataProvider = useAssetData();
   const { symbol, exchange } = useSymbolBinding();
+  const [sortPreference, setSortPreference] = useState<RatingSortPreference>(DEFAULT_RATING_SORT);
   const loader = useCallback((nextSymbol: string, nextExchange: string, forceRefresh: boolean) => {
     if (!dataProvider?.getAnalystResearch) throw new Error("Analyst data unavailable");
     return dataProvider.getAnalystResearch(nextSymbol, nextExchange, forceRefresh ? { cacheMode: "refresh" } : undefined);
   }, [dataProvider]);
   const { data, loading, error, reload } = useTickerRequest<AnalystResearchData>(loader, symbol, exchange);
-  const rows = data?.ratings ?? [];
+  const rows = useMemo(() => sortRatingRows(data?.ratings ?? [], sortPreference), [data?.ratings, sortPreference]);
+  const ratingCurrency = data?.priceTarget?.currency ?? data?.currency ?? "USD";
 
   const renderCell = useCallback((
     row: AnalystResearchData["ratings"][number],
@@ -207,10 +342,20 @@ function AnalystResearchView({ focused, width, height }: { focused: boolean; wid
         return { text: row.action ?? "-", color: selectedColor ?? ratingActionColor(row.action) };
       case "current":
         return { text: row.current ?? "-", color: selectedColor ?? colors.text };
+      case "target": {
+        const delta = ratingTargetDelta(row);
+        const hasTarget = row.currentPriceTarget != null || row.priorPriceTarget != null;
+        return {
+          text: formatRatingTarget(row, ratingCurrency),
+          color: selectedColor ?? (hasTarget ? colors.textBright : colors.textDim),
+          backgroundColor: rowState.selected ? undefined : ratingTargetBackground(delta),
+          attributes: hasTarget ? TextAttributes.BOLD : undefined,
+        };
+      }
       case "prior":
         return { text: row.prior ?? "-", color: selectedColor ?? colors.textDim };
     }
-  }, []);
+  }, [ratingCurrency]);
 
   const handleKeyDown = useCallback((event: DataTableKeyEvent) => {
     if (event.name !== "r") return false;
@@ -219,6 +364,9 @@ function AnalystResearchView({ focused, width, height }: { focused: boolean; wid
     reload();
     return true;
   }, [reload]);
+  const handleHeaderClick = useCallback((columnId: string) => {
+    setSortPreference((current) => nextRatingSortPreference(current, columnId));
+  }, []);
 
   usePaneFooter("analyst-research", () => ({
     info: [
@@ -237,15 +385,14 @@ function AnalystResearchView({ focused, width, height }: { focused: boolean; wid
       onRootKeyDown={handleKeyDown}
       columns={RATING_COLUMNS}
       items={rows}
-      sortColumnId={null}
-      sortDirection="desc"
-      onHeaderClick={() => {}}
+      sortColumnId={sortPreference.columnId}
+      sortDirection={sortPreference.direction}
+      onHeaderClick={handleHeaderClick}
       getItemKey={(row, index) => `${row.date}:${row.firm}:${index}`}
       isSelected={() => false}
       onSelect={() => {}}
       renderCell={renderCell}
       emptyStateTitle={loading ? "Loading analyst data..." : error ?? "No analyst data"}
-      showHorizontalScrollbar={false}
     />
   );
 }
@@ -609,22 +756,6 @@ function RelativeValuationPane({ focused, width, height }: PaneProps) {
   );
 }
 
-function ResearchPane({ focused, width, height }: PaneProps) {
-  return <AnalystResearchView focused={focused} width={width} height={height} />;
-}
-
-function EventsPane({ focused, width, height }: PaneProps) {
-  return <CorporateActionsView focused={focused} width={width} height={height} />;
-}
-
-function AnalystTab({ focused, width, height }: DetailTabProps) {
-  return <AnalystResearchView focused={focused} width={width} height={height} />;
-}
-
-function EventsTab({ focused, width, height }: DetailTabProps) {
-  return <CorporateActionsView focused={focused} width={width} height={height} />;
-}
-
 export const researchPlugin: GloomPlugin = {
   id: "research",
   name: "Research",
@@ -637,14 +768,14 @@ export const researchPlugin: GloomPlugin = {
       id: "analyst-research",
       name: "Analyst",
       order: 32,
-      component: AnalystTab,
+      component: AnalystResearchView,
       isVisible: ({ ticker }) => !!ticker,
     });
     ctx.registerDetailTab({
       id: "corporate-actions",
       name: "Events",
       order: 34,
-      component: EventsTab,
+      component: CorporateActionsView,
       isVisible: ({ ticker }) => !!ticker,
     });
   },
@@ -654,7 +785,7 @@ export const researchPlugin: GloomPlugin = {
       id: "analyst-research",
       name: "Analyst Research",
       icon: "A",
-      component: ResearchPane,
+      component: AnalystResearchView,
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 90, height: 28 },
@@ -663,7 +794,7 @@ export const researchPlugin: GloomPlugin = {
       id: "corporate-actions",
       name: "Corporate Actions",
       icon: "E",
-      component: EventsPane,
+      component: CorporateActionsView,
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 82, height: 24 },

package/src/plugins/builtin/sec-filing-display.tsx

@@ -0,0 +1,84 @@
+import { Box, Text } from "../../ui";
+import { colors } from "../../theme/colors";
+import { formatCompact, formatCurrency } from "../../utils/format";
+import { transactionTypeLabel, type InsiderTransaction } from "./insider/insider-data";
+
+const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] as const;
+
+export function formatFilingShortDate(value: Date | string | number): string {
+  const date = value instanceof Date ? value : new Date(value);
+  if (isNaN(date.getTime())) return "—";
+  return `${MONTH_NAMES[date.getMonth()]} ${String(date.getDate()).padStart(2, " ")} ${date.getFullYear()}`;
+}
+
+export function formatFilingMetaDate(value: Date): string {
+  return value.toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export function formatFilingFormLabel(form: string, fallback = "FORM 4"): string {
+  const value = form.trim();
+  return value ? `FORM ${value}` : fallback;
+}
+
+export function renderFilingNotice(message: string, width: number) {
+  const lines = wrapNoticeLines(message, width - 4);
+  return (
+    <Box flexDirection="column" paddingX={1} paddingY={1}>
+      {lines.map((line, index) => (
+        <Box key={index} height={1}>
+          <Text fg={colors.textDim}>{line}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+export function buildInsiderTransactionTitle(transaction: InsiderTransaction): string {
+  const type = transactionTypeLabel(transaction.transactionType);
+  const price = transaction.pricePerShare != null
+    ? ` @ ${formatCurrency(transaction.pricePerShare)}`
+    : "";
+  const value = transaction.totalValue != null
+    ? ` | ${formatCurrency(transaction.totalValue)}`
+    : "";
+  return `${type} ${formatCompact(transaction.shares)} shares${price}${value}`;
+}
+
+export function buildInsiderTransactionDetailBody(transaction: InsiderTransaction): string {
+  const lines = [
+    `Transaction: ${transactionTypeLabel(transaction.transactionType)}`,
+    `Date: ${formatFilingShortDate(transaction.filingDate)}`,
+    `Shares: ${formatCompact(transaction.shares)}`,
+    `Price/Share: ${transaction.pricePerShare != null ? formatCurrency(transaction.pricePerShare) : "—"}`,
+    `Total Value: ${transaction.totalValue != null ? formatCurrency(transaction.totalValue) : "—"}`,
+    `Shares Owned After: ${transaction.sharesOwned != null ? formatCompact(transaction.sharesOwned) : "—"}`,
+  ];
+  return lines.join("\n");
+}
+
+function wrapNoticeLines(text: string, width: number): string[] {
+  const maxWidth = Math.max(width, 12);
+  const words = text.trim().split(/\s+/);
+  const lines: string[] = [];
+  let current = "";
+
+  for (const word of words) {
+    if (!current) {
+      current = word;
+      continue;
+    }
+    if (current.length + 1 + word.length <= maxWidth) {
+      current = `${current} ${word}`;
+    } else {
+      lines.push(current);
+      current = word;
+    }
+  }
+
+  if (current) lines.push(current);
+  return lines;
+}

package/src/plugins/builtin/sec.tsx

@@ -1,6 +1,6 @@
-import { Box, Text } from "../../ui";
+import { Text } from "../../ui";
 import { useEffect, useMemo, useRef, useState } from "react";
-import type { DetailTabProps, GloomPlugin, PaneProps } from "../../types/plugin";
+import type { GloomPlugin } from "../../types/plugin";
 import type { SecFilingItem } from "../../types/data-provider";
 import { useResolvedEntryValue, useSecFilingContent, useSecFilingsQuery } from "../../market-data/hooks";
 import { instrumentFromTicker } from "../../market-data/request-types";
@@ -13,6 +13,10 @@ import { getSharedMarketDataCoordinator } from "../../market-data/coordinator";
 import { parseForm4Xml, transactionTypeLabel } from "./insider/insider-data";
 import { formatCompact, formatCurrency } from "../../utils/format";
 import { createTickerSurfacePaneTemplate } from "./ticker-surface";
+import {
+  formatFilingMetaDate,
+  renderFilingNotice,
+} from "./sec-filing-display";
 
 const SEC_FILING_LIMIT = 50;
 const OWNERSHIP_FORMS = new Set(["3", "4", "5"]);
@@ -60,48 +64,8 @@ function getFilingDisplayTitle(filing: SecFilingItem): string {
   return description ? `${formLabel} | ${description}` : formLabel;
 }
 
-function wrapMessageLines(text: string, width: number): string[] {
-  const maxWidth = Math.max(width, 12);
-  const words = text.trim().split(/\s+/);
-  const lines: string[] = [];
-  let current = "";
-
-  for (const word of words) {
-    if (!current) {
-      current = word;
-      continue;
-    }
-    if ((current.length + 1 + word.length) <= maxWidth) {
-      current = `${current} ${word}`;
-    } else {
-      lines.push(current);
-      current = word;
-    }
-  }
-
-  if (current) lines.push(current);
-  return lines;
-}
-
-function renderNotice(message: string, width: number) {
-  const lines = wrapMessageLines(message, width - 4);
-  return (
-    <Box flexDirection="column" paddingX={1} paddingY={1}>
-      {lines.map((line, index) => (
-        <Box key={index} height={1}>
-          <Text fg={colors.textDim}>{line}</Text>
-        </Box>
-      ))}
-    </Box>
-  );
-}
-
 function formatFiledAt(filing: SecFilingItem): string {
-  return filing.filingDate.toLocaleString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
+  return formatFilingMetaDate(filing.filingDate);
 }
 
 function buildDetailBody(filing: SecFilingItem): string {
@@ -142,15 +106,6 @@ function buildForm4Detail(content: string | null, filing: SecFilingItem): string
   return lines.join("\n");
 }
 
-function getFormCategory(form: string): "annual" | "quarterly" | "current" | "ownership" | "other" {
-  const f = form.trim().toUpperCase();
-  if (f === "10-K" || f === "10-K/A" || f === "20-F") return "annual";
-  if (f === "10-Q" || f === "10-Q/A") return "quarterly";
-  if (f.startsWith("8-K")) return "current";
-  if (OWNERSHIP_FORMS.has(f) || f === "SC 13G" || f === "SC 13D" || f === "SC 13G/A" || f === "SC 13D/A") return "ownership";
-  return "other";
-}
-
 function getFormDescription(form: string): string {
   const f = form.trim().toUpperCase();
   switch (f) {
@@ -226,7 +181,7 @@ function toFeedItems(
   });
 }
 
-export function SecView({ width, height, focused }: Pick<DetailTabProps, "width" | "height" | "focused">) {
+function SecView({ width, height, focused }: { width: number; height: number; focused: boolean }) {
   const { ticker } = usePaneTicker();
   const selectionKey = `selectedIdx:${ticker?.metadata.ticker ?? "none"}`;
   const [selectedIdx, setSelectedIdx] = usePluginPaneState<number>(selectionKey, 0);
@@ -323,10 +278,10 @@ export function SecView({ width, height, focused }: Pick<DetailTabProps, "width"
   });
 
   if (!ticker) return <Text fg={colors.textDim}>Select a ticker to view SEC filings.</Text>;
-  if (!eligibleTicker) return renderNotice("SEC filings are only shown for US equities.", width);
+  if (!eligibleTicker) return renderFilingNotice("SEC filings are only shown for US equities.", width);
   if (loading && filings.length === 0) return <Spinner label="Loading SEC filings..." />;
-  if (error) return renderNotice(`Error: ${error}`, width);
-  if (filings.length === 0) return renderNotice(`No recent SEC filings for ${ticker.metadata.ticker}.`, width);
+  if (error) return renderFilingNotice(`Error: ${error}`, width);
+  if (filings.length === 0) return renderFilingNotice(`No recent SEC filings for ${ticker.metadata.ticker}.`, width);
 
   return (
     <FeedDataTableStackView
@@ -344,14 +299,6 @@ export function SecView({ width, height, focused }: Pick<DetailTabProps, "width"
   );
 }
 
-function SecTab(props: DetailTabProps) {
-  return <SecView {...props} />;
-}
-
-function SecPane({ focused, width, height }: PaneProps) {
-  return <SecView focused={focused} width={width} height={height} />;
-}
-
 export const secPlugin: GloomPlugin = {
   id: "sec",
   name: "SEC",
@@ -364,7 +311,7 @@ export const secPlugin: GloomPlugin = {
       id: "sec",
       name: "SEC",
       icon: "S",
-      component: SecPane,
+      component: SecView,
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 100, height: 32 },
@@ -388,7 +335,7 @@ export const secPlugin: GloomPlugin = {
       id: "sec",
       name: "SEC",
       order: 45,
-      component: SecTab,
+      component: SecView,
       isVisible: ({ ticker }) => isUsEquityTicker(ticker),
     });
   },

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

@@ -109,7 +109,7 @@ function nextSortPreference(current: SectorSortPreference, columnId: string): Se
   return DEFAULT_SORT_PREFERENCE;
 }
 
-export function SectorPerformancePane({ focused, width, height }: PaneProps) {
+function SectorPerformancePane({ focused, width, height }: PaneProps) {
   const dataProvider = useAssetData();
   const { navigateTicker } = usePluginTickerActions();
   const [rows, setRows] = useState<SectorRow[]>(

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

@@ -90,7 +90,6 @@ export function ChartTab({
           interactive={interactive}
           onActivate={onActivate}
           axisMode={axisMode}
-          symbol={symbol}
           ticker={ticker}
           financials={financials}
           indicatorConfig={hasStoredIndicatorSelection ? selectedIndicatorConfig : undefined}

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

@@ -1,7 +1,6 @@
 import type { GloomPlugin } from "../../../types/plugin";
 import { normalizeTickerInput } from "../../../utils/ticker-search";
 import { TickerDetailPane } from "./pane";
-import { FinancialsTab } from "./financials-tab";
 import { QuoteMonitorPane } from "./quote-monitor";
 import {
   buildQuoteMonitorSettingsDef,

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

@@ -560,7 +560,6 @@ export function OverviewTab({
             height={10}
             focused={false}
             compact
-            symbol={symbol}
             ticker={ticker}
             financials={financials}
           />

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

@@ -1,6 +1,6 @@
 import { Box } from "../../../ui";
 import { useShortcut } from "../../../react/input";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import type { DetailTabDef, PaneProps } from "../../../types/plugin";
 import { quoteSubscriptionTargetFromTicker } from "../../../market-data/request-types";
 import {
@@ -33,6 +33,29 @@ function sameStringSet(left: Set<string>, right: Set<string>): boolean {
   return true;
 }
 
+function registryDetailTabsSnapshot(registry: ReturnType<typeof getSharedRegistry>): string {
+  if (!registry) return "";
+  return [...registry.detailTabs.values()]
+    .map((tab) => `${tab.id}:${tab.name}:${tab.order}:${registry.getDetailTabPluginId?.(tab.id) ?? ""}`)
+    .join("\0");
+}
+
+function useRegistryDetailTabsSnapshot(registry: ReturnType<typeof getSharedRegistry>): string {
+  const subscribe = useCallback((onStoreChange: () => void) => {
+    const events = registry?.events;
+    if (!events) return () => {};
+    const unregisterRegistered = events.on("plugin:registered", onStoreChange);
+    const unregisterUnregistered = events.on("plugin:unregistered", onStoreChange);
+    return () => {
+      unregisterRegistered();
+      unregisterUnregistered();
+    };
+  }, [registry]);
+
+  const getSnapshot = useCallback(() => registryDetailTabsSnapshot(registry), [registry]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
 export function TickerDetailPane({ focused, width, height }: PaneProps) {
   const dispatch = useAppDispatch();
   const config = useAppSelector((state) => state.config);
@@ -54,6 +77,7 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
 
   const disabledPlugins = config.disabledPlugins;
   const registry = getSharedRegistry();
+  const detailTabsSnapshot = useRegistryDetailTabsSnapshot(registry);
   const pluginTabs = useMemo<DetailTabDef[]>(() => (
     registry
       ? [...registry.detailTabs.values()].filter((tab) => {
@@ -61,7 +85,7 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
         return !ownerId || !disabledPlugins.includes(ownerId);
       })
       : []
-  ), [disabledPlugins, registry]);
+  ), [disabledPlugins, registry, detailTabsSnapshot]);
   const allTabs = buildVisibleDetailTabs(pluginTabs, ticker, financials, {
     config,
     hasOptionsChain,
@@ -84,26 +108,17 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
     return next;
   }, [mountedTabIds, resolvedTabId, visibleTabIds]);
 
-  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) => {
@@ -162,17 +177,7 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
       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]);
+  }, [setChartInteractiveEager]);
 
   useShortcut(handleKeyboard);
 
@@ -196,6 +201,7 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
           tabs={allTabs.map((tab) => ({ label: tab.name, value: tab.id }))}
           activeValue={resolvedTabId}
           onSelect={setActiveTabId}
+          focused={focused && !pluginCaptured && !(resolvedTabId === "chart" && chartInteractive)}
         />
       )}